[CSS 기초] 반응형

반응형 웹 📱💻

반응형 웹은 화면 크기에 따라 레이아웃이나 스타일이 자동으로 바뀌는 방식입니다.

같은 웹사이트라도
데스크탑에서는 넓은 화면에 맞게 가로로 배치하고,
태블릿이나 모바일에서는 좁은 화면에 맞게 세로로 재배치할 수 있습니다.

즉, 하나의 웹사이트를 여러 기기 화면에 맞게 자연스럽게 보이도록 만드는 작업입니다.

주요 포인트 Top3

01. 반응형이 왜 필요한가

예전에는 웹사이트를 주로 PC 화면 기준으로 만들었습니다.
하지만 지금은 모바일, 태블릿, 노트북, 대형 모니터처럼
사용 환경이 매우 다양합니다.

<div class="box">콘텐츠</div>
<div class="box">콘텐츠</div>
<div class="box">콘텐츠</div>

.box{
  width: 300px;
  height: 200px;
  background-color: lightgray;
  margin-bottom: 10px;
}

이처럼 고정된 크기만 사용하면
작은 화면에서는 요소가 넘치거나, 글자가 답답하게 보이거나,
가로 스크롤이 생길 수 있습니다.

그래서 화면 크기에 맞게
크기, 정렬 방향, 여백, 글자 크기 등을 조정하는 반응형 작업이 필요합니다.

02. 중단점(Breakpoint)

중단점은 화면 크기에 따라
스타일을 바꾸는 기준 지점입니다.

@media (max-width: 768px){
  .box{
    width: 100%;
  }
}

이 코드는 화면 너비가 768px 이하일 때
.box의 너비를 100%로 바꾸는 예시입니다.

보통 수업에서는 아래와 같이 많이 구분합니다.

모바일: ~ 767px
태블릿: 768px ~ 1023px
PC: 1024px 이상

이 값은 정답이라기보다 많이 사용하는 기준이며,
디자인 구조에 따라 조금씩 달라질 수 있습니다.

03. 반응형을 위해 사용하는 코드

반응형 작업은 미디어쿼리(@media) 를 사용합니다.
미디어쿼리는 “이 화면 크기일 때만 아래 CSS를 적용하겠다”는 의미입니다.

@media (max-width: 768px){
  .title{
    font-size: 20px;
  }
}

화면 너비가 768px 이하가 되면
.title의 글자 크기가 20px로 변경됩니다.

즉, 반응형은 HTML을 새로 만드는 것이 아니라
기존 구조에 조건부 CSS를 추가하는 방식입니다.

04. 미디어쿼리 작성법

미디어쿼리는 보통 max-width 또는 min-width를 사용합니다.

@media (max-width: 768px){
  .box{
    background-color: salmon;
  }
}

max-width는 “이 값 이하일 때”를 의미합니다.

@media (min-width: 1024px){
  .box{
    background-color: teal;
  }
}

min-width는 “이 값 이상일 때”를 의미합니다.

즉,
max-width는 큰 화면에서 작은 화면으로 내려오며 조건을 적용할 때 자주 사용하고,
min-width는 작은 화면을 기본으로 만든 뒤 큰 화면으로 확장할 때 자주 사용합니다.

05. 반응형 작성 규칙

반응형은 단순히 화면이 작아졌을 때만 생각하는 것이 아니라,
어떤 요소를 어떻게 바꿀지 먼저 정리하고 작성하는 것이 중요합니다.

.container{
  display: flex;
  gap: 20px;
}
 
.item{
  width: 33.33%;
}

@media (max-width: 768px){
  .container{
    flex-direction: column;
  }
 
  .item{
    width: 100%;
  }
}

이처럼 반응형에서는 주로 아래 내용을 수정합니다.

• 가로 정렬 → 세로 정렬
• 고정 너비 → 100% 너비
• 큰 글자 → 더 작은 글자
• 큰 여백 → 더 작은 여백

즉, 반응형의 핵심은
“화면이 작아질수록 보이기 편한 구조로 다시 정리하는 것”입니다.

06. 실제 사용 예시

카드 3개를 PC에서는 가로로 배치하고,
모바일에서는 세로로 배치하는 구조입니다.

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

.container{
  display: flex;
  gap: 20px;
}
 
.card{
  width: 33.33%;
  height: 200px;
  background-color: lightblue;
}
 
/* 태블릿 이하 */
@media (max-width: 1023px){
  .container{
    gap: 10px;
  }
 
  .card{
    height: 160px;
  }
}
 
/* 모바일 */
@media (max-width: 767px){
  .container{
    flex-direction: column;
  }
 
  .card{
    width: 100%;
    height: 140px;
  }
}

PC에서는 카드가 가로로 3개 배치되고,
화면이 줄어들면 간격과 높이가 조정되며,
모바일에서는 세로로 한 장씩 배치됩니다.

이처럼 반응형은 단순히 크기만 줄이는 것이 아니라
배치 방식 자체를 바꾸는 작업까지 포함합니다.

GOYO.’s Tip 💡

• 반응형은 보통 모바일 화면을 먼저 생각하고 점점 큰 화면으로 확장하는 방식으로 작성합니다
• 미디어쿼리 안에서는 꼭 필요한 속성만 다시 작성하는 것이 관리에 유리합니다

마무리 🎯

반응형 웹은 다양한 화면 크기에 맞게 레이아웃과 스타일을 조정하는 방식이며,
중단점을 정한 뒤 미디어쿼리로 필요한 속성만 변경하는 흐름으로 작성하는 것이 중요합니다.