프로그래밍/CSS

[CSS 수업] 7강 - 미디어 쿼리(반응형 웹 디자인)

그레이해커 월횽 2024. 5. 17. 06:30

CSS 수업 7강 - 미디어 쿼리(반응형 웹 디자인)

안녕하세요! 그레이해커 월횽입니다. 반응형 웹 디자인은 모바일 기기부터 데스크톱 화면까지 다양한 디바이스에서 웹 페이지가 최적으로 표시되도록 하는 기술입니다.

이 기술은 사용자 경험을 향상시키고 검색 엔진 최적화(SEO)에도 긍정적인 영향을 줍니다. 이번 강의에서는 CSS 미디어 쿼리를 활용하여 반응형 웹 디자인을 구현하는 방법을 알아보겠습니다.

CSS 미디어 쿼리란?

미디어 쿼리는 브라우저의 너비, 높이, 방향 등 조건에 따라 다른 CSS 스타일을 적용하는 기능입니다. 이를 활용하면 화면 크기에 따라 레이아웃과 폰트 크기 등을 다르게 지정할 수 있습니다.

1. 데스크톱 화면:

@media only screen and (min-width: 1025px) {
  body {
    font-size: 18px;
  }
}

2. 태블릿 화면:

@media only screen and (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

3. 모바일 화면:

@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

위 예제는 디바이스 크기에 따라 글꼴 크기를 조절하는 방식입니다. 이렇게 미디어 쿼리를 사용하면 모바일, 태블릿, 데스크톱 각각에 최적화된 웹 페이지를 만들 수 있습니다.

반응형 웹 디자인은 단순히 화면에 맞추는 것이 아닌, 콘텐츠 접근성과 SEO 가시성을 높이는 전략입니다. 모든 웹 개발자에게 필수적인 개념이니 꼭 익혀두세요!

월횽

그레이해커 월횽의 코딩 기록