Guidelines
Practice
미디어 쿼리 실습
웹사이트는 다양한 크기와 해상도를 가진 기기로 방문합니다. 여러 기기에 대응하기 위해 웹 디자이너와 개발자는 웹 페이지가 다양한 기기에서 적절하게 보이도록 디자인하는 '반응형 웹 디자인'을 사용합니다.
반응형 웹 디자인의 핵심 개념은 media query
와 breakpoint
입니다.
Media Query 복습
Media query
는 특정 조건 (예: 브라우저 창의 너비)에 따라 다른 스타일 규칙을 적용할 수 있게 합니다. 이를 통해 화면 크기나 장치 유형에 따라 웹 페이지의 레이아웃, 이미지 크기 및 기타 스타일을 조정할 수 있습니다.
Breakpoint 복습
Breakpoint
는 특정 화면 크기나 해상도에서 레이아웃이나 디자인을 변경할 때 사용하는 지점을 의미합니다. 기기의 화면 크기에 따라 다르게 디자인된 스타일을 적용하기 위한 참조점입니다.
CSS 코드 분석:
본 템플릿의 CSS는 두 개의 breakpoint
를 사용해 스타일을 적용했습니다.
- 태블릿:
CSS
@media (max-width: 1100px) { ...; }
이 media query
는 브라우저 창의 너비가 1100px 이하일 때 적용되는 스타일을 정의합니다. 여기서 1100px은 태블릿 장치의 너비를 위한 breakpoint
로 사용되었습니다.
- 모바일:
CSS
@media (max-width: 767px) { ...; }
이 media query
는 브라우저 창의 너비가 767px 이하일 때 적용되는 스타일을 정의합니다. 767px은 모바일 장치의 너비를 위한 breakpoint
로 사용되었습니다.
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help