반응형
px는 많이 봤지만 vh는 첨 봤다.
vh는 viewport height를 의미한다.
viewport는 사용자가 웹사이트를 볼 때 보이는 영역을 말한다.
뷰포트의 높이는 뷰포트의 세로길이다.
vh는 뷰포트의 일정 비율을 나타내기 때문에 웹사이트를 뷰포트에 맞게 반응형으로 만들 때 유용하다.
아래는 코드 예시와 화면모습이다.
<!DOCTYPE html>
<html>
<head>
<title>Viewport Height Example</title>
<style>
section {
height: 100vh;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #333;
}
</style>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
vh가 50일 때
<!DOCTYPE html>
<html>
<head>
<title>Viewport Height Example</title>
<style>
section {
height: 50vh;
background-color: #edc0c0;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #333;
}
</style>
</head>
<body>
<section>
<h1>Hello, World!</h1>
</section>
</body>
</html>
정리하면 vh는 뷰포트의 일정 비율을 나타낸다.
100vh면 뷰포트 세로길이 전부를 말하며 50vh면 절반을 뜻한다.
px과 비교해보면 어떨까? 만약 뷰포트가 100px이라면 1vh는 1px이다.
뷰포트가 650px이라면 1vh는 6.5px이다.
반응형
'CSS' 카테고리의 다른 글
| [CSS] HTML 16진수 색상코드에 대해 알아보자 (0) | 2023.07.11 |
|---|---|
| 아이콘 무료 사이트 추천 : flaticon (2) | 2023.06.25 |
| CSS 연습 (0) | 2023.03.31 |
| css 연습 (0) | 2023.03.29 |
| CSS 박스 모델 연습 (0) | 2023.03.28 |
