4.레이아웃

1. display 속성

2. visibility 속성

3. position 속성

4. float 속성

5. clear 속성

6. overflow 속성

7. z-index 속성

1. display 속성

---

1. display : block

   HTML의 모든 요소는 직사각형의 박스다. display 속성은 직사각형 상자의 위치, 크기 등을 결정한다.

   block 요소는 시작과 끝에 줄바꿈을 취하고 block의 가로 길이는 가능한 최대로 한다.

   대표적으로 span 태그는 block의 반대 개념인 inline 요소인데 display 속성으로 block으로 변경할 수 있다.

span { display: block; }

2. display : inline

   inline 요소는 필요한 만큼만 가로 길이를 가져가고 줄바꿈하지 않는다. 대표적으로 p 태그는 inline의 반대 개념인

block 요소인데 display 속성으로 inline으로 변경할 수 있다.

p { display: inline; }

3. display : none

   HTML 요소를 화면에서 숨긴다. 자리까지 숨기는 거라서 화면에는 이 요소가 원래 없었던 것처럼 표시된다.

h1 { display: none; }

2. visibility 속성

---

visibility 속성은 HTML 요소를 화면에서 보일지 숨길지 결정한다. 보통 visible과 hidden을 사용한다.

visibility:hidden과 display:none은 화면에서 안보이게 한다는 공통점이 있지만 display:none은 요소의 자리까지 빼는 반면에 visibility:hidden은 자리는 그대로 차지하게 한다. 즉, 화면 전체의 레이아웃을 고려해 사용해야 한다.

 

div.hidden { visibility: hidden; }

3. position 속성

---

1. position 속성은 요소의 위치를 결정한다. 요소간의 앞뒤 순서를 변경하고 요소 크기가 클 때 어떻게 할지 등을 결정한다.

요소는 top, bottom, left, right 속성을 사용하여 화면에 위치할 수 있다. 그러나 이 위치값들은 position 속성이 설정되어 있지 않다면 동작하지 않는다. 또한 position 속성의 값에 따라 위치값들이 다르게 동작한다.

position 속성의 기본값은 static이다. static은 요소를 웹 페이지의 흐름에 따라 위치시킨다.

p.position_static { position:static; top: 30px; right: 5px; }

2. 위치 고정

  요소의 위치를 고정시키기 위해 fixed값을 사용한다. 화면을 스크롤 해도 fixed된 요소는 움직이지 않는다. 화면 기준으로 top, left, bottom, right 속성을 사용하여 고정할 위치를 선택할 수 있다.

p.position_fixed { position: fixed; top: 30px; right: 5px; }

3. 상대 위치 지정

  요소가 static 값에 따라 있어야 할 위치로부터 상대 위치를 지정할 수 있다. 원래 있어야 할 위치에서 top, left, bottom, right 속성을 사용하여 요소를 이동시킬 수 있다.

span { background: green; color:white; position: relative; top: 150px; left: 50px; }

4. float 속성

---

1. float 속성은 요소를 왼쪽이나 오른쪽으로 위치시킬 수 있다. float는 보통 이미지를 위해 사용하나 화면 전체 레이아웃을 잡는데도 유용하게 사용한다. 값은 left, right, none이다.

 Left와 Right는 요소를 왼쪽, 오른쪽으로 위치시킨다. 기본값은 none으로 float 속성을 적용하지 않는다.

img { float: right; }

2. 여러개의 float 요소들을 설정하면 충분한 공간이 있을 때 나란히 배치된다.

img { float: left; width: 120px; margin-right: 10px; } p { width: 120px; float: left; }

5. clear 속성

---

 float 요소 다음에 오는 요소들은 float 요소들 주변에 위치된다. 이것을 회피하기 위해 clear 속성을 사용한다. clear 속성은 그 요소의 양쪽에 다른 float 요소들의 위치 여부를 결정한다. float 요소들은 위치 특성 때문에 그 다음에 오는 요소들에도 영향을 미친다. 다음 요소의 입장에서 앞의 float 속성을 신경쓰고 싶지 않고 다음줄에서 시작하고 싶을 때 clear를 사용한다. clear의 값은 left, right, both가 있다. both는 left, right 모두 제거한다.

CSS	.floating { float: right; } .clearing{ clear: both;}
HTML	This paragraph is above the div element and is not affected by the float right property. <br /><br /> <div class="floating"> <img src="css_logo.png" /> </div> This paragraph comes after the div element and is affected by the float right property. <br /><br class="clearing"/> This paragraph also comes after the div element and is affected by the float right property. <br /> <br />

6. overflow 속성

---

1. 페이지의 모든 요소는 박스이다. 만약 박스 높이가 설정되어 있지 않다면 요소의 내용에 따라 높이가 무한히 늘어난다. 이를 방지하기 위해 overflow속성을 사용한다. 사용 가능한 값으로는 visible(default), scroll, hidden, auto가 있다. 

  - scroll은 내용이 길면 긴 내용을 짜르고 스크롤 바(가로, 세로 모두)를 만든다. 가로나 세로 특정 스크롤만 생기게 하고 싶다면 overflow 대신 overflow-x, overflow-y 속성을 사용한다.

div { width: 150px; height: 150px; background-color: LightBlue; float: left; overflow: scroll; }

  - auto : 내용이 세로로 넘치면 세로 스크롤을 생성하고 가로로 넘기면 가로로 스크롤을 생성한다. 양쪽 넘치면 양 스크롤 모두 생성한다.

  - hidden : 내용이 넘치면 안보이는 내용을 화면에서 안보이게 한다.

7. z-index 속성

---

HTML 요소들이 정상 흐름을 따르지 않아서 서로 겹쳐있을 수 있다. z-index는 요소들의 순서를 결정한다. z-index가 높을수록 먼저 보인다.

.blue { z-index: 3; position: relative; background-color: #8EC4D0; margin-bottom: 15px; width: 120px; height: 120px; color: #FFF; } .red { z-index: 2; position: relative; background-color: #FF4D4D; width: 120px; height: 120px; color: #FFF; margin-top: -50px; margin-left: 50px; }

<연관게시글>