[HTML/CSS] 기본 레이아웃

웹페이지에는 여러가지 구성요소들이 존재합니다. 이 구성요소들을 적절히 배치하는 것이 레이아웃입니다.

좋은 레이아웃을 가진 웹페이지는 미학적으로 아름다울 뿐더러, 사용자에게 정보를 명확하게 전달하기 때문에 레이아웃은 매우 중요하다고 볼 수 있습니다. 

HTML은 여러 시맨틱 태그(semantic tag)들로 웹페이지의 특정 부분들을 정의하고 있습니다.

<header>	문서나 섹션의 가장 첫 부분으로, 헤더를 정의한다.
<nav>	문서의 다른 부분으로 이동할 수 있는 링크들의 집합이다.
<section>	구역화된 부분을 나타낸다.
<article>	문서와 독립적인 글 부분을 나타낸다.
<aside>	페이지 부분 이외의 부분을 나타낸다.
<footer>	헤더와 반대로 문서와 섹션의 가장 마지막 부분으로, 푸터를 정의한다.

 

레이아웃을 구성하는데에는 약 4가지 방법이 있습니다.

1. CSS 프레임워크 사용하기

웹페이지의 레이아웃을 빠르게 생성하기 위해서는 기존에 만들어져 있는 틀, 프레임워크(Framework)를 사용하는 방법이 있습니다. 라이브러리와 비슷하게 이미 작성된 코드 / 루틴 / 데이터를 재활용하는 것입니다. CSS 프레임워크의 대표적인 예시로는 Bootstrap, Foundation, Bulma, Pure 등이 있습니다.

2. CSS float 속성 사용하기

CSS에서 float 속성을 이용하면 쉽게 웹페이지를 구성할 수 있습니다. 단, 쉬운 만큼 기본적인 조작만 가능하고 자유롭게 웹페이지를 구성하는데에는 한계가 있다는 단점이 있습니다. 

3. CSS flexbox 사용하기

flexbox의 여러 속성을 사용하면 높은 자유도로 웹페이지를 제작할 수 있습니다. flexbox의 요소들은 다양한 스크린 사이즈와 디스플레이에도 맞춰진다는 장점이 있습니다.

4. CSS grid 사용하기

grid는 그래프와 비슷한 레이아웃 형식을 사용합니다. 직관적인 격자 형식을 통해 다른 복잡한 속성들을 사용하지 않으면서도 웹페이지의 구성요소들을 원하는 위치에 배치할 수 있다는 것이 장점입니다.