CSS - 레이아웃: 초보자를 위한 종합 가이드

사전 요구사항

CSS 레이아웃의 흥미로운 세계로 뛰어들기 전에, 우리가 모두 동일한 페이지에 있다고 확신해둘게요. 이 튜토리얼을 최대한 활용하기 위해서는 HTML과 CSS에 대한 기본 이해가 필요합니다. 전문가가 아니라도 걱정 말아요 - 우리는 단계별로 설명할게요!

CSS 레이아웃 - 정상 흐름

기본적인 것으로 시작해보겠습니다. CSS에서 정상 흐름은 요소들이 웹 페이지에 어떻게 표시되는 기본 설정입니다. 책에서 말이 흐르는 것처럼 - 왼쪽에서 오른쪽으로, 위에서 아래로입니다.

다음은 간단한 예제입니다:

<div>
<p>이것은 문단입니다.</p>
<p>이것은 다른 문단입니다.</p>
</div>

div {
width: 300px;
border: 1px solid black;
}

이 예제에서, 문단들은 div 내부에서 수직으로 쌓입니다. 하나씩 뒤이어서요. 이것이 정상 흐름의 작동입니다!

CSS 레이아웃 - Flexbox

이제 Flexbox로 CSS 근육을 펼쳐보겠습니다! Flexbox는 유연한 레이아웃을 만드는 마법의 지팡이입니다. 특히 요소를 컨테이너 내에서 정렬하는 데 유용합니다.

Flexbox의 맛을 보세요:

<div class="container">
<div class="item">아이템 1</div>
<div class="item">아이템 2</div>
<div class="item">아이템 3</div>
</div>

.container {
display: flex;
justify-content: space-between;
}

.item {
width: 100px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
}

이 예제에서, 우리는 세 개의 flex 아이템을 가진 flex 컨테이너를 만들었습니다. justify-content: space-between; 속성은 아이템을 컨테이너에 균일하게 분산시킵니다. 멋지죠?

CSS 레이아웃 - 그리드

그리드 레이아웃은 Flexbox의 더 구조화된 사촌입니다. 복잡한 이차원 레이아웃을 만드는 데 완벽합니다.

그리드를 써보겠습니다:

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.grid-item {
background-color: #2ecc71;
color: white;
padding: 20px;
text-align: center;
}

이것은 세 개의 동일한 너비의 칼럼을 가진 그리드를 만듭니다. 아이템 사이에 10px의 간격이 있습니다. 마법 같죠?

CSS 레이아웃 -浮动

浮动은 CSS 레이아웃의 오래된 cool kids입니다. 그들이 예전만큼 트렌디하지는 않지만, 특정 상황에서 여전히 유용합니다.

浮动의 예제를 보겠습니다:

<div class="container">
<img src="cat.jpg" alt="귀여운 고양이" class="float-left">
<p>이 텍스트는浮动된 이미지 주위로 감싸입니다.</p>
</div>

.float-left {
float: left;
margin-right: 10px;
}

이렇게 하면 이미지가 왼쪽으로浮动되고, 텍스트는 그 주위로 감싸입니다. 이미지가 텍스트의 바다에서 수영하는 것처럼 보입니다!

CSS 레이아웃 - 위치 지정

CSS에서 위치 지정은 좌표 게임과 같습니다. 요소를 페이지의 정확한 위치에 배치할 수 있습니다.

어떤 것을 위치 지정해보겠습니다:

<div class="container">
<div class="box">저는 위치 지정되었습니다!</div>
</div>

.container {
position: relative;
height: 200px;
border: 1px solid black;
}

.box {
position: absolute;
top: 50px;
left: 50px;
background-color: #e74c3c;
color: white;
padding: 10px;
}

이렇게 하면 박스가 가장 가까운 위치 지정된 조상(이 경우, 컨테이너)에서 50px 위와 왼쪽에 위치 지정됩니다.

CSS 레이아웃 - 다중 칼럼 레이아웃

다중 칼럼 레이아웃은 신문 스타일의 칼럼으로 콘텐츠를 나누는 것입니다. 더 넓은 화면에서 가독성을 높이는 데 좋습니다.

이렇게 작동합니다:

<div class="multi-column">
<p>이것은 여러 칼럼으로 나눌 긴 텍스트 문단입니다...</p>
</div>

.multi-column {
column-count: 3;
column-gap: 20px;
}

이것은 콘텐츠를 세 개의 칼럼으로 나눕니다. 각 칼럼 사이에 20px의 간격이 있습니다. 즉시 신문 레이아웃이 됩니다!

CSS 레이아웃 - 반응형 디자인

반응형 디자인은 웹사이트가 터치폰에서 거대한 데스크톱 모니터까지 어떤 장치에서도 잘 보이도록 하는 것입니다.

간단한 반응형 디자인 예제입니다:

<div class="container">
<div class="box">반응형 박스</div>
</div>

.container {
width: 80%;
margin: 0 auto;
}

.box {
width: 100%;
padding: 20px;
background-color: #9b59b6;
color: white;
}

@media (min-width: 600px) {
.box {
width: 50%;
}
}

이렇게 하면 작은 화면에서 박스가 전체 너비로 표시되고, 600px 넓이 이상의 화면에서는 반 너비로 표시됩니다. 레이아웃이 요가를 하듯이 다양한 화면 크기에 맞춰 변합니다!

CSS 레이아웃 - 미디어 쿼리

미디어 쿼리는 반응형 디자인의 비밀 재료입니다. 장치의 특성에 따라 다른 스타일을 적용할 수 있습니다.

예제를 보겠습니다:

body {
background-color: #3498db;
color: white;
}

@media (max-width: 600px) {
body {
background-color: #e74c3c;
}
}

@media (min-width: 601px) and (max-width: 1200px) {
body {
background-color: #2ecc71;
}
}

이것은 화면 너비에 따라 배경 색상을 변경합니다. 웹사이트가 다양한 상황에 맞춰 옷을 갈아입는 것처럼 보입니다!

여기서 다루었던 레이아웃 방법을 요약한 표입니다:

레이아웃 방법	최적 사용 사례	중요 속성
정상 흐름	기본 레이아웃	N/A
Flexbox	일차원 레이아웃	display: flex, justify-content, align-items
그리드	이차원 레이아웃	display: grid, grid-template-columns, grid-template-rows
浮动	텍스트 주위의 이미지 감싸기	float, clear
위치 지정	요소의 정확한 배치	position, top, right, bottom, left
다중 칼럼	신문 스타일의 텍스트 칼럼	column-count, column-gap
반응형 디자인	다양한 화면 크기에 맞추기	@media 쿼리, 백분비 너비
미디어 쿼리	장치 특성에 따른 스타일 적용	@media

CSS 레이아웃은 요리와 같아요 - 연습을 통해 마스터하면 놀라운 것을 만들 수 있습니다. 그러니 두려워 말고 실험하고, 재미를 느껴보세요!

Credits: Image by storyset