Layout

여러 CSS 속성들을 사용하여 웹 페이지의 레이아웃을 구성할 수 있습니다. 이번 글에서는 웹 페이지의 레이아웃을 구성하는 데 유용한 CSS 속성들을 소개하고, 실전에서 활용할 수 있는 다양한 레이아웃 예제들을 다루겠습니다.

레이아웃 포맷

크게 두 가지 레이아웃 포맷이 있습니다.

header, content, footer로 구성된 헤더-콘텐츠-푸터 레이아웃 입니다. 여기서는 편의상 콘텐츠 레이아웃이라고 부르겠습니다.
content, footer로 구성된 콘텐츠-푸터 레이아웃 입니다. 여기서는 편의상 블랭크 레이아웃이라고 부르겠습니다.

이제 어떤 구조인지 눈으로 확인해보죠.

Header

Content

Footer

콘텐츠 레이아웃

Content

Footer

블랭크 레이아웃

레이아웃 포맷 설명

이제 각 레이아웃 포맷에 대해 자세히 설명해보겠습니다.

콘텐츠 레이아웃

콘텐츠 레이아웃은 헤더, 콘텐츠, 푸터로 구성되며, 각 영역은 다음과 같은 특징을 가집니다.

헤더(Header): 웹 페이지의 상단에 위치하며, 로고, 메뉴, 검색창 등의 요소를 포함합니다.
콘텐츠(Content): 웹 페이지의 주요 내용을 담고 있는 영역으로, 글, 이미지, 동영상 등의 콘텐츠를 표시합니다.
푸터(Footer): 웹 페이지의 하단에 위치하며, 저작권 정보, 연락처, 사이트 맵 등의 정보를 제공합니다.

일반적인 웹사이트의 레이아웃은 콘텐츠 레이아웃을 기본으로 하며, 헤더와 푸터를 포함하여 전체적인 구조를 구성합니다.

콘텐츠 레이아웃의 변형 중 하나로, 콘텐츠 영역에 사이드바를 추가한 사이드바 레이아웃도 있습니다.

블랭크 레이아웃

블랭크 레이아웃은 콘텐츠와 푸터로만 구성되며, 각 영역은 다음과 같은 특징을 가집니다.

콘텐츠(Content): 웹 페이지의 주요 내용을 담고 있는 영역으로, 글, 이미지, 동영상 등의 콘텐츠를 표시합니다.
푸터(Footer): 웹 페이지의 하단에 위치하며, 저작권 정보, 연락처, 사이트 맵 등의 정보를 제공합니다.

블랭크 레이아웃은 콘텐츠 레이아웃과 달리 헤더 영역이 없는 레이아웃으로, 간단한 로그인 페이지 등에서 사용됩니다.

레이아웃 구조 잡기

우선 레이아웃을 구성할 때, 시멘틱 마크업을 사용하여 각 영역을 구분하는 것이 중요합니다. 헤더 영역은 <header> 요소로, 콘텐츠 영역은 <main> 요소로, 푸터 영역은 <footer> 요소로 구성합니다.

이를 참고하여 다음과 같이 레이아웃을 구성할 수 있습니다.

html

<div class="container">
	<header>Header</header>
	<main>Content</main>
	<footer>Footer</footer>
</div>

혹은 다음과 같이 블랭크 레이아웃을 구성할 수도 있습니다.

html

<div class="container">
	<main>Content</main>
	<footer>Footer</footer>
</div>

위 예제에서는 레이아웃을 구성하는 컨테이너 요소인 <div> 요소에 container 클래스를 추가하고, 각 영역을 구분하기 위해 <header>, <main>, <footer> 요소를 사용했습니다. 하지만 꼭 컨테이너 요소를 사용할 필요는 없으며, 필요시 <body> 요소에 직접 구성해도 무방합니다.

CSS 레이아웃 구성

저는 레이아웃을 구성할 때, Flexbox 를 주로 활용합니다. Flexbox 는 요소의 크기와 위치를 유연하게 조절할 수 있는 CSS 레이아웃 모델로, 다양한 레이아웃을 쉽게 구현할 수 있습니다.

일반적인 콘텐츠 레이아웃을 구성하는 방법은 다음과 같습니다.

base.css

.container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
 
	width: 100dvw;
	height: 100dvh;
 
	overflow-x: hidden;
	overflow-y: scroll;
 
	--webkit-overflow-scrolling: touch;
 
	header {
		position: sticky;
		top: 0;
		z-index: 100;
	}
 
	header,
	footer {
		width: 100%;
	}
 
	> main {
		flex: 1;
 
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;
 
		border: none;
	}
}

이제 제가 작성한 CSS 코드를 하나씩 살펴보며, 각 속성이 어떤 역할을 하는지 알아보겠습니다.

컨테이너 내 요소 위치 지정

display: flex;: Flexbox 레이아웃을 사용합니다.
flex-direction: column;: 주축을 세로로 설정하여 세로 방향으로 요소를 배치합니다.
justify-content: space-between;: 요소 사이의 간격을 동일하게 설정합니다. (헤더와 푸터를 상단과 하단에 배치합니다.)

컨테이너 크기 설정

width: 100dvw;: 뷰포트 너비의 100%로 설정합니다.
height: 100dvh;: 뷰포트 높이의 100%로 설정합니다.

이떄, dvw 와 dvh 를 사용하는 이유는, 모바일 환경에서 주소창이나 상태바 등의 영역을 고려하여 뷰포트의 크기를 동적으로 조정하기 위함입니다.

컨테이너 스크롤 설정

overflow-x: hidden;: 가로 스크롤을 숨깁니다.
overflow-y: scroll;: 세로 스크롤을 표시합니다.
--webkit-overflow-scrolling: touch;: iOS 기기에서 부드러운 스크롤 효과를 적용합니다.

헤더 영역 설정

position: sticky;: 스크롤 시 상단에 고정됩니다.
top: 0;: 상단에 고정됩니다.
z-index: 100;: 다른 요소보다 위에 표시됩니다. (헤더가 다른 요소 위에 표시됩니다.)

position: sticky 를 사용하는 이유는, 기본적으로는 block 요소로써 문서 흐름에 따라 배치되지만, 특정 위치에 도달하면 고정되는 특성을 활용하기 위함입니다. 이를 위해 top 속성을 사용하여 상단에 고정되도록 설정하고, z-index 속성을 사용하여 다른 요소보다 위에 표시되도록 설정합니다.

헤더, 푸터 영역 크기 설정

width: 100%;: 너비를 100%로 설정합니다.

콘텐츠 영역 설정

flex: 1;: 콘텐츠 영역이 남은 공간을 모두 차지하도록 설정합니다.
display: flex;: Flexbox 레이아웃을 사용합니다.
flex-direction: column;: 주축을 세로로 설정하여 세로 방향으로 요소를 배치합니다.
align-items: center;: 요소를 가운데 정렬합니다.
justify-content: start;: 요소를 시작 지점에 배치합니다.

이렇게 설정하면, 콘텐츠 영역이 세로 방향으로 요소를 배치하며, 요소를 가운데 정렬하고, 시작 지점에 배치합니다. 또한 flex: 1 속성을 사용하여 콘텐츠 영역이 남은 공간을 모두 차지하도록 설정합니다. 아무리 콘텐츠가 적더라도, 콘텐츠 영역이 최소한의 높이를 유지하여, 푸터 영역이 항상 하단에 표시되도록 합니다.

마무리

이렇게 Flexbox 를 사용하여 웹 페이지의 레이아웃을 구성하는 방법을 알아보았습니다. 위 CSS 는 콘텐츠 레이아웃과 블랭크 레이아웃 모두 적용할 수 있으며, 필요에 따라 속성을 추가하거나 수정하여 다양한 레이아웃을 구성할 수 있습니다. 앞으로 웹 페이지를 구성할 때, Flexbox 를 활용하여 다양한 레이아웃을 구성해보시길 바랍니다.

Flexbox Docker