1. px,%
1. px
<div class="container">
container
<div class="parent">
parent
<div class="child">child1</div>
<div class="child">child2</div>
</div>
</div>body *{
border:2px solid;
}
.container{
width:600px;
}
.parent{
width:300px;
}
.child{
width:150px;
}'px은 해상도에 따른 상대단위'이고 '고정시키는 px단위.'라고 생각하면 된다.
2. %
<div class="container">
container
<div class="parent">
parent
<div class="child">child1</div>
<div class="child">child2</div>
</div>
</div>body *{
border:2px solid;
}
.container{
width:600px;
}
.parent{
width:50%;
}
.child{
width:50%;
}%는 기본적으로 부모요소의 가로 사이즈에 영향을 받는다.
parent는 container의, child는 parent의 영향을 받는다.
%단위를 사용하는 것은 기본적으로 부모요소의 사이즈의 영향을 받는다.
2.em, rem
1. em
em은 자기자신의 폰트사이즈에 영향을 받는다.
body *{
border:2px solid;
}
.container{
width:60em;
font-size:10px;
}
.parent{
width:30em;
}
.child{
width:15em;
}
- 여기서 예로 container에서 font-size:10px;로 두고 font-size인 10으로 600px을 나누면 60이기 때문에 width:60em;으로 두면 변화가 없다. 이렇게 단위환산을 하면 된다.
- parent도 보자면 상속이라는 개념에 의해서 parent태그에 font-size를 적용해놓지 않는 이상 container의 font-size를 가져오기 때문이다.
💡여기서 30em*fontsize10px=width300px이라는 것을 알 수 있다.
2. rem
rem은 최상위 조상요소의 영향을 받는다.
html{
font-size:10px;
}
body{
font-size:16px;
}
body *{
border:2px solid;
}
.container{
width:60em;
font-size:10px;
}
.parent{
width:30em;
}
.child{
width:15em;
}여기에서 rem은 최상위 조상의 영향을 받기 때문에 만약 body가 없다면 html의 영향을 받지만, 위와같이 body가 있다면 html에 영향을 받았다가 body에 와서 font-size:16px로 정의했기 때문에 body의 영향을 받게 된다.
3. vm, vh
💡뷰포트라는 것은 결과로 나오는 화면 전체가 뷰포트라는 것을 알 수 있다.
1. vw(뷰포트의 가로사이즈)
<div class="container"></div>.container{
width:50vw;
height:200px;
background:red;
}vw는 기본적으로 백분율이기에 100단위 안으로 설정해주면 된다.
또한 뷰포트가 줄어들거나 들어나는 것에 맞춰서 50%를 따라가게 된다.
2. vh(뷰포트의 높이값)
.container{
width:50vw;
height:50vh;
background:red;
}vh도 vw와 마찬가지다.
1~100까지의 사이 값을 갖으며 백분율을 생각하면 된다.
4. vmin과 vmax
💡여기서 의미하는 v는 위와 같이 뷰포트를 의미한다.
3. vmin
<div class="container"></div>.container{
width:50vmax;
height:300px;
background:red;
}더 짧은 쪽의(가로,세로중에서) 백분율의 절반이니깐 짧은 쪽의 절반을 뷰포트로 이용한다는 것이다.
4. vmax
<div class="container"></div>.container{
width:50vmin;
height:300px;
background:red;
}여기서 vmax는 더 긴 너비의 절반 만큼을 컨테이너의 가로 사이즈로 사용하고 있다고 보면 된다.
즉, vmin과 vmax는 짧은쪽과 넓은쪽에 따라서 vmin과 vmax가 서로 다르게 백분율로써 기준을 잡는다.
마지막으로
다음 시간에는 css속성중에서 박스모델에 대해서 배워보겠습니다.
