CSS Layout (display / float / clear)
display 속성
: 배치 방법 결정 (블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용 가능)
| 종류 | 설명 |
| block | 인라인 레벨 요소를 블록 레벨 요소로 전환 |
| inline | 블록 레벨 요소를 인라인 레벨 요소로 전환 |
| inline-block | 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지는 속성 - 인라인 레벨 요소인데 마진과 패딩 지정가능 |
| none | 해당 요소를 화면에 표시하지 않는 속성 |
float 속성
: 왼쪽 또는 오른쪽으로 배치
- <p> 태그처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 경우
| 종류 | 설명 |
| left | 해당 요소를 문서의 왼쪽에 배치 |
| right | 해당 요소를 문서의 오른쪽에 배치 |
| none | 좌우 어느쪽에도 배치하지 않는 속성 : 기본값 |
clear 속성
: float 속성을 해제
| 종류 | 설명 |
| left | float: left 해제 |
| right | float: right 해제 |
| both | float: left와 float: right 해제 |
CSS position
position 속성 : 웹 문서에서 요소의 위치 지정
| 종류 | 설명 |
| left | 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정 |
| right | 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정 |
| top | 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정 |
| bottom | 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지 |
배치 방법 지정
: 웹 문서 안의 요소를 배치 -> 텍스트나 이미지를 나란히 배치 OR 원하는 위치 선택 가능
| 종류 | 설명 |
| static | 문서의 흐름에 맞춰 배치 : 기본값 |
| relative | static + 위칫값 지정 |
| absolute | relative 값을 사용한 상위 요소를 기준으로 위치를 지정해 배치 |
| fixed | 브라우저 창을 기준으로 위치를 지정해 배치 |