728x90
많이는 봤지만 정확히는 몰랐던 차이
절대 길이 단위
절대 길이 단위는 다른 요소들의 크기와 상관없이 항상 동일한 값으로 간주된다. (ex. px, pt, cm, mm 등)
예를들어 10px이라는 값을 입력한다고 했을때 10px은 주변의 어떠한 요소와도 상관없이 고정된 값을 가진다. 절대 길이 단위는 예로 든 단위 외에도 단위가 더 있지만 실질적으로는 px, pt 정도만 사용된다. 사실 절대 길이 단위는 그냥 10px 찍으면 10px짜리 무언가가 되기 때문에 어떻게 보면 너무나 당연한 개념이다. 사실 우리가 정확히 의미를 잘 모르고 쓰는 단위는 상대 길이 단위일 확률이 높다.
em과 rem 상대 길이 단위
em과 rem은 글꼴의 크기를 나타낼때 사용하는 단위이다.
상위요소의 글꼴 크기에 em은 비례해서 크기가 변한다
하위요소의 글꼴 크기에 rem은 비례한다. (rem(root em) 뿌리가 되는 요소의 크기에 비례 아래의 root는 html테그)
See the Pen Untitled by getgrovy (@getgrovy) on CodePen.
vw 와 vh (vertical height, vertical width)
만약 반응형 웹을 만든다고 했을때 보통 요소의 크기를 %로 설정하는 경우가 많었어
하지만 %만으로는 한계가 있더라구 명확하지않은 불편함?
이럴땐 vw와 vh가 써서 해결할수있어 !
vw와 vh는 뷰포트 크기(주로 브라우저창의 크기)의 100분의 1에 해당하는 단위야
예를 들어 브라우저 창의 높이가 500px일때 1vh는 5px이고
마찬가지로 브라우저 창의 넓이가 500px이라면 1vw는 5px이야
그래서 주로 반응형 브라우져에서 사용해 !