width: calc(요소의 크기 / 디자이너가 정한 화면 크기);
<head>
<style>
.box1 {
width: 500px;
height: 500px;
border: 1px solid red;
font-size: 30px;
}
.box2 {
width: 400px;
height: 400px;
border: 1px solid blue;
font-size: 2em; /* box1이 상위 요소로 60px */
}
.box3 {
width: 300px;
height: 300px;
border: 1px solid blueviolet;
font-size: 2em; /* 120px */
}
.box4 {
width: 200px;
height: 200px;
border: 1px solid yellowgreen;
font-size: 2em; /* 240px */
}
</style>
</head>
<body>
<div class="box1">
박스1
<div class="box2">
박스2
<div class="box3">
박스3
<div class="box4">
박스4
</div>
</div>
</div>
</div>
<style>
html {
font-size: 20px;
}
span {
display: block;
float: left;
margin: 50px;
background-color: red;
color: #fff;
padding: 1em;
/*20px*/
}
.btn1 {
font-size: 1em;
/* 20px;*/
}
.btn2 {
font-size: 1.5em;
/*30px*/
}
.btn3 {
font-size: 2em;
}
</style>
</head>
<body>
<span class="btn1">버튼1</span>
<span class="btn2" >버튼2</span>
<span class="btn3" >버튼3</span>
<span class="kakako">
</span>
rem : 상속을 루트에서만 받는다. (루트 font-size 속성 값에 비례)
<style>
html {
font-size: 20px;
}
.box1 {
width: 500px;
height: 500px;
border: 1px solid red;
font-size: 30px;
}
.box2 {
width: 400px;
height: 400px;
border: 1px solid blue;
font-size: 2rem; /* 40px */
}
.box3 {
width: 300px;
height: 300px;
border: 1px solid blueviolet;
font-size: 2rem; /* 40px */
}
.box4 {
width: 200px;
height: 200px;
border: 1px solid yellowgreen;
font-size: 2rem; /* 40px */
}
</style>
</head>
<body>
<div class="box1">
박스1
<div class="box2">
박스2
<div class="box3">
박스3
<div class="box4">
박스4
</div>
</div>
</div>
</div>
</body>
vw, vh : 뷰포트(브라우저 창)를 기준
10vw는 viewport 너비의 10%
10vh는 viewport 높이의 10%
---
width가 100vw이고 해상도 화면이 360px이고, 사용하려는 요소의 넓이는 360px, 높이는 71px일 때,
(71px / 360) * 100 의 값으로 height 값을 지정해주면 된다.
vmin, vmax : vw와 vh중 작고 큰 것을 기준으로 적용한다.
img 태그를 이용해서 넣을 때는 width 값에 따라서 height 값이 자동으로 지정이 되지만, background-image를 적용할 때는 문제가 발생할 수 있기 때문에 vw, vh를 사용하면 편리하다.