진보호스팅 블로그

CSS가 가정하고 박스 모델에서 또 하나의 중요한 기능은 바로 박스를 브라우저의 어느 곳에 배치할 수 있는가 이다. 우리가 배운 HTML에서는 문단의 겹침, 문단간격의 세밀한 조정 등 이 불가능했지만 CSS에서는 이러한 것들을 가능하게 해준다.

5.1. Position 속성
5.1.1. position : absolute | relative | static | fixed
모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 static이다.

• absolute
  
• relative
  
• static : normal flow에 따라 화면에 배열된다.
  
• fixed : 브라우저의 화면을 기준으로 고정된다. Background-attachment 속성을 참고하자.

5.1.2. Relative positioning
Block-level이나 inline layout에 의해 위치가 결정되면, 이 위치를 기준으로 box를 상하좌우로 이동시킬 수 있다. 이것을 상대위치지정(relative positioning)이라고 한 다. 이동시키는 정도는 top, left, bottom, right 속성으로 지정할 수 있다. Box의 위 치를 이동시킨다고 해서 다음에 나오는 형제자매 요소의 위치가 함께 이동되는 것은 아니다. 따라서, 상대적 배열을 이용하면, 요소 box들이 서로 겹쳐지는 효과를 낼 수 있다.

P안에 SPAN이 포함되는 경우, P는 SPAN의 부모(parent) 요소가 되고, SPAN은 P의 자식 (child) 요소가 된다. P 다음에 다른 P가 올 경우, 두 개의 P는 서로 형제자매 관계 (sibling)가 된다. P안에 있는 SPAN 안에 다시 EM이 포함된다면, P는 EM의 조상 (ancestor)이 되고, EM은 P의 후손(descendant)이 된다.

부모 요소가 상대적 배열에 의해 위치가 변경되면, 자식 요소는 변경된 위치를 기준으로 배열된다. 하나의 요소 box를 상대적으로 지정하려면, position 속성의 값을 relative로 주어야 한다.

5.2. Float, Clear 속성
5.2.1. float : left | right | none
float 속성은 보통 이미지에 많이 사용한다. 이미지를 왼쪽이나 오른쪽에 떠다니도록 하면, 이미지 다음에 나오는 문자열이 이미지를 둘러싸고 나오게 된다. HTML에서는 그림 옆에 문자열을 넣을 경우, 항상 한 줄만 나오고, 나머지는 그림 아래로 내려가게 된다.모든 요소에 적용되며, 상속되지 않는다. 초기값은 none이다.

5.2.2. clear : none | left | right | both
지정한 방향에는 떠다니는 box가 자리할 수 없음을 나타낸다. 즉, clear의 값을 both로 하면, 해당 요소의 단락 좌우에는 떠다니는 box가 올 수 없다. 따라서, 떠다니는 box의 다음 줄로 내려가게 된다. 모든 요소에 적용되며, 상속되지 않는다. 초기값은 none이다.

	HTML에서는 이렇게 그림 다음에 글자를 쓰면 그림 옆에 한 줄 나오고, 나머지는 그림 아래로 내려가 버리는 것을 앞선 강좌에서 배우셨을 겁니다. 지금은 어떤가요? clear 속성을 쓴 가로선은 그림 아래로 내려가구요.

5.3. Absolute positioning
Absolute positioning은 기준박스에서 상하좌우로 위치를 이동시킨다. 기준 박스란 보통 브라우저를 의미하게 된다. 만약, 부모 요소가 absolute positioning에 의해 위치가 정해졌다면, 자식 요소에 absolute positioning을 적용할 때는 부모 요소의 box를 기준으로 위치를 잡게 된다. Absolute positioning을 하게 되면 margin은 없어지고, padding과 border만 남게 된다.

속성 속성값 설명 top 길이 | 퍼센트 | auto 브라우저 화면 윗쪽을 기준으로 얼마나 내려올 지를 정한다. 퍼센트값은 전체 화면 높이를 기준으로 한다. 모든 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. right 길이 | 퍼센트 | auto 브라우저 화면 오른쪽을 기준으로 왼쪽으로 얼마나 들어올 지를 정한다. 퍼센트값은 전체 화면 넓이를 기준으로 한다. 모든 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. bottom 길이 | 퍼센트 | auto 브라우저 화면 아랫쪽을 기준으로 윗쪽으로 얼마나 올라올 지를 정한다. 퍼센트값은 전체 화면 높이를 기준으로 한다. 모든 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. left 길이 | 퍼센트 | auto 브라우저 화면 왼쪽을 기준으로 오른쪽으로 얼마나 들어올 지를 정한다. 퍼센트값은 전체 화면 넓이를 기준으로 한다. 모든 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다.

5.4. relative, floating, absolute positioning 비교
각각의 positioning 방법을 비교하기 위해 아래와 같은 문서가 있다고 가정하자. 아래 나오는 예는 BODY 부분은 변하지 않고, STYLE에 들어가는 속성만을 계속 바꾸어 준 것이다.

	여기서부터 본문이 시작합니다. 여기는 outer에 해당하는 내용이 시작하는 곳입니다. 이곳은 Inner의 내용이 들어가는 곳입니다. 여기까지 outer의 내용은 끝입니다. 그리고, 본문이 끝났습니다.

5.4.1. Relative positioning

	BODY {line-height : 80%} #outer {position: relative; top: -12px; color: red;} #inner {position: relative; top: 12px; color: blue;}

5.4.2. Floating

	여기서부터 본문이 시작합니다. 여기는 outer에 해당하는 내용이 시작하는 곳입니다. 이곳은 Inner의 내용이 들어가는 곳입니다. 이곳은 Sibling의 내용이 들어가지요. 여기까지 outer의 내용은 끝입니다. 그리고, 본문이 끝났습니다.

5.4.3. Absolute positioning

	#outer {position: absolute; top: 150px; left: 150px; width: 200px; color: red;} #inner {color: blue;}
	#outer {color: red;} #inner {position: absolute; top: 100px; left: -50px; width: 130px; color: blue;}

5.5. Z-index 속성
여러 개의 box가 서로 겹쳐지게 보이도록 하는 속성이다.

z-index : auto | 숫자
Position 속성의 값이 absolute나 relative인 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다.

• auto : 쓴 순서대로 쌓인다. z-index가 0인 것과 같다.
  
• 숫자 : 숫자가 낮은 요소가 밑으로 간다.
  - 음수가 들어가면, 부모 요소보다 밑으로 간다. 조상 요소 밑으로 보낼 수는 없다.
  - 양수가 들어가면, 부모 요소보다 위로 간다.
  

다음의 결과를 확인해 보도록 하자.