CSS의 레이아웃

CSS 레이아웃

보통 무언가를 만든다거나 계획을 세울때 우리는 기본틀부터 짜기 시작합니다.
이곳에는 이렇게하고 저기에는 저렇게, 저곳은 또 이렇게해야지 구성을 짜는것을 CSS에서는 layout이라 합니다.

즉, layout은 내가 원하는곳에 블록의 요소들을 배치하는 것입니다.

배치방법으로는 display 사용하는 방법, table태그 를 사용하는 방법, float 속성을 사용하는 방법 등이 있습니다.
table태그를 사용하거나 float을 쓰는것은 과거에 많이 사용했으나 요즘에는 display:flex를 많이 쓴다고 합니다.

1.Position의 property(속성)

CSS의 position은 웹문서 안의 요소들을 어떻게 배치하여 나타낼지를 정하는 속성입니다.
position속성을 사용하면, html 문서와 상관없이 원하는 위치에 배치할 수 있습니다.

position에는 static, relative, absolute, fixed 4가지의 속성이 있습니다.

1. Static

static은 기본값으로 아무런 값을주지 않아 요소를 문서 흐름에 따라 배치합니다.
top ,right, bottom, left, z-index 속성이 아무런 영향을 주지 않기 때문에 거의 쓰지 않습니다.

2. relative

요소를 일반적인 문서 흐름에 따라 배치하고(static), 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.
오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.

3. absolute

absolute는 브라우저가 문서의 흐름과 상관없이 left, right, top, bottom 속성값을 이용하여 요소를 위치시키는 속성값입니다.
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다.
대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다.
단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다.

4.fixed

fixed는 absolute 속성값과 마찬가지로 문서의 흐름과 상관없이 위치를 좌표로 결정합니다.
하지만 position:relative인 제일 가까운 부모 혹은 조상 요소가 아닌 브라우저 창이 기준이 됩니다.
떄문에 브라우저 창을 어디로 스크롤 하더라도 계속 고정되어 표시되게 됩니다.
(기준점은 브라우저 왼쪽 위 입니다.)

5. sticky

sticky는 기준점을 이상을 넘지 않을 때는 relative 포지션처럼 동작하다 그 이상을 넘게 될 시에는 fixed처럼 동작합니다.
스크롤이 scroll 박스 밖으로 벗어나게 되는 경우에는 그 위치에서 정지하게 됩니다.
scroll 박스는 overflow 속성이 존재하는 부모요소를 뜻합니다.
여기서 부모요소가 overflow를 특별히 명시하지 않았다면 부모요소가 바로 scroll 박스가 됩니다.
만일, scroll 박스 사이에 overflow: hidden 이 적용되있는 요소가 있을 경우 sticky 속성이 제대로 동작하지 않으므로 주의해야 합니다.

fixed 와 sticky

fixed 와 sticky 둘다 위치를 고정시키는데 fixed 요소는 스크롤를 내리면 브라우저 특정 위치에 그대로 있습니다.
반면에 sticky요소는 특정 시점에서 fixed 요소처럼 행동하다 자신의 부모 요소와 만나게 되면 멈추게 됩니다.
sticky 요소가 중간에 멈추는 기준은 부모 요소의 크기 내에서 멈추게 됩니다. sticky 요소는 부모 요소의 크기 밖으로 나갈 수 없습니다.
만약 sticky 요소가 모든 조건을 충족했는 데도 불구하고 제대로 동작하지 않는다면 부모 요소의 크기가 어떤지를 먼저 체크해봐야 합니다.

2. Display의 property(속성)

display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나입니다.

이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다.

대부분의 HTML 요소는 display 속성의 기본값으로 inline과 block 두 가지 값 중 하나의 값을 가집니다.

1. inline

inline요소는 불바꿈 없이 바로 옆에 생성됩며, 화면에 표시되는 영역만큼만 차지합니다.
따라서 나머지 공간에 다른 요소가 올 수 있습니다.
inline 요소 안에 inline 요소는 포함이되나 block 요소는 포함할 수 없습니다.

2. block

block 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄(100%의 넓이)을 차지합니다.
따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다.
width, margin, padding을 이용하여 크기나 위치를 지정하려면 block 요소여야 합니다.
display: block;으로 지정하면 해당 요소를 block으로 지정합니다.
block 요소가 다른 block 또는 inline 요소를 감쌀 수 있습니다.

3. inline-block

인라인과 블록 이외에도 display 속성에 자주 사용되는 속성값에는 인라인-블록(inline-block)이 있습니다.
display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작합니다.
하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작합니다.
inline요소와의 차이점은 너비와 높이를 설정할 수 있습으며 블록 요소처럼 margin이나 padding을 이용하여 여백을 지정할 수도 있다는 점입니다.