CSS 포지셔닝

css에서 가장 중요한속성이 바로 포지셔닝이다. 이것을 이용해서 웹 문서의 레이아웃이 짜여진다고 생각하면 된다.
우리가 네이버나 다음에서 보는 검색창, 광고, 로그인 창들의 위치는 모두 css로 만들고 그 배치를 하는 것이 바로 포지셔닝이다.

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

box-sizing은 박스 모델 안에 있는 콘텐츠 부분의 너비와 높이를 정하는 속성이다. 속성값에는 content-box와 border-box가 있으며 content-box는 너비의 기준이 컨텐츠이고, border-box는 콘텐츠 영역의 테두리까지 포함한다.

box1의 실제 넓이는 패딩 30px border 2px 콘텐츠 너비 300px = 364px
box2의 실제 넓이는 300px에서 패딩 30px과 테두리 2px씩 할당해서 = 236px이 된다.

더 자세히 보고 싶으면 크롬 검사에 Computed 요소를 살펴보면 더 자세히 볼 수 있다.

float : 왼쪽 혹은 오른쪽

float의 단어적 의미는 “뜨다”, “띄우다”이다. 즉 css에서 float는 요소를 띄어서 배치시킨다는 의미이다.
즉 이미지를 어떻게 띄어서 텍스트와 함께 배치할 것인가를 나타낸다. 속성값에는 inherit(부모 요소로부터 상속),left, right, none이 있다.

float에서 중요한 점은 그 원리 이다. float를 지정할 경우 필요한 너비 값을 차지하고 다른 요소가 들어올 만큼의 공간을 비워둔다.

clear : float 해제하기

float 속성을 적용시켜 배치하면 그 다음에 넣는 요소들에게도 같은 속성이 전달된다. 이제 그만~ 을 알려주기 위해선 clear를 사용하여야 한다.

left를 무효화 할 때에는 clear:left, right는 clear:right, 상관업싱 할 떄는 clear: both를 사용하면 된다.

문서 구조 만들기

사이드바나 nav의 위치가 바뀌는 것은 상관없지만 보통 웹 문서는 이러한 레이아웃 구조를 가지고 있다.

position 속성

position 속성은 문서 안 요소들을 자유롭게 배치하는 속성이다. 속성값에는 static(문서의 흐름에 맞춰 배치), relative(이전 요소에 자연스럽게 연결해 배치, 위치 지정 가능), absolute(원하는 위치 배정), fixed(지정한 위치에 고정)

static 속성을 제외한 나머지는 좌표를 이용하여 위치를 조절할 수 있다.

• relative

위 예제는 원래 float 상 위치해야 될 위치에서 왼쪽으로 50px, 위에서 아래로 30px 조정되었다.

• absolute

absolute의 기준이 되는 위치는 가장 가까운 부모 요소나 조상 요소 중 position이 relative인 속성이다.

• fixed

문서이 흐름과 상관없이 좌표로 결정하지만 브라우저 창이 기준이 된다. (브라우저 창 왼쪽 위 기준)

visibility : 보이거나 보이지 않거나

특정 요소를 보이게 하거나 보이지 않게 할 수 있다. 속성값에는 visible, hidden, collapse이 있다.

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

한 요소 위에 다른 요소를 쌓는 속성이다. z-index 값이 작을 수록 아래에 쌓이고 높을 수록 작은 요소보다 위에 쌓인다. 명시하지 않을 경우에는 웹 문서에 제일 처음 삽입하는 요소가 z-index: 1 값을 가지고 순차적으로 커진다.