고정 크기 단위
- px: 픽셀(화소)
- pt: 포인트
- in: 인치
- cm, mm: 센티미터, 밀리미터
px
pixel이라하며 인치에 따라 1px의 크기가 다르다. 예를 들어 해상도가 1920 x 1080인 12, 24인치 모니터가 있다고 했을 때 1920 x 1080이 바로 픽셀 수를 나타낸다.
그리고 모니터를 대각선으로 12인치, 24인치라하는데 당연히 인치가 작을수록 픽셀 수도 작을 것이다.
그래서 장치의 해상도에 따라 다른 크기를 가져서 브라우저에서의 1px을 1인치의 1/96인 1/96inch로 고정해두었다.
우리가 CSS에서 쓰는 1px은 정해진 절대 길이로 쓰인다.
가변 크기 단위
- em: 배수 단위(부모의 글자 크기에 따라 기준점이 달라짐)
- %: 백분율 단위
- rem: root me(최상위 요소의 글자 크기에 따라 달라짐)
- vw: 화면비 백분율 단위
- vh: 화면비 백분율 단위
- vmin: 화면비 최솟값
- vmax: 화면비 최댓값
- ex: 현재 폰트의 x-height 값
em과 rem
둘 다 상대적인 길이를 가지는데 무엇을 기준으로 하는지에 따라 차이가 생긴다.
em은 현재 스타일이 지정되는 요소의 폰트 크기를 기준으로 하고, rem은 최상위 요소의 폰트 크기를 기준으로 한다.
우리가 보는 웹 브라우저는 기본적으로 16px을 기본 font-size로 갖는다.
그래서 1em과 1rem모두 16px이 된다.(브라우저 마다 설정을 통해 변경가능)
상위 요소 font-size가 18px인 경우
1em(rem) = 18px 1 = 18px
3em(rem) = 18px 3 = 54px
4.5em(rem) = 18px * 4.5 = 81px
%
상대 길이이다. 보통 이미지나 레이아웃의 너비나 높이를 지정할 때 자주 쓰인다.
//HTML
<div id="per">per</div>
<div id="per2">per2</div>
//CSS
#per {
background-color: bisque;
width: 500px;
}
#per2 {
background-color: blue;
width: 100%;
}이런 식으로 했으면 per2는 페이지가 바뀔 때마다 줄어들어다가 늘어났다가 하는데 per는 고정으로 잡아서 길이가 변하지 않는다.
하지만 만약에
//HTML
<div id="per">per
<div id="per2">per2</div>
</div>
//CSS
#per {
background-color: bisque;
width: 500px;
}
#per2 {
background-color: blue;
width: 50%;
}이런 식으로 했다면 per2가 per에 상속되어 per 500px의 50%가 되어 가변하지 않고 고정이 된다.
공부 자료
구름: 한 눈에 끝내는 HTML5/CSS3
