Css Units

Responsive Units

.box {
	width :200px;
    	heigth: 200px;
    	color: #ffffff;
    	font-size: 16px;
}

.box : Selector
width: property 
200px; :value

size unit은 두가지로 나눌 수 있다.

1. Absolute : 절대적인 px
   px을 사용하면 컨테이너가 줄어들어도 고정되어서 움직이지 않는다.
   사용자가 브라우저에서 폰트사이즈 설정을 바꿔도 반응하지 않는다.
   고정된 px보다는 부모의 사이즈에 비교해서 %로 하는 경우가 있다.

2. Relative : 상대적인것.
   em,ex,rem,vw,vh ,vmin,vmax, % 등

em
rem
vw
vh
%
등이 주로 씀.

기본적으로 브라우저에서 html에 할당되는 font-size는 16px이다! 따로 지정하지 않으면 기본적으로 16px로 지정된다.

em : typrography에서 현재 지정된 point size를 나타냄. fontsize를 말한다.같은 폰트 사이즈여도 다른 font family에 따라 사용자에게 보여지는 text의 크기가 달라진다. em은 선택된 폰트와 상관없이 정해진다.

em은 부모의 폰트사이즈에 곱한값이 계산이 된다! 부모요소에 상대적인 크기에 결정이됨.

em : relative to parent element

<div class="parent">
	Parent
    <div class="child">
    	Child
    </div>
</div>

.parent{
	font-size: 8em; == 800% 와 동일함.
    // 기본으로 지정된 16px * 8 = 128px이라는뜻.
}
.child{
	font-size: 0.5em; == 50%와 동일함.
    // 부모의 128px * 0.5 = 64px이다.
}

ex ch는 이런게 있구나 이해하자!

ex: 지정한 font-family에 따라 높이가 변경된다.
ch: 적용된 font-family에서 숫자 0의 너비를 나타내는 단위.

rem : root+em

rem: relative to root element.

root에 지정된 font-szie에 따라서 크기가 결정되는것.

<div class="parent">
	Parent
    <div class="child">
    	Child
    </div>
</div>

.parent{
	font-size: 8rem; 
    // 기본으로 지정된 16px * 8 = 128px이라는뜻.
}
.child{
	font-size: 0.5rem;
    // 16px * 0.5 = 8px.
}

root의 16px을 기준으로 계산한다.
브라우저에서 지정된 16px

lh는 브라우저에서 지원하지 않는다.
vw,vh은 브라우저를 기준으로 움직인다. 부모의 기준이 아님!
100vw: 뷰포트의 너비의 100%를 쓴다
50vw : 뷰포트, 즉 브라우저의 너비 50%를 쓴다는것.