[CSS 기본] CSS 레이아웃

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

box-sizing: content-box | border-box

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

 

float     왼쪽 or 오른쪽 배치

float: left | right | none

 

clear     float 속성 해제

- float 속성을 이용해 요소를 배치하면 그 다음에 넣는 다른 요소에도 똑같은 속성이 전달된다. 따라서 float 속성이 더 이상 유효하지 않다고 알려주기 위해 clear 속성을 사용한다.

clear: none | left | right | both

position     배치 방법 지정

position: static | relative | absolute | fixed

속성 값	설명
static	- 요소를 문서의 흐름에 맞춰 배치 - top, right,bottom, left 같은 속성을 사용할 수 없다. - float 속성을 이용해 좌우로 배치할 수 있다.
relative	- 이전 요소에 자연스럽게 연결해 배치. 위치 지정 가능 - top, right,bottom, left 속성을 사용할 수 있다.
absolute	- 원하는 위치를 지정해 배치 - 기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중 position 속성이 relative인 요소
fixed	- 지정한 위치에 고정해 배치. 화면에서 요소가 잘릴 수도 있다. - 브라우저 창 기준

 

visibility     요소 보이기/숨기기

visibility: visible | hidden | collapse

 

z-index     요소 쌓는 순서 설정 

z-index: <숫자>