CSS 레이아웃 기술은 저마다 용도가 있고, 장단점이 있으며, 어떤 기술도 독립적인 용도를 갖추도록 설계되지 않았다. 각 메서드가 어떤 용도로 마련된 것인지 이해한다면 해당 작업에 가장 적합한 도구가 어떤 것인지 파악하는데 유리해진다!

보통 흐름(normal flow)

먼저 내가 페이지 레이아웃을 1도 안건드렸을 때, 브라우저가 기본값으로 HTML 페이지를 배치하는 방법을 보통 흐름이라고 한다.

보시다시피 소스 코드 위에서 아래로 HTML 요소가 그대로 표시된다. 요소 집합이 상대 요소 바로 아래 나타나는 것을 block 요소라고 한다. (반대 개념은 inline 요소)

CSS를 사용해서 레이아웃을 만들 경우 이 보통 흐름에서 벗어나도록 하는 것이다. 그러니 잘 구조화된 HTML 문서에서 시작해서 CSS 기술을 잘 써서 코드랑 싸우는게 아니라 협력해서 작업할 수 있도록 만들어보자...

display

디스플레이 속성은 요소가 표시되는 기본값 변경을 허용한다. 모든 요소는 고유의 display 속성값을 가지고 있다. 대표적으로 p 태그는 block 요소이고, span 태그는 inline 요소이다.

당신은 전지전능하기 때문에 어느 요소라도 display 속성값을 변경할 수 있다. 한 항목을 block에서 inline으로 변경하거나, 그 반대로도 바꿀 수 있다. 요소가 보여지는 방식을 변경할 수 있다는 의미다!

근데 저 두개만 가지고 웹사이트 절대 못만들꺼다. 그래서 확대된 형태의 레이아웃 메서드가 2개 있다. 바로바로 display: flex와 display: gird이다.

Flexbox

flexbox는 일차원 상에 사물을 배치할 경우 써먹으면 편하다. 내가 진열하고 싶은 요소들의 부모 요소에 display: flex를 적용하고나면 그 자식들이 플렉스 항목이 된다. 이해를 돕기 위해 예시를 보자.

이렇게 부모 요소 wrapper에 flex를 부여하면 세개 항목이 자체적으로 단으로 배열된다. 왜나하면 이들이 가변 항목이 되었을 뿐만 아니라 flexbox가 그들 요소에 부여한 일부 초기값을 사용했기 때문이다. 그 중 하나가 바로 flex-direction: row인데 우리가 지정하지는 않아도 저 속성은 기본값이므로 요소들이 행으로 표시됐다.

더 놀라운건 위치를 변경하는 것 외에도 항목을 변형시킬수도 있는데, 위의 예제에서는 박스 오른편에 빈 공간이 있지 않는가? 이걸 빈공간 없이 다 채워버릴 수도 있다.

간단한 예로 자식 항목 전체에 대한 flex 속성에 대해 속성값 1을 부여한다면, 컨테이너 말미에 공간을 남기지 않고 항목 무리 전체가 확대되거나 채워지도록 만들어 버린다! 신기하지 않은가? 그 요소가 뭐가됐건 동일한 공간 점유를 위해 크기가 강제로 조종된다!

그리드 레이아웃

flexbox가 일차원 레이아웃을 위해 마련됐다면, 그리드 레이아웃은 이차원 레이아웃을 위해 마련됐다!

display: gird로 그리드 레이아웃으로 전환할 수 있다.

gird-template-rows와 gird-template-columns라는 개별 속성을 이용해서 부모 요소를 상대로 행과 열 궤도를 정의한다. 아래의 예제는 1fr 값이 지정된 3열과 100px이 지정된 2행을 정의했다. 쉽게 설명하자면 가로 길이는 1:1:1로 3열을, 세로 길이는 100px로 2행을 만들라는 얘기다.

항목 무리를 이렇게 자동 배치하는게 아니라 원하는대로 위치도 지정해줄 수 있다.

어떤가? 신기하지 않는가? 너무 편리하다!!

중요한 레이아웃 요소 두개는 배웠고 이제 나머지 부분은 페이지의 주요 레이아웃 구조로 보기엔 덜 중요하지만 특정 작업을 수행하는 데 여전히 도움이 될 수 있는 다른 레이아웃 방법들이 있다.

Floats

요소를 부동시키면 요소는 왼쪽 또는 오른쪽으로 이동하고 보통 흐름(normal flow)에서 벗어나게되며 주변 콘텐츠는 부유된 항목 주위로 떠다닌다.

이 float 속성은 네 가지 값을 가진다.

값	설명
left	요소를 왼쪽에 띄운다.
right	요소를 오른쪽에 띄운다.
none	부동 여부 지정 X (기본값)
inherit	부동 속성의 값이 요소의 부모 요소에서 상속된다.

원래라면 박스 아래에 와야할 글자들이 박스 주변을 감싸고 있는 형태로 변했다!

Position

포지셔닝을 통해 보통 흐름(normal flow)속에 있는 요소를 기존의 배치 위치에서 벗어나 다른 위치로 이동시킬 수 있다. 포지셔닝은 보통 웹페이지의 큰 레이아웃을 조정할 때 쓰는게 아닌, 특정 항목을 미세하게 조정할 때 보통 많이 사용한다.

우리가 알야아 할 다섯 가지 포지셔닝 유형은 아래와 같다.

유형	설명
정적 포지셔닝	레이아웃을 특별히 건들지 않겠다라는 의미
상대 포지셔닝	보통 흐름(normal flow)를 따라가며, 자기 자신의 위치를 기준으로 움직인다.
절대 포지셔닝	보통 흐름(normal flow)를 무시하며, 상대 포지셔닝을 가지고 있는 부모 요소를 기준으로 움직인다. (없다면 body를 기준으로 움직인다.)
고정 포지셔닝	다른 요소가 아닌 브라우저 뷰포트 기준으로 움직인다. 요소를 특정한 위치에 고정시키고 싶을 때 유용하게 쓰인다.
스티키 포지셔닝	평소에는 정적 포지셔닝을 가지고 있다가 설정한 위치에 다다르면 고정 포지셔닝을 가지는 새로운 포지셔닝 메서드이다.

정적 포지셔닝

상대 포지셔닝

위의 예제를 보면 두 번째 블럭의 위치가 top: 30px 와 left 30px 때문에 자기 자신의 기존 위치에서 아래로 30px, 오른쪽으로 30px 이동한 것을 볼 수 있다. 그 방향으로 가는게 아니라, 지정한 방향으로 부터 밀린다는 개념으로 생각하면 편할 것 같다.

절대 포지셔닝

절대 포지셔닝은 보통 흐름(normal flow)에서 요소를 완전히 제거하고 부모 요소의 가장자리로부터 움직인다. 여기서 부모 요소는 상대 포지셔닝이어야 하며, 만약 없다면 body를 부모 요소로 삼는다.

위의 예제는 기존의 보통 흐름을 무시한 채 자신의 부모 요소(body)의 좌측 최상단을 기준으로 위에서부터 30px, 왼쪽에서부터 30px만큼 움직였다.

고정 포지셔닝

고정 포지셔닝도 절대 포지셔닝과 같은 방식으로 보통 흐름을 무시한다. 그러나, 다른 점은 부모 요소가 기준이 아닌 뷰포트(화면)을 기준으로 적용된다. 항상 스크린을 기준으로 움직이기 때문에 페이지를 스크롤 해도 고정이 되는 것이다!

흡착 포지셔닝

흡착 포지셔닝은 정적 포지셔닝과 고정 포지셔닝을 합친 것으로 보면 된다. 우리 지정해둔 위치까지 도달하기 전까지는 보통 흐름으로 있다가, 지점에 도달하면 position: fixed가 적용된 것처럼 "철썩" 달라 붙게 된다. 아래의 예제를 참고하자.

테이블 레이아웃

HTML 테이블은 표로 나타낸 데이터를 표시하기에는 무난했다. 그러나 웹 개발자들은 머리글, 바닥글, 서로 다른 단 등을 여러가지 테이블 행과 열에 집어넣어 전체 레이아웃을 짜는데 테이블을 사용하기도 했다.

다단 레이아웃

다단 레이아웃은 텍스트가 신문지상에 나열되는 방식과 비슷하게 내용을 단 형태로 레이아웃할 수 있는 방법을 제공한다.

한 블록을 다단 컨테이너 속으로 들여넣으려면 column-count 속성을 사용하여 브라우저에게 우리가 몇 단으로 나누길 원하는지 밝히거나 column-width 속성을 사용하여 브라우저에게 몇 단이 됐건 최소 해당 너비만한 단으로 컨테이너를 채우라고 말하면 된다.

마무리하며

CSS 레이아웃은 파면 팔수록 정말 많이 있는 것 같고 연구를 많이해야 할 것 같다. 그래서 다음 글들은 위에서 다뤘던 레이아웃들을 개별적으로 하나씩 웹문서를 참고하며 정리해볼 생각이다!