웹 페이지 레이아웃 제대로 잡기

스타일은 멋지게 입혔는데, 요소들의 위치가 엉망이라면 사용자 입장에선 불편한 UI가 될 수밖에 없죠.

그래서 웹 개발에서 가장 중요하면서도 헷갈리는 부분이 바로 레이아웃 구성입니다.

 

이번 글에서는 실무에서도 가장 많이 사용되는 레이아웃 기법들을 정리해 볼게요.

---

✅ Flexbox로 요소를 유연하게 정렬해 보자

Flexbox는 일렬로 정렬되는 콘텐츠를 배치할 때 정말 유용해요.

특히 정중앙 정렬, 간격 조절, 반응형 레이아웃 등에 탁월하죠.

.container {
  display: flex;
  justify-content: center; /* 가로 정렬 */
  align-items: center;      /* 세로 정렬 */
  height: 100vh;
}

 

출처: https://developer.mozilla.org/ko/docs/Learn_web_development/Core/CSS_layout/Flexbox

📌 주요 속성 요약

속성	설명
flex-direction	주축 방향: row, column 등
justify-content	주축 정렬: center, space-between 등
align-items	교차축 정렬: stretch, center 등
gap	요소 간 여백

 

🧪 예제: 카드 3개를 가로로 정렬하기

<div class="card-wrapper">
  <div class="card">카드 1</div>
  <div class="card">카드 2</div>
  <div class="card">카드 3</div>
</div>

<style>
.card-wrapper {
  display: flex;
  gap: 20px;
  justify-content: space-around;
}
.card {
  background: #f1f1f1;
  padding: 20px;
  width: 150px;
  text-align: center;
}
</style>

 

---

✅ Grid로 격자형 레이아웃 만들기

Grid는 2차원 레이아웃을 다룰 수 있어서 갤러리, 게시판, 블로그 썸네일 목록 등에 딱이에요.

행과 열을 자유롭게 배치할 수 있고, 반응형 구현에도 강력합니다.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3등분 */
  gap: 16px;
}

출처: https://developer.mozilla.org/ko/docs/Learn_web_development/Core/CSS_layout/Grids

📌 자주 쓰는 속성 정리

속성	설명
grid-template-columns	열(가로) 크기 정의
grid-template-rows	행(세로) 크기 정의
gap	요소 사이 간격
grid-column, grid-row	특정 셀 병합 또는 위치 지정

 

🧪 예제: 2x3 갤러리 만들기

<div class="gallery">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

<style>
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.item {
  background: #ddd;
  padding: 30px;
  text-align: center;
}
</style>

---

✅ float과 clearfix는 왜 알아야 할까?

예전에는 요소를 옆으로 정렬할 때 float을 많이 썼어요.

지금은 거의 Flex나 Grid로 대체되긴 했지만, 레거시 프로젝트에서는 여전히 볼 수 있어요.

.left {
  float: left;
  width: 50%;
}
.right {
  float: right;
  width: 50%;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

clearfix를 안 쓰면 부모가 자식의 높이를 인식 못 해서 레이아웃이 깨질 수 있어요.

---

✅ 반응형 웹: 미디어 쿼리로 다양한 화면에 대응하자

요즘 웹사이트는 PC, 태블릿, 모바일 등 다양한 기기에서 보이기 때문에 반응형(Responsive Web)이 필수입니다.

 

미디어 쿼리는 화면 크기에 따라 다른 스타일을 적용할 수 있게 해주는 기능입니다.

모바일에서는 세로 정렬, 데스크톱에서는 가로 정렬 등 다양한 레이아웃을 하나의 CSS 파일로 처리할 수 있어요.

📌 미디어 쿼리 기본 구조

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

 

🧪 예제: 모바일에서 세로로 쌓이게 만들기

<div class="flexbox">
  <div>Box 1</div>
  <div>Box 2</div>
</div>

<style>
.flexbox {
  display: flex;
  gap: 10px;
}

@media screen and (max-width: 768px) {
  .flexbox {
    flex-direction: column;
  }
}
</style>

 

브라우저 창을 줄여보면, 가로로 정렬되던 요소가 세로로 쌓이게 됩니다.

---

✨ 마무리: 나에게 맞는 레이아웃 전략 찾기

정리하자면,

• 간단한 1차원 정렬 ➝ Flexbox
• 행과 열을 활용한 격자 배치 ➝ Grid
• 과거 방식/레거시 대응 ➝ float + clearfix
• 다양한 기기 대응 ➝ media query

 

레이아웃은 처음엔 어렵게 느껴지지만, 코드를 직접 작성해 보며 눈으로 확인하면 금방 익숙해져요.