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%)로 설정합니다.

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

치트 시트

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

기본 구문:

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

일반적인 조건:

max-width: 스타일을 최대 너비 이하의 화면으로 제한합니다.
min-width: 스타일을 최소 너비 이상의 화면에 적용합니다.
max-height: 스타일을 최대 높이 이하의 화면으로 제한합니다.
min-height: 스타일을 최소 높이 이상의 화면에 적용합니다.

예시:

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

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

직접 해보기

<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>