Viewport 단위

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

CSS에서 뷰포트 단위는 브라우저의 뷰포트(웹 페이지의 가시 영역) 크기를 기준으로 하는 상대적인 측정 단위입니다. 이 단위들은 뷰포트의 너비나 높이에 비례하여 요소와 텍스트의 크기를 조정함으로써 반응형 디자인을 만드는 방법을 제공합니다. 뷰포트 단위는 유동적인 레이아웃을 만들고, 텍스트 크기를 조절하며, 다양한 화면 크기에 적응하는 방식으로 요소를 배치하는 데 특히 유용합니다.

네 가지 뷰포트 단위가 있습니다:

vw (viewport width): 뷰포트 너비의 1%를 나타냅니다. 예를 들어, 10vw는 뷰포트 너비의 10%와 같습니다.

vh (뷰포트 높이): 뷰포트 높이의 1%를 나타냅니다. 예를 들어, 25vh는 뷰포트 높이의 25%와 같습니다.

vmin (viewport minimum): 뷰포트의 더 작은 차원(너비 또는 높이)의 1%를 나타냅니다. 예를 들어, 뷰포트가 높이보다 너비가 더 넓다면, 5vmin은 뷰포트 높이의 5%와 같습니다.

vmax (viewport maximum): 뷰포트의 더 큰 차원(너비 또는 높이)의 1%를 나타냅니다. 예를 들어, 뷰포트가 높이보다 너비가 더 넓다면, 8vmax는 뷰포트 너비의 8%와 같습니다.

뷰포트 단위 사용을 위한 기본 구문은 다음과 같습니다:

selector {
    property: value;
}

selector: 스타일을 지정하려는 HTML 요소(들)를 대상으로 하는 CSS 선택자입니다.

property: 설정하려는 CSS 속성 (예: width, height, font-size, margin, padding).

value: 뷰포트 단위(예: 50vw, 75vh, 10vmin, 5vmax)를 포함하는 값.

예를 들어:

.box {
    width: 50vw; /* 박스 너비는 뷰포트 너비의 50%가 됩니다 */
    height: 30vh; /* 박스 높이는 뷰포트 높이의 30%가 됩니다 */
}

이 예제에서 .box 요소는 너비가 50vw이고 높이가 30vh이며, 뷰포트의 너비와 높이 모두에 반응하도록 만듭니다.

챌린지

쉬움

제목(<h1>), 단락(<p>), 그리고 디비전(<div>)이 포함된 HTML 문서가 주어집니다. 여러분의 작업은 뷰포트 단위를 사용하여 이러한 요소들을 반응형으로 만드는 것입니다. 다음 단계를 따르세요:

<h1> 요소를 대상으로 하는 CSS 규칙을 작성하세요. font-size를 6vw로 설정합니다.
<p> 요소를 대상으로 하는 CSS 규칙을 작성하세요. font-size를 4vmin으로 설정합니다.
<div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. width를 80vw로, height를 50vh로 설정합니다.

치트 시트

뷰포트 단위는 브라우저의 뷰포트 크기를 기준으로 하는 상대 단위로, 반응형 디자인을 만드는 데 유용합니다.

네 가지 뷰포트 단위:

vw (viewport width): 뷰포트 너비의 1%
vh (viewport height): 뷰포트 높이의 1%
vmin (viewport minimum): 뷰포트의 더 작은 치수의 1%
vmax (viewport maximum): 뷰포트의 더 큰 치수의 1%

기본 구문:

selector {
    property: value;
}

예시:

.box {
    width: 50vw; /* 뷰포트 너비의 50% */
    height: 30vh; /* 뷰포트 높이의 30% */
}

직접 해보기

<html>
<head>
    <title>Viewport Units</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
    <h1>Antarctica</h1>  
    <p>The coldest continent, covered in ice and home to penguins and seals.</p>  
    <div>It has no permanent residents, only research stations.</div> 
</body>
</html>