CSS Layout에 대하여...

박희주·2022년 5월 24일

About CSS Layout

HTML내 컨텐츠들은 좌에서 우, 상에서 하로 서로 겹침없이 순서대로 배치되는 것이 기본이다. 하지만 레이아웃을 구성하기 시작하면서 필요 시 특정 위치에 고정을 하거나(창 크기가 변하거나 스크롤을 할 때도) 레이아웃이 변경 시 여러 태그들을 묶어 일괄 변경하는 기능이 필요하다.

기본적으로 position 속성이나 inline, inline-block, block을 활용해 레이아웃을 정리해 스타일링을 할 수 있고 좀 더 깊게 들어가면 flexbox나 grid, float을 활용 할 수 있다.

1. Position

Position 속성은 아래의 값을 선택해 지정이 가능하다!

static : 요소를 일반적인 문서의 흐름에 따라 배치(기본값)
relative : 요소를 일반적인 문서 흐름에 따라 배치하고, 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용이 가능하다. 오프셋은 다른 요소에는 영향을 주지 않아 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다.
absolute : 요소를 일반적인 문서 흐름에서 제거하고 페이지 레이아웃에 공간도 배정하지 않는다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치를 한다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼는다. 최종 위치는 top, right, bottom, left값이 지정한다.
fixed : 요소를 일반적인 문서 흐름에서 제거하고 페이지 레이아웃에 공간도 배정하지 않는다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다. 단, 요소의 조상 중 하나가 transform, perspective, filter속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다, 최종위치는 top, right, bottom, left값이 지정한다.
sticky : 요소를 일반적인 문서 흐름에 따라 배치하고 테이블 관련 요소를 포함해 가장 가까운 스크롤되는 조상과 표 관련 요소를 포함한 컨테이닝 블록을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다. 오프셋은 다른 요소에는 영향을 주지 않으며 이 값은 항상 새로운 stacking context를 생성하고 sticky요소는 스크롤 동작이 존재하는 가장 가까운 조상에 달라붙으며 사실 그 조상은 스크롤 불가하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 "sticky"한 동작을 보이지 않는다.

2. block, inline, inline-block

2-1. block

웹페이지의 블록은 HTML 요소로 새 줄에 표시가 된다.
위 아래에서 서로 쌓이는 형식으로 나타나고 사용 가능한 최대치의 폭을 차지하게 된다.
display속성을 사용하면 요소가 inline으로 표시되는지 block으로 표시되는지 변경할 수 있으며, block역시 포지셔닝 체계의 영향과 position속성 사용의 영향을 받는다.
block타입의 태그
-> <p>, <div>, <form>등...

2-2. inline

inline요소들은 일반적인 문서에서의 텍스트 흐름과 동일하게 동작하며 요소 내부 컨텐츠의 크기만큼만 폭을 차지한다. inline요소들은 다른 inline요소들을 자식으로 포함할 수 있으나 block요소는 자식으로 품을 수 없다.
inline타입의 태그
-> <span>, <a>, <img>, <strong>등...