본문으로 건너뛰기
실습하기

미디어 쿼리 실습

웹사이트는 다양한 크기와 해상도를 가진 기기로 방문합니다. 여러 기기에 대응하기 위해 웹 디자이너와 개발자는 웹 페이지가 다양한 기기에서 적절하게 보이도록 디자인하는 '반응형 웹 디자인'을 사용합니다.

반응형 웹 디자인의 핵심 개념은 media query와 breakpoint입니다.


Media Query 복습​

Media query는 특정 조건 (예: 브라우저 창의 너비)에 따라 다른 스타일 규칙을 적용할 수 있게 합니다. 이를 통해 화면 크기나 장치 유형에 따라 웹 페이지의 레이아웃, 이미지 크기 및 기타 스타일을 조정할 수 있습니다.


Breakpoint 복습​

Breakpoint는 특정 화면 크기나 해상도에서 레이아웃이나 디자인을 변경할 때 사용하는 지점을 의미합니다. 기기의 화면 크기에 따라 다르게 디자인된 스타일을 적용하기 위한 참조점입니다.


CSS 코드 분석:​

본 템플릿의 CSS는 두 개의 breakpoint를 사용해 스타일을 적용했습니다.

  1. 태블릿:
CSS
@media (max-width: 1100px) {
  ...;
}

이 media query는 브라우저 창의 너비가 1100px 이하일 때 적용되는 스타일을 정의합니다. 여기서 1100px은 태블릿 장치의 너비를 위한 breakpoint로 사용되었습니다.

  1. 모바일:
CSS
@media (max-width: 767px) {
  ...;
}

이 media query는 브라우저 창의 너비가 767px 이하일 때 적용되는 스타일을 정의합니다. 767px은 모바일 장치의 너비를 위한 breakpoint로 사용되었습니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!