'Front-End/HTML5 + CSS' 카테고리의 글 목록 (4 Page)

[CSS] Height 100% 하는법

Front-End/HTML5 + CSS 2016. 12. 13. 15:45

Height 100% 하는법

1. 원인

- 요소의 크기가 width: 100%는 되지만 height:100%는 되지 않는다

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ border : 2px solid coral; width: 100%; height:100%; } </style> </head> <div id="height"> </div>

- 사진처럼 width 만 적용되고 height는 적용되지 않아 줄처럼 보인다

2. 해결

- html, body 태그에 높이 지정

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html,body{ height:100%; overflow: hidden; } div{ border : 2px solid coral; width: 100%; height:100%; } </style> </head> <div id="height"> </div>

- height가 적용되었다

- %는 기준으로 삼을 높이가 필요하지만 기존에는 없기 때문에 기준 삼을 높이 html, body 태그를 지정했다

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS3] Flex Position - Flexbox Layout (0)	2016.12.18
[CSS] HTML 요소 가운데 정렬 쉽게 하기 (0)	2016.12.13
[CSS] 3단 레이아웃 (float, display) (0)	2016.12.11
[CSS] 고정 <header>, <footer> 만들기 (0)	2016.12.11
[CSS] Inline vs Block vs Inline-block 속성 (0)	2016.12.11

리딩리드

,

[CSS] 3단 레이아웃 (float, display)

Front-End/HTML5 + CSS 2016. 12. 11. 17:40

3단 레이아웃 (float, display)

- 네비게이션, 콘텐츠, 사이드 바

- 가운데 콘텐츠를 브라우저의 크기에 따라 변한다

1. float를 이용한다

1) 소스

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height:500px; } #navigation{ background-color: beige; float: left; width:200px; margin-right:-200px; } #content{ float:left; width:100%; } #content-inner{ margin: 0 200px; background-color: cornflowerblue; } #sidebar{ float:left; width:200px; margin-left:-200px; background-color: cadetblue; } </style> </head> <div id="navigation">navigation</div> <div id="content"> <div id="content-inner">content</div> </div> <div id="sidebar">sidebar</div>

- float 속성을 이용하여 레이어를 left 로 차례대로 붙인다

- 가변적으로 폭을 변하게 하기위해 하나의<div>가 아니라 안쪽의 inner <div>를 추가한다

- 만약 레이어가 왼쪽으로 하나더 붙는다면 clear속성을 사용하여 방지 한다

2. display : table-cell 사용

- float 보다 간결하다

1) 소스

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height:500px; } #body{ width:100%; display: table; } #navigation, #content, #sidebar{ display: table-cell; } #navigation{ width:200px; background-color: cadetblue; } #content{ background-color: cornflowerblue; } #sidebar{ width:200px; background-color: beige; } </style> </head> <div id="body"> <div id="navigation">navigation</div> <div id="content">content</div> <div id="sidebar">sidebar</div> </div>

- 전체를 <table>로 만든 후 <div>를 table-cell이 됨

3. 화면

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS] HTML 요소 가운데 정렬 쉽게 하기 (0)	2016.12.13
[CSS] Height 100% 하는법 (0)	2016.12.13
[CSS] 고정 <header>, <footer> 만들기 (0)	2016.12.11
[CSS] Inline vs Block vs Inline-block 속성 (0)	2016.12.11
[CSS3] CSS3 사용자 인터페이스 (0)	2016.12.11

리딩리드

,

[CSS] 고정 <header>, <footer> 만들기

Front-End/HTML5 + CSS 2016. 12. 11. 16:54

고정 <header>, <footer> 만들기

1. 구현

1) body

body{ margin-top : 120px; margin-bottom:120px; }

- body의 위, 아래의 margin 값으로 header와 footer를 고정 시킬 여백의 공간을 만든다

2) <header>

header{ border : 4px solid brown; position : fixed; left : 0; top : 0; width: 100%; height:100px; background-color: antiquewhite; z-index: 4; }

- position: fixed로 고정한다

- z-index : 속성으로 태그들 가장 앞에 배치 하도록 한다.(제대로 동작 안 할 시 추가)

3) <footer>

footer{ border : 4px solid brown; position : fixed; left:0; bottom : 0; width: 100%; height:100px; background-color:antiquewhite; }

4) fullSource

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin-top : 120px; margin-bottom:120px; } footer{ border : 4px solid brown; position : fixed; left:0; bottom : 0; width: 100%; height:100px; background-color:antiquewhite; } header{ border : 4px solid brown; position : fixed; left : 0; top : 0; width: 100%; height:100px; background-color: antiquewhite; z-index: 4; } </style> </head> <header> This is a header </header> <footer> This is a footer </footer>

5) 화면

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS] Height 100% 하는법 (0)	2016.12.13
[CSS] 3단 레이아웃 (float, display) (0)	2016.12.11
[CSS] Inline vs Block vs Inline-block 속성 (0)	2016.12.11
[CSS3] CSS3 사용자 인터페이스 (0)	2016.12.11
[CSS3] CSS3 애니메이션 속도 제어 (0)	2016.12.11

리딩리드

,

[CSS] Inline vs Block vs Inline-block 속성

Front-End/HTML5 + CSS 2016. 12. 11. 13:51

Inline vs Block vs Inline-block 속성

- CSS의 가장 기본적인 속성

- 모든 요소들을 inline, block, inline-block중 하나를 가진다

- Block > Inline 보다 큰 개념이다. 그렇기 때문에 inline 태그안에 block 태그를 넣는 다면 오류가 발생

1. Inline

- 물 흐르듯이 한 줄에 여러 요소가 들어가는 속성

1) 예제

<a href="#"><b>Test</b>link</a>

- 태그를 2개 사용하였지만 한 줄에 모두 적용 되었다

3) 특징

- Inline 요소 상하 여백은 margin 이 아니라 line-height에 의해 컨트롤

- width, height 속성은 안된다

- 좌우 5px 여백이 자동 적용

2) Inline 속성 태그

a abbr acronym b bdo big br button cite code dfn em i img input kbd label map object q samp small script select span strong sub sup textarea tt var

2. Block

- 한 태그가 한 줄을 모두 차지

1) 예제

<div>hi</div> <p> hello</p>

- 태그 2개가 두 줄에 의해 보여진다

2) 특징

- margin, width, height가 모두 적용

- 주로 레이어를 잡을 때 사용 한다

- background-color로 block 인지 아닌지 확인이 가능하다

3) block 속성 태그

address article aside audio blockquote canvas dd div dl fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr noscript ol output p pre section table tfoot ul video

3. Inline-block

- block과 Inline의 중간 속성으로 사용자에 의해 정의 된다

- Inline과 같이 한 줄에 나타나며 margin, width, height가 적용된다

1) 예제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style>  </style> </head> <div> Hello </div> <div> hi </div>

- <div> 태그를 2 개 정의 했지만 한 줄에 같이 출력된다

- display : inline-block

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS] 3단 레이아웃 (float, display) (0)	2016.12.11
[CSS] 고정 <header>, <footer> 만들기 (0)	2016.12.11
[CSS3] CSS3 사용자 인터페이스 (0)	2016.12.11
[CSS3] CSS3 애니메이션 속도 제어 (0)	2016.12.11
[CSS3] CSS3를 이용한 애니메이션 효과 (0)	2016.12.11

리딩리드

,

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

'Front-End/HTML5 + CSS'에 해당되는 글 36건

[CSS] Height 100% 하는법

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS] 3단 레이아웃 (float, display)

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS] 고정 <header>, <footer> 만들기

'Front-End > HTML5 + CSS' 카테고리의 다른 글

[CSS] Inline vs Block vs Inline-block 속성

'Front-End > HTML5 + CSS' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바