CSS 레이아웃 기본기 다지기

미국의 잡지 ‘뉴요커’의 일러스트 작가인 크리스토프 니만은 잡지가 고객에게 재공하는 가치는 정보만이 아니라고 주장합니다. 본인이 일러스트레이터인 만큼 광고와 일러스트 역시 고객에게 제공되는 가치라고 주장하죠. 그런데 한 가지를 더 덧붙였습니다. 바로 정보를 이해하기 쉽게 잘 배치하고 정돈하는 ‘레이아웃’입니다. 니만은 정해진 프레임에 신문, 책 보다 자유롭게 정보를 배치할 수 있는 레이아웃의 힘이 잡지가 가진 독특한 매력이라고 말합니다.

레이아웃의 중요성은 잡지만에 국한되지 않죠. 웹 페이지, 모바일의 화면을 구성하는 레이아웃은 잡지의 자유로움에 더해서 역동성까지 느낄 수 있습니다. 오늘 하게 될 이야기는 이 중요한 레이아웃을 구성하는 CSS의 기초적인 틀을 잡아보려고 합니다. 본론으로 들어가기 전에, 우리가 구성하는 레이아웃이 그 내용물 만큼 중요하다는 사실을 꼭 기억해주셨으면 하는 바램으로 니만의 이야기를 넣어봤습니다.

그럼, 시작하겠습니다.

1. Position

CSS 로 웹의 레이아웃을 구성하는 과정을 살펴볼까요? 이를 쉽게 알아보기 위해 상술했던 잡지의 레이아웃 구성을 알아보겠습니다. 먼저 기자가 기사를 제공하죠, 다음으로 기사가 들어가야하는 페이지의 레이아웃이 구성됩니다(이 과정은 기사 작성 전, 후 유동적으로 이뤄지는 경우가 대부분이죠). 최종적으로 레이아웃에 맞춰 기사를 조금 다듬거나 내용 전반 분위기에 맞게 레이아웃을 수정합니다. 가장 중요한 과정은 기사가 일정한 위치에 배열되는 과정이 레이아웃의 구성인 것이죠. 웹 페이지도 똑같습니다. HTML이 우리에게 기자의 역할을 합니다. 그들은 일정한 정보가 담긴 내용물을 주죠. 우리는 편집자, 혹은 디자이너가 되는 것입니다. HTML의 정보가 더 매력적이고 효과적으로 보여지도록 일정한 위치에 배열하는 것입니다.

여기에서 배열에 주목해야 합니다. FLEX, GRID 등등 레이아웃을 위한 새롭고 섹시한 도구들이 등장하지만, 기본적으로 레이아웃은 배열입니다. 이 때문에 Position의 개념만 알더라도 기초적인 구성은 가능합니다. 앞서 Position에 대한 포스트가 있기 때문에 세부적인 정보를 확인하고 싶으신 분들은 하단의 링크를 참조해주시길 바랍니다.

https://tec-motive.github.io/css/CSS_position/

기초적인 Position개념은 총 4가지 입니다. 이미 포스팅 한 만큼 중요한 부분만 간략히 알아보고 넘어가겠습니다.

• Static : position의 디폴트 값입니다. 말 그대로 정적인 배치를 나타냅니다. 이동이나, 고정은 불가능하죠.
• Relative : 본격적으로 배열을 할 수 있는 단계입니다. 상대적이라는 말 그대로 제공되는 값의 상대적인 위치에 맞게 이동합니다.
• Absolute : 절대적이라는 말 답게 본인의 절대적인 위치를 가집니다. 다만 이 절대성은 static 포지션의 부모들에 대해서만 발휘됩니다. 부모 태그가 Relative를 가질 경우 그 기준에서 절대적 위치로 이동이 가능하죠.
• Fixed : 화면상의 어떠한 부모 태그의 영향도 받지 않고 일정한 위치에 고정시키는 기능을 합니다. 주로 해더에 많이 이용되죠.

포지션은 이 정도로 마무리하겠습니다. 앞서 언급했듯이 중요한 개념이기 때문에 자세한 내용을 원하시면 상단 링크를 참고해주세요.

2. 블록, 인라인, 인라인 블록

위의 3가지 개념은 디스플레이의 기본 중의 기본입니다. 오늘은 기본기를 다지는 시간인 만큼 디스플레이는 이들만 다루도록 하겠습니다.

1. block

블록은 한 공간 전체(웹에서는 수평의 한 행을 의미합니다)를 사용합니다. 즉 너비가 100%가 되는 것이죠. Block level element의 경우 같은 행에 다른 요소들이 들어올 수 없습니다.

2. Inline

인라인은 블록과 다르게 크기가 허용한다면 다른 요소들과 함께 존재하는 것도 가능합니다. 비교하자면 <p>의 경우 블록 요소이기 때문에 <p>가 2개 연속으로 있을 경우 자동으로 행 전환이 이뤄집니다. 그러나 의 경우 inline 요소입니다. 때문에 연속된 이 오더라도 크기만 허락한다면 같은 행에 위치하는게 허용됩니다.

3. Inline-block

이 요소가 조금은 햇갈릴 수 있습니다. 쉽게 말하면 블록 모양의 inline 요소라고 보시면 됩니다. 인라인이 앞에 나오기 때문에 이 요소는 인라인입니다. 다만, 구성물이 마치 한 블록들처럼 각각의 width와 heigth를 통해 일정 공간을 차지하는게 가능합니다. 인라인에서는 이 것은 불가능하죠. 우리가 자주 만나는

3. Float

레이아웃 기본기의 마무리는 Float으로 해볼까 합니다. 사실 더 이상 Float은 잘 사용되지 않습니다. flex를 넘어 grid라는 개념까지 등장하며 레이아웃을 표현하는 자유도는 폭발적으로 향상되었습니다. 그러나 과거에는 float을 통해 배치했기 때문에 기본적으로 알아두어야 하는 개념이죠.

Float은 떠다닌다는 이름에 맞게 블록이나 요소가 좌, 우, 혹은 none값에 따라 배치를 바꿔줍니다. 가장 대표적으로 많이 사용되는 상황은 두 블럭을 나눠 공간을 표현하고 싶을 때 한 블럭에 float: left 값을 주면 그 블럭은 왼쪽으로 배열이 됩니다.

다만 현재 많이 쓰이지 않는 이유는 이를 제어하기 위해 새로 나오는 블럭에는 clear 값을 설정하거나 이미지를 float 시킬 경우 overflow 등 조절해야 하는 요소가 많아져서 지금은 다른 방법을 택하고 있습니다.

https://learnlayout.com/float.html

상단의 링크는 float의 활용과 이를 제어하기 위한 방법들을 정리해 두었습니다. 비록 지금은 사용되지 않지만, 과거에 제작된 사이트의 경우 float가 많이 쓰였기 때문에 과거의 레이아웃을 이해하기 위해선 필수적으로 숙지해야 하는 개념입니다.

이렇게 오늘의 CSS 레이아웃 기본기 수업은 마치겠습니다. 다루지 못했던 레이아웃의 현대적 도구들 역시 시간날 때 다루도록 하겠습니다. 감사합니다!