Media Queries 기초

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 65번째.

CSS의 미디어 쿼리(media query)는 장치의 너비, 높이 또는 기타 속성에 따라 스타일을 적용하여 웹사이트가 다양한 화면 크기에 적응할 수 있도록 합니다.

미디어 쿼리의 기본 구문:

@media (condition) {  
    selector {  
        property: value;  
    }  
}

condition: 스타일을 트리거하는 규칙 (예: max-width: 600px).
selector: 스타일을 적용할 HTML 요소.

property: 설정할 CSS 속성 (예: width, font-size).
value: 속성에 할당된 값으로, 미디어 쿼리 조건에 따라 변경됩니다.

미디어 쿼리에서 조건은 화면 크기, 해상도 등과 같은 다양한 요소를 기반으로 할 수 있습니다. 몇 가지 일반적인 조건은 다음과 같습니다:

max-width: 스타일을 최대 너비 이하의 화면으로 제한합니다 (예: max-width: 600px).
min-width: 스타일을 최소 너비 이상의 화면에 적용합니다 (예: min-width: 768px).

max-height: 스타일을 최대 높이가 지정된 값 이하인 화면으로 제한합니다 (예: max-height: 400px).
min-height: 스타일을 최소 높이가 지정된 값 이상인 화면에 적용합니다 (예: min-height: 500px).

이 조건들은 다양한 기기와 방향에서 웹사이트가 어떻게 보이는지 제어하는 데 도움을 줍니다.

예시:

@media (max-width: 600px) {  
  body { background-color: lightblue; }  
}

@media (min-width: 601px) and (max-width: 1024px) {
  body {background-color: lightgreen;}

화면 너비가 600px 이하일 때 배경색을 lightblue로 변경합니다. 601px에서 1024px 사이의 화면인 경우, 배경색은 lightgreen이 됩니다.

챌린지

쉬움

제목(<h1>), 단락(<p>), 그리고 <div>가 포함된 HTML 문서가 주어집니다. 여러분의 작업은 페이지를 반응형으로 만들기 위해 미디어 쿼리를 추가하는 것입니다. 다음 단계를 따르세요:

최대 너비가 600px인 화면을 위한 @media 쿼리를 추가합니다:
- body의 배경색을 "lightblue"로 설정합니다.
- 제목(<h1>)의 글꼴 크기를 5vw(뷰포트 너비의 5%)로 설정합니다.
최소 너비가 601px이고 최대 너비가 1024px인 화면을 위한 @media 쿼리를 추가합니다:
- body의 배경색을 "lightgreen"으로 설정합니다.
- 제목(<h1>)의 글꼴 크기를 3vw(뷰포트 너비의 3%)로 설정합니다.

브라우저 창의 크기를 조절하여 미디어 쿼리가 레이아웃을 동적으로 어떻게 조정하는지 확인해 보세요.

직접 해보기

<html>
<head>
    <title>Media Queries Basics</title>
    <!--여기에 코드를 작성하세요-->
    <style>
        
        
    </style>
</head>
<body>
    <h1>Whales: The Ocean Giants</h1>  
    <p>Whales are magnificent giants of the sea, famous for their intelligence and powerful songs. These gentle creatures face threats like hunting and pollution, making them vital to protect.</p>  
    <div>As ocean's true giants, whales help maintain the delicate balance of marine life.</div>  
</body>
</html>