1. position 속성 - relative, absolute, fixed
2. inline, inline-block, block 에 대해서
3. float에 대해서

CSS Layout

1.position

position 속성(property)은 element가 문서의 어디에 위치할 지 지정한다. 이는 top, bottom, right, left 속성을 지정함으로서 최종위치를 결정한다.

1) relative

기존 위치(static 상태)에서 위치가 조정되도록 한다. top, bottom, right, left를 쓰지 않는한 static과 동일한 위치에 존재한다.

2) absolute

해당 element의 가장 가까운 조상 요소(바로 상위의 element)를 기준으로 위치가 결정된다. 기준이 되는 조상 element가 없을 경우 문서 본문(document body)가 기준이 되며 페이지 스크롤에 따라 움직인다.

3) fixed

기존 위치를 무시하고 뷰포트(veiwport)를 기준으로 위치가 결정된다. 즉, 페이지가 스크롤이 되어도 항상 같은 위치에 있게된다. top, bottom, right, left를 사용 할 경우 뷰포트 기준으로 위치가 변경된다.

2. inline과 block

inline과 block은 CSS의 display(property, 속성)의 값(value)이다.

1) inline

inline은 한 줄에 여러개의 태그가 들어 갈 수있다. 예를 들면 inline 속성을 기본값으로 하는 <span>은 한 줄에 여러개의 <span>을 사용 할 수 있다. 이러한 기본 속성은 CSS에서 display를 사용함으로서 변경가능하다.

2) inline-block

inline-block은 element가 inline과 block 요소 모두 가지도록 한다. 이를 통해 원래 inline은 width, height 조절이 되지 않으나 inline-block 사용 시 width, height 조절이 가능하게 된다.

3) block

block은 한 줄에 하나의 태그만이 보이게 한다. 예를 들어 여러개의 <div>를 사용할 경우 각 <div>는 한 줄에 하나만 보이게 된다.

3. float

float는 element가 일반적인 흐름(normal flow)에서 벗어나도록 만든다. 원래 이미지 주위를 텍스트로 감싸기 위해 만들어졌으나 flex의 등장 이전에는 문서의 레이아웃을 조정하는데 쓰였다.

1) float이 위치를 잡는 법

float이 되면 문서의 일반적인 흐름에서 빠지는데 이 float은 포함 되는 박스나 다른 float 요소의 가장자리(edge)에 닿을 때까지 좌나 우로 움직인다.

2) clear

clear는 float를 제어하기 위한 속성이다. clear를 설정한 위치로는 float이 적용되지 않는다. 예를들어 'clear: left'를 사용 할 경우 왼쪽에 적용 된 float 속성을 해제해 해당 위치로 float이 적용되지 않고 일반적 흐름(normal flow)를 유지한다. 이로 float에 의해 중첩된 element가 중첩되어 위치하지 않게 만든다.