- width: 가로
- height: 세로
*** height는 단독으로 %를 사용 못함(부모가 특정 사이즈 가지고 있어야함.)
(why! block레벨은 가로는 가능한한 끝-끝, 세로는 기본값임.)
-
단위 : px(기본단위)
%: 부모 대비 사이즈
vm: 화면 대비 가로 사이즈
vh: 화면 대비 세로 사이즈max-width: 해당 요소의 최대 커질 수 있는 크기 limit min-width: 해당 요소의 최대 작아질 수 있는 크기 limit ```
<style>
body { margin: 0;}
.box {
width: 100vw;
height: 100vh;
width: 100%;
height: 100vh;
background-color: red;
max-width: 900px;
}
.parent{
width: 200px;
height: 100px;
background-color: pink;
}
.child{
width: 50%;
height: 70%; /*parent가 사이즈 가지고 있기 때문에 %주는것 가능*/
background-color: lightblue;
}
.box{ /*box의 부모는 body*/
width: 70%;
height: 200px;
background-color: coral;
}
</style>
</head>
<body>
<div class="box">box1</div>
<div class="parent"> <!--부모영역-->
<div class="child">자손영역</div>
</body>
새로운 것은 언제나 재밌어 🎶