CSS 편집하기 (부분)

== 반응형 웹 디자인 ==
반응형 웹 디자인(Responsive Web Design)은 화면 크기, 해상도, 기기 특성 등에 따라 웹 레이아웃이 유연하게 변하도록 설계하는 기법을 말한다. 이를 통해 하나의 웹 문서가 다양한 환경(모바일, 태블릿, 데스크톱, 대형 화면 등)에서 일관되게 보이면서도, 각 환경에 최적화된 사용자 경험을 제공할 수 있다.

=== 구성 방식 ===
반응형 웹 디자인에서는 주로 '''미디어 쿼리'''와 유동적인(Grid, Flex) 레이아웃을 조합한다. 레이아웃의 폭, 폰트 크기, 이미지 크기 등을 기기 환경에 맞추어 변경한다.

* '''Mobile-first''': 가장 작은 화면(모바일) 기준으로 스타일을 작성하고, 더 큰 화면에 대한 스타일을 확장해 나가는 방식
* '''Desktop-first''': 데스크톱 화면을 기준으로 작성 후, 작은 화면에 대해서는 추가적인 미디어 쿼리로 스타일을 재정의

=== 일반적인 브레이크포인트(화면 구간) ===
반응형을 구성할 때 자주 쓰이는 구간 예시는 아래와 같다. (프로젝트마다 달라질 수 있음)

* 최대 너비 480px ~ 600px 이하: 휴대전화
* 최대 너비 768px 이하: 태블릿 세로
* 최대 너비 1024px 이하: 태블릿 가로
* 최대 너비 1200px 이하: 작은 데스크톱
* 1200px 초과: 일반/대형 데스크톱

아래 예시처럼 여러 미디어 쿼리를 통해 화면 크기에 따라 다른 스타일을 지정할 수 있다.

<syntaxhighlight lang="css">
/* (1) 모바일용 기본 스타일 */
.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 10px;
}

/* (2) 중간 크기(태블릿) 이상 */
@media (min-width: 768px) {
  .container {
    max-width: 700px;
    padding: 20px;
  }
}

/* (3) 큰 화면(데스크톱) 이상 */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
    padding: 30px;
  }
}
</syntaxhighlight>

이처럼 반응형 웹 디자인에서는 '''유연한 레이아웃''', '''반응형 이미지''', '''미디어 쿼리''' 등을 결합하여, 다양한 기기 화면에서 콘텐츠가 적절히 표시되도록 한다.