Media Queries 기초

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

CSS의 미디어 쿼리를 사용하면 장치의 너비, 높이 또는 기타 속성을 기준으로 스타일을 적용하여 웹사이트가 다양한 화면 크기에 맞게 조정되도록 할 수 있습니다.

미디어 쿼리의 기본 구문:

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

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

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

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

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

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

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

예시:

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