1. box-sizing - 박스 너비 기준
box-sizing 속성을 사용하면 width 속성 값을 콘텐츠 영역 너비 값으로 사용할 지, 패딩이나 테두리까지 포함시켜 사용할 지 결정할 수 있습니다.
box-sizing: content-box | border-box
2. float 속성 - 왼쪽이나 오른쪽으로 배치
float: left | right | none
3. clear 속성 - float 속성 해제
clear: none | left | right | both
4. position 속성 - 배치 방법 지정
속성 값 |
설명 |
static |
요소를 문서의 흐름에 맞추어 배치한다. |
relative |
이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있다. top, right, bottom, left 속성을 사용할 수 있으며 좌푯값을 사용해 위치를 지정할 수 있다. |
absolute |
top, right, bottom, left 속성 값을 사용해 요소를 원하는 위치에 배치한다. absolute를 사용하려면 그 요소를 감싸는 <div>를 만들고 position을 relative로 지정해야 한다. |
fixed |
지정한 위치에 고정해 배치한다. 화면에서 요소가 잘릴 수도 있다. absolute 속성 값처럼 문서의 흐름과 상관없이 위치를 좌표로 결정하지만 부모 요소가 아닌 브라우저 창이 기준이 된다. |
5. visibility 속성 - 요소를 보이게 하거나 보이지 않게 하기
속성 값 |
설명 |
visible |
화면에 요소를 표시한다. |
hidden |
화면에서 요소를 감춘다. 하지만 크기는 그대로 유지하기 때문에 배치에 영향을 미친다. |
collapse |
표의 행, 열, 행 그룹, 열 그룹 등에서 지정하면 서로 겹치도록 조절한다. 그 외의 영역에서 사용하면 'hidden'처럼 처리한다. |
6. z-index 속성 - 요소 쌓는 순서
z-index: <숫자>
z-index 값이 작을 수록 아래에 쌓이고 z-index 값이 클 수록 z-index 값이 작은 요소보다 위에 쌓입니다. z-index 값을 명시 하지 않을 경우, 웹 문서에 맨 먼저 삽입하는 요소가 z-index:1 값을 가지며 그 후 삽입하는 요소들은 z-index 값이 점점 커집니다.
<출처 - Do it! HTML5+CSS3 웹 표준의 정석>
'IT > CSS' 카테고리의 다른 글
| [CSS 입문] 표 스타일 속성 (0) | 2017.04.19 |
|---|---|
| [CSS 입문] 다단 관련 속성 (0) | 2017.04.19 |
| [CSS 입문] 여백을 조절하는 속성 (0) | 2017.04.17 |
| [CSS 입문] 테두리 관련 속성 (2) | 2017.04.13 |
| [CSS 입문] CSS와 박스 모델 (0) | 2017.04.12 |