layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이다
우리는 CSS를 통해서 원하는 위치로 배열 시킬수 있다.
1. position 속성
div위에 div를 쌓고 싶을 경우 position 속성을 이용합니다.
이외에도 배치를 위해서 position 속성을 이용합니다.
relative
절대적인 값으로 사용자가 원하는 위치 만큼 이동합니다.
우리는 top, bottom, left, right 값을 이용하면서 개체를 원하는 곳으로 이동시킬수 있습니다.
absolute의 부모가 되는 격으로 absolute가 relative 속성의 개체를 고려하여 움직이게 합니다.
absolute
div위에 div를 쌓고 싶을 경우 relative의 하위(자식)에게 absolute를 부여합니다. relative의 값으로 상대적으로 위치가 이동합니다.
fixed
fixed 프로퍼티은 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표 프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킨다. 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치합니다.
2. inline, inline-block, block 에 대해서
우리는 display값으로 inline, inline-block, block 의 속성을 사용할수 있습니다.
block
우리는 대표적으로 자주 사용되는 div값에서 블록 설정을 이해할수 있습니다.
대체적으로 block을 기본 속성으로 가지고 있는 태그들이 있습니다.
block을 속성으로 가지게 되면 가로를 한칸 전체로 사용하게 됩니다.
그래서 div를 옆에 추가하고 싶어도 옆으로 추가할수 없기 때문에 아래로 추가가 됩니다.
inline-block
inline-block은 block과는 반대가 되는 성질을 가지고 있습니다. 가로를 다 차지하지 않기 때문에 옆에 값을 추가할수 있습니다.
줄바꿈을 하지 않고 사용자가 원하는 가로,세로 값을 주어서 크기를 결정 할수 있습니다.
inline
inline은 주로 텍스트를 주입 할 때 사용 되는 형태입니다. 그렇기 때문에 기본적으로 block처럼 width값이 100%가 아닌 컨텐츠 영역 만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않습니다. 높이 또한 폰트의 크기만큼 잡힙니다
그래서 width와 height를 명시 할 수 없으며, margin으로 위아래를 적용할수 없습니다.
3. float에 대해서
float 은 부유하다. 떠있다 라는 뜻으로 사용되는데
말그대로 부유한 상태로 위치해 있습니다.
대표적인 값으로는 none,left,right 값을 사용할수가 있습니다.
none:
float은 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.
-MDN float-
그래서 none은 요소가 부동하지 않아야 함을 나타내는 키워드입니다.
block처럼 한 곳을 차지하고 있습니다.
left: 왼쪽에 부유하며 떠있습니다.
가장 쉽게 이해할수있는 모형으로는 word 에서 그림에서 글자취급을 선택하였을때 나타나는 현상으로 이해하면 쉽습니다.
또한 신문 기사처럼 그림이 있고 그 옆으로 글자가 그림의 넓이만큼 줄어든 것처럼 나타나게 됩니다.
right: left의 반대의 모양으로 오른쪽에 떠있습니다.
left의 반대라고 생각하면 쉽게 이해할수 있습니다.
