CSS 포지셔닝

포지셔닝 핵심내용

float - 왼쪽이나 오른쪽에 배치

z-index - 요소의 쌓는 순서 결정

clear - float 속성 해제

position - 배치방법 지정

visibility - 요소를 화면에 표시하거나 감추기

border-collapse - 테두리 합치기

table-layout - 콘텐츠에 맞게 셀 너비 지정

vertical-align - 셀 안에서 수직 정렬

포지셔닝이란?

우리가 원하는 요소들을 화면이라는 네모창에 딱딱 맞게 넣어주는 것 네이버 창 같이 여기저기에 적재적소 하는것.

브라우저 화면 안에 각 콘텐츠 영역을 어떻게 배치할지를 결정하는 것이 지금부터 배울 float과 position이다.

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

박스 모델을 배치하려면 우선 박스 모델의 너비를 알아야한다. width 속성 값이 콘텐츠 영역의 너비만 나타내기 때문에 패딩이나 테두리는 

따로 계산 해야한다. 이럴때 사용하면 width 속성 값을 콘텐츠 영역 너비 값으로 사용할지, 패딩이나 테두리까지 포함 시켜 사용할지 결정 가능

box-sizing: content-box | border-box

content-box - width 속성 값을 콘텐츠 영역 너비 값으로 사용한다. 기본값이다.

border-box - 영역의 테두리까지 포함한 박스 모델 전체 너비 값으로 사용한다.

2. float - 왼쪽이나 오른쪽으로 배치하기

웹 요소를 문서 위에 떠 있게 만든다. 여기서 '떠 있다' 라는 의미는 왼쪽 구석이나 오른쪽 구석에 요소가 배치된다는 뜻이다.

이미지를 왼쪽에 띄우면 그 주변을 다른 요소가 감싼다 따라서 이미지와 텍스트를 나란히 표시하려고 할 때는 이미지에 float속성을 사용

이미지와 텍스트의 적당한 간격을 위해 margin-right도 함께 사용한다. 또 이 속성을 지정하면 너비 값은 콘텐츠를 표시할 때 필요한 만큼만

차지하고 다른 요소가 들어올 만큼의 공간을 비워 둔다.

float을 적용한 이미지들은 왼쪽부터 하나씩 차례대로 오고 float를 적용하지 않으면 이미지가 겹쳐서(떠 있기때문) 보인다.

float: left | right | none

3. clear - float 속성 해제하기

float 속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소들에도 똑같은 속성이 전달된다. 따라서 float 속성이 더 이상 유용하지 않다고 알려주는 속성이 필요한데 그것이 clear다. float:left 로 왼쪽으로 배치했다면 clear: left로 무효화

clear: left | right | both 

1번과 2번은 float 적용으로 차례차례 이미지가 붙었고 3번은 그냥 이미지를 넣어서 겹쳐 보이는것이고

4번은 clear로 float 속성을 지웠기 때문에 밑에 한 자리를 차지하게 된것.