Web/HTML+CSS+JS
반응형 웹 기초: 뷰포트 단위 vw vh vmin vmax
ypearl
2023. 12. 24. 12:42
em과 rem은...
상위 요소 글자 크기에 따라 달라지는 가변성을 지니고 있는 것이지,
브라우저나 기기 화면에 따라 크기가 달라지는 단위는 아니다.
따라서 진정한 반응형 단위라고 할 수는 없다.
반응하는 단위들
아래 몇 가지 단위들은 뷰포트 크기를 기반으로 값을 계산하여
크기를 결정하는 가변 단위이다.
- vw /* 뷰포트 너비의 100분의 1*/
- vh /* 뷰포트 높이의 100분의 1*/
- vmin /* 뷰포트 너비와 높이 중 작은 쪽의 100분의 1*/
- vmax /* 뷰포트 너비와 높이 중 큰 쪽의 100분의 1*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다른 상대 단위들</title>
<style>
p{
margin: 0; /*p태그는 기본적으로 margin의 속성을 가지고 있음*/
font-size: 50vw;
}
</style>
</head>
<body>
<p>반응형</p>
</body>
</html>
