포지셔닝
box-sizing
- content-box 너비와 높이를
content
를 기준으로
- border-box 너비와 높이를
border
를 기준으로
예시
box-sizing
float
특정 요소를 띄워서 그 주변을 다른 요소들이 흘러갈 수 있도록 합니다.
clear
여기서부터 float
을 무효화시키겠다!
라는 의미로 clear
속성을 사용합니다.
Holy Grail Layout
CSS Layout 의 Helloworld!
예시
float
Holy Grail Layout
position
static
기본 값입니다.
HTML 문서상 요소의 정의 순서대로 배치가 됩니다.
float 속성을 통해 좌우 배치만 결정할 수 있습니다.
relative absolute fixed stikcy
예시
- 좌표에 대해 - Coordinates
- 포지셔닝 예시 - Positioning
z-index
예시
z-index
Simple Modal
Column
신문처럼 다단 레이아웃 구성하기
예시
Column