CSS 레이아웃- 포지셔닝과 주요 속성들

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

 

목차

• 1. CSS Positioning
  1) 포지셔닝의 종류
  1) 포지셔닝 비교
  
• 2. 포지셔닝 관련 주요 속성들
  1) 박스 너비 기준 정하기 - box-sizing
  2) 왼쪽이나 오른쪽으로 배치 - float
  3) float 속성 해제 - clear
  4) 요소를 보이게/보이지 않게 지정 - visibility
  5) 요소 쌓는 순서 정하기 - z-index

 

1. CSS Positioning

CSS 포지셔닝이란, CSS를 이용해서 HTML 요소들의 위치를 제어하는 방법이다.

요소에 CSS 속성으로 position을 지정하면 여러가지 방법으로 위치를 지정할 수 있다.

 

1) 포지셔닝의 종류

- 상대위치(position: relative)

• 자신의 위치를 기준으로 한 상대위치 값을 지정한다.
• 자식 엘리먼트의 크기에 따라서 부모 엘리먼트의 크기가 자동으로 변경되지만, 엘리먼트의 위치에 따라서는 변경되지 않는다.

 

- 절대위치(position: absolute)

• 문서를 기준으로 위치가 정해지기 때문에 부모 엘리먼트의 위치와는 무관하다.
• 엘리먼트의 크기가 부모 엘리먼트의 크기에 반영되지 않는다. 

 

- 고정위치(position: fixed)

• 문서를 기준으로 위치가 정해지기 때문에 부모 엘리먼트의 위치와는 무관하다.
• 엘리먼트의 크기가 부모 엘리먼트의 크기에 반영되지 않는다.
• 스크롤의 영향을 받지 않는다.

 

- 정적위치(position: static)

• 자식 엘리먼트의 크기에 따라서 부모 엘리먼트의 크기가 자동으로 변경된다.
• position 속성의 값을 지정하지 않으면 기본적으로 static의 값이 주어진다.
• left, top, right, bottom과 같은 offset이 무시된다.

 

 

2) 포지셔닝 비교

	기준위치	부모의 크기	자신의 크기	offset 사용(left,right. top,bottom)	스크롤
static	자기위치	자식의 크기에 따라 변경	width:100%로 부모의 크기를 따름	불가	따라감
relative	자기위치	자식의 크기에 따라 변경되지만 위치를 변경함에 따라 부모의 크기가 변경되지는 않음	width:100%로 부모의 크기를 따름	가능	따라감
absolute	문서(html), 시작 위치는 static 기준으로 원래의 위치에 맞춰져 있음.	부모의 크기에 영향을 끼치지 않음	포함하고 있는 컨텐트의 크기 만큼 늘어남	가능	따라감
fixed	절대위치와 동일	절대위치와 동일	절대위치와 동일	가능	고정

 

---

2. 포지셔닝 관련 주요 속성들

1) 박스 너비 기준 정하기 - box-sizing

• width속성 = 콘텐츠 영역의 너비
• box-sizing = width + 좌우패딩 + 좌우테두리

선택자 { box-sizing: 속성 값 }

속성 값	설명
content-box (기본 값)	width 속성 값을 콘텐츠 영역 너비 값으로 사용한다.
border-box	width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용한다.

 

 

2) 왼쪽이나 오른쪽으로 배치 - float

예를 들어 이미지를 왼쪽에 배치한 후 오른쪽에 텍스트를 오게 하려면 이미지 요소에 float속성을 사용하여 이미지를 왼쪽에 떠 있게 할 수 있다.

선택자 { float: left | right | none }

 

 

3) float 속성 해제 - clear

float속성을 이용해 웹 페이지 요소를 배치하게되면 그 다음에 넣는 다른 요소들에도 똑같은 속성이 전달된다. 따라서 float속성을 더 이상 사용하지 않을 때는 clear속성을 이용하면 된다.

선택자 { clear: none | left | right | both }

 

 

4) 요소를 보이게/보이지 않게 지정 - visibility

visibility속성은 특정 요소를 화면에 보이게 하거나 보이지 않게 또는 겹치게 설정하는 속성이다.

선택자 { visibility: 속성 값 }

속성 값	설명
visible (기본 값)	화면에 요소를 표시한다.
hidden	화면에서 요소를 감춘다. 하지만 크기는 그대로 유지한다.
collapse	- 표의 행, 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절한다. - 그 외의 영역에서 사용하면 hidden과 같다.

 

 

5) 요소 쌓는 순서 정하기 - z-index

• z-index속성은 요소 위에 요소를 쌓을 때 쌓는 순서를 지정한다.
• z-index값이 작을수록 아래에 쌓이고, 값이 클수록 위에 쌓인다.
• z-index값을 명시하지 않으면, 웹 문서에 맨 먼저 삽입하는 요소가 값 1을 갖고 그 후 삽입하는 요소들의 값은 점점 커진다.

선택자 { z-index: 속성 값 }