<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연습용</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</body>
</html>.container {
background-color: #2b2b2b;
height: 100vh;
}
.item1 {
background-color: red;
}
.item2 {
background-color: orange;
}
.item3 {
background-color: yellow;
}
.item4 {
background-color: green;
}
.item5 {
background-color: blue;
}
vh(veiwport high) 를 사용하면 내가 보는 화면에 꽉 찹니다
하지만 퍼센트를 쓰면
보이지 않습니다
body에 height가 충분하지 않아서 그렇것입니다 보이게 하려면
body와 html에 100% 를 줘야하는데 선택자가 두개나 더 생기기 때문에 height를 줄때는 vh를 사용하는게 좋습니다
하지만
반응형 웹을 위해서 height의 높이설정을 안하는것이 좋다고 합니다
기본적으로는
h1 {
height : auto
}로 설정이 되어있기 때문입니다
자동 즉, 컨텐트의 크기 혹은 화면의 크기에 따라 줄어듭니다
vh도 똑같이 줄어들고 늘어나기 때문에 굳이 높이를 설정 해야한다면 vh를 쓰는것이 바람직합니다
이름 값 하는 개발자가 꿈인 사람