미디어 쿼리 기초

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 65번째.

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

미디어 쿼리의 기본 구문:

@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의 배경색을 연한 파란색으로 설정하세요.
- 제목(<h1>)의 글꼴 크기를 5vw(뷰포트 너비의 5%)로 설정하세요.
최소 너비가 601px이고 최대 너비가 1024px인 화면에 대한 @media 쿼리를 추가하세요:
- body의 배경색을 연한 초록색으로 설정하세요.
- 제목(<h1>)의 글꼴 크기를 3vw(뷰포트 너비의 3%)로 설정하세요.

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

직접 해보기

<html>
<head>
    <title>Media Queries Basics</title>
    <style>
    /* Write your code here */
        
    </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>