1.3.2 %, vw, vh

약 5분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

1.3.2 %, vw, vh

반응형 웹 디자인에서 중요한 단위는 % (퍼센트), vw (viewport width), vh (viewport height)입니다. 이들은 사용자 화면 크기에 따라 유동적으로 변하는 요소를 만들 수 있게 해줍니다. 이러한 단위는 고정된 px(픽셀) 단위를 사용하는 대신 상대적인 크기를 제공하여 다양한 화면 크기에서 일관된 경험을 제공합니다.

1. %, vw, vh의 개념

% (퍼센트): 부모 요소에 대한 비율로 설정된 크기입니다. 예를 들어, 너비 100%는 부모 요소의 너비와 같게 설정됩니다.
vw (viewport width): 뷰포트 너비의 1%에 해당하는 단위입니다. 예를 들어, 50vw는 화면 너비의 절반입니다.
vh (viewport height): 뷰포트 높이의 1%에 해당하는 단위입니다. 100vh는 화면 전체 높이를 의미합니다.

2. 예제

아래의 예제 코드를 통해 %와 vw, vh 단위의 사용법을 살펴보겠습니다.

코드 html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 디자인 예제</title>
    <style>
        .container {
            width: 80%; /* 부모 요소에 대한 비율 */
            height: 50vh; /* 뷰포트 높이의 50% */
            background-color: lightblue;
            position: relative;
        }
        .box {
            width: 50vw; /* 뷰포트 너비의 50% */
            height: 20%; /* 부모 요소에 대한 비율 */
            background-color: coral;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

위 코드를 HTML 파일로 저장하고 브라우저에서 열어보시면, 반응형 요소가 어떻게 동작하는지 확인할 수 있습니다. 경험상 다양한 뷰포트에서 요소들이 어떻게 변화하는지 확인해주세요.

3. 실습

위의 코드를 바탕으로, box의 색상 및 크기를 변경해보세요.
다른 뷰포트 크기에서 결과를 시험해보며, 반응형 단위가 어떻게 적용되는지 관찰해보세요.

4. 프로젝트

실제로 기업 홈페이지나 블로그의 레이아웃을 작성할 때, %와 vw, vh 단위를 활용한 반응형 레이아웃을 구축해보세요.

5. 정리

%와 vh, vw 단위는 반응형 웹 디자인에서 매우 유용합니다. 이들 단위를 적절히 활용하여 다양한 화면 크기에서 최적의 레이아웃을 제공하십시오.

1.3.2 %, vw, vh

1.3.2 %, vw, vh

1. %, vw, vh의 개념

2. 예제

3. 실습

4. 프로젝트

5. 정리

댓글 0