[TIL] 05 -CSS Unit of length

UlongChaS2·2021년 4월 13일
0

TIL - CSS

목록 보기
2/2

CSS의 길이단위 중에는 크게 절대 길이 단위, 상대 길이 단위로 나뉘다.

절대 길이 단위

px

절대 길이 단위 중에서는 ch, pt, mm, cm 등이 많지만 웹에서는 절대 길이 단위는 px를 제일 많이 쓴다

하지만 모니터 해상도의 픽셀모니터를 가득채운 브라우저의 해상도 픽셀이 다르기 때문에 기입한 숫자는 같지만 각 해상도가 다른 모니터마다 보여지는 px값이 다르게 보여진다. 노트북만 해도 13ich, 14ich, 15inch 등으로 나눠지는 다양한 해상도를 가진 현재와 맞지 않다

서칭하다 보면 px을 쓰는 이유는 잘 찾을 수 없고 쓰지 말아야하는 이유만 적혀있는데 (어떤 곳은 절대 쓰지말라고 하는 수준이였다) 그 이유는

추천하지 않는 이유

  • 위 같은 이유로 반응형 웹 작업에 그다지 효용적이지 못하다.
  • 접근성이 많이 떨어진다.
    (예로 브라우저의 기본 글씨체는 절대 값이 아니기 때문에 사용자의 브라우저 해상도 픽셀에 따라 조절해서 보여주는데 만약 눈이 많이 안좋은 사용자가 기본 글씨들을 크게 설정했지만 개발자가 따로 px로 설정하는 제목, 강조되는 내용들 등이 절대 값이 px이기 때문에 설정했던 내용들이 오히려 기본 글씨를 크게 설정한 탓에 작게 보여진다.)

상대 길이 단위

em

폰트 기준으로 정해지는 단위이며, 부모의 폰트 크기에 영할을 받아 동적인 단위이다.

계산법은 1em = 부모의 폰트 크기

html {font-size: 10px}
body {font-size: 15px} 
div {font-size: 20px} 
div {width: 2em}
=> div의 width의 결과 값은 40px로 된다.

또 다른 예로는

html {font-size: 10px}
body {font-size: 15px} 
div {font-size: inherit} 
div {width: 2em}
=> div의 width의 결과 값은 30px로 된다.

div {font-size: inherit}body의 font-family 요소를 받는거라 div의 font-family 값은 15px로 되므로 값이 바뀌게 된 것

하지만 개발할 때 모든 단위가 x2, x50으로 딱 나눠지게 되는 것이 아니므로 계산법이 조금 힘들어 도움주는 페이지 (http://pxtoem.com/)를 사용하거나 SASS를 이용하여 함수를 만들어 사용한다.

rem

em을 계속 쓰다보면 동적이라 자식의 폰트 크기가 계속 커진다는 단점이있는데 rem 은 오직 html 태그의 글자 크기만 참조하기에 em보다 비해서 매우 간단하다.

계산법은 1rem = html 요소에 지정된 폰트 크기

html {font-size: 10px}
body {font-size: 15px} 
div {font-size: 20px} 
div {width: 2em}
=> 이 부분에서 div안에 div가 있다면 두 번째 div의 width는 80px일 될 것이다.
html {font-size: 10px}
body {font-size: 15px} 
div {font-size: 20px} 
div {width: 2rem}
=> rem은 html에 영향을 받기 때문에 div안에 아무리 많은 div를 넣더라도 div의 width는 20px로 정해진다.

사용할 때 글자 크기를 참조하다보니 계산하기 쉽게 참조 대상의 글자 크기를 10 픽셀로 맞춰놓고 진행하는 경우가 많다.
html 태그의 경우, 브라우저 기본 설정 기준에서 기본 16 픽셀을 갖고 시작하는데 여기에 62.5% 를 곱해주면 10 픽셀로 맞춰놓고 시작할 수 있다.

html {font-size: 62.5%;}

이러면 html 은 10 픽셀로 맞춰지게되고 하위 태그에서 rem 을 사용하는 경우 10 배수로 계산하면 되니 훨씬 편하다.
그리고 반응형을 만들 때 부모의 font-family만 바꾸면 자식의 수의 값이 알아서 맞춰지는 좋은 단위이다.

vw, vh

viewpoint의 영향을 받는 동적인 단위

vw 계산법은 1vw = 뷰포트 너비의 1%이고, vh 계산법은 1vh = 뷰포트 높이의 1%이고
넓이가 100px이면 1vw는 1px, 10vw는 10px이고 윈도우 넓이를 500px로 늘리면 미디어 쿼리 없이 바로 1vw는 5px, 10vw는 50px로 바뀐다는 장점과 100vw 또는 100vh를 하면 넓이와 높이의 100%이기에 화면을 꽉 채울 수 있다.

vw, vh의 활용법

transform: calc()와 결합하면 좋은 시너지를 낼 수 있다.
헤더영역 높이가 50px이고 컨텐츠 영역 높이를 '헤더를 제외한 나머지 높이 전체'로 만들고 싶다면, height: calc(100vh - 50px);을 지정해주면 된다.

%와 다른 점

height: 100%height: 100vh이 다른 점은 %을 사용한 객체는 부모의 크기가 지정되어있어야 그 크기가 정해지고 부모의 값이 없으면 0이기 때문에 0의 0%는 0이라 나타나지 않는다. 하지만 vwvh는 상속을 부모가 아닌 viewpoint로 받아 부모의 크기가 0이여도 크기가 지정된다.
참고로 vw와 vh는 IE9부터 지원하는 속성이다.

vmin, vmax

vw, vh와 마찬가지로 viewpoint의 영항을 받는 단위

vmin은 viewpoint의 가로, 세로 길이중 짧은 길이를 뜻하고,
vmax은 viewpoint의 가로, 세로 길이중 긴 길이를 뜻한다.

참고로 vmin은 IE9부터 사용할 수 있으며, vmax는 IE에서 지원되지 않으며 Edge부터 사용 가능하다.

0개의 댓글