px만 남발하면서 CSS를 짜던 시절...(1개월도 안 지남)
여느 때와 같이 그렇게 CSS를 짰는데 px 대신 상대 단위를 써보면 어떻겠냐는 코드 리뷰가 달렸다. 단위는 무조건 px만 쓰던 나였기에 우선적으로 CSS 단위에 대한 학습이 필요했다.
CSS단위에 대해 알아보자!!
일단 CSS에서는 크게 절대 단위와 상대 단위로 나뉜다.
절대 단위
절대 단위로는 px, in, cm, mm, pt, pc 등이 있다.
주로 고정된 크기를 지정할 때 사용된다. 이 중 px은 많이들 보고 써봤을 것이다.
px
px(픽셀)은 화면을 구성하는 가장 기본이 되는 단위로, 화면의 물리적인 크기를 나타낸다.
나머지 in, cm, mm, pt, pc 그렇게 많이 쓰이지 않는다고 한다
상대 단위
상대 단위로는 %, em, rem, vw, vh 등이 있다. "상대" 단위인 만큼 상대적으로 크기를 조절할 수 있다.
뭐에 대하여 상대적인 것인가요??
그 "뭐" 를 어떻게 설정하냐에 따라 쓰는 상대 단위가 바뀐다고 생각한다.
하나씩 알아보자!!
%
%는 직계 부모 요소의 크기에 상대적으로 크기를 조절한다. 아래의 예시 코드를 보자.
<!DOCTYPE html>
<body>
<div class="box">
What is Lorem Ipsum?
</div>
</body>
/*style.css*/
.box {
width: 50%;
}box의 너비를 50%으로 설정해주었다.
이때 box의 직계 부모 요소는 body이고,별도의 스타일이 적용되지 않으면 body의 너비는 브라우저 창 전체의 너비를 차지한다.따라서 box의 너비는 body 너비의 50%(브라우저 창 전체 너비)를 차지한다. 당연하게도 브라우저 창 크기를 조절하면 box의 크기도 그에 비례하여 크기가 변경될 것이다.
margins 과 padding 을 백분율로 설정하는 건 지양하자!!
상단 및 하단 마진 %이 요소 높이의 %이고, 왼쪽 및 오른쪽 마진 백분율이 요소 너비의 %일 것으로 예상하지만 실제로 그렇지 않다. 즉 의도한 대로 안 나올 가능성이 있다.
(참고: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
vw, vh
vw는 viewport width,
vh는 viewport height로
화면(뷰포트) 크기에 상대적으로 크기를 조절한다.
100vw는 화면 너비의 100%,
1vw는 화면 너비의 1%이다.
vh도 같은 원리이므로 설명은 생략하겠다.
그렇다면 body나 body의 직계 자식의 width,를 100%로 지정하는 것과 100vw로 지정하는 것은 완전히 동일한 것 아닌가요??
그렇다!! 다만 vw가 조금 더 직관적으로 전체 화면에 꽉 채우라는 거구나~ 라고 와닿는다고 생각한다.
둘이 다르다고 뭐 스크롤바가 생기니 뭐니 하는 글을 봤었는데 내가 직접 비교해본 결과는 일치했다..애초에 퍼센트랑 vw vh 둘다 스크롤바 크기까지 고려한 크기이고..이에 대해서 아는 사람은 알려주세용
em
상위 요소의 글꼴 크기에 상대적으로 크기를 조절한다.
<body>
<div class="box">
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
Lorply dummy text of the printi
<div class="box-inner">
Lorem Ipsum is simply dummy text of the printing yIpsum? Lorem Ipsum is
simply dummy text of the printing Lorem Ipsum is simply dummy text
</div>
</div>
</body>body {
font-size: 5px;
}
.box {
font-size: 2em;
}
.box-inner {
font-size: 2em;
}css를 보면 box와 box-inner는 똑같이 font-size가 2em로 설정되었다.
하지만 결과를 보면 알듯이 그 크기는 다르다.
이유는 box은 상위요소인 body의 글씨 크기의 2배, 즉 5X2=10px 인 것이고, box-inner는 상위요소인 box의 글씨 크기의 2배, 즉 10X2=20px 이 적용되었기 때문이다!! 참고로 별다른 font-size의 설정을 하지 않으면 기본 값은 16px이다.
rem
em과 같이 상위요소의 글꼴 크기에 상대적인 것은 똑같다. 하지만 r은 root를 뜻하고, 상위긴 상위이지만 최상위이다
즉, "최"상위 요소의 글꼴 크기에 상대적으로 크기가 변한다. 여기서 말하는 최상위 요소는 html을 뜻한다. em 예제의 똑같은 html에 css만 아래와 같이 적용했다고 해보자.
body {
font-size: 5px;
}
.box {
font-size: 2rem;
}
.box-inner {
font-size: 2rem;
}
예상한대로 box와 box-inner의 글씨 크기는 동일하다.
둘다 최상위 요소의 font-size에 상대적이기 때문!!
위의 코드에서 body의 font-size를 아무리 바꿔도 box와 box-inner 글씨 크기는 똑같다.
너무나도 당연하게도 body가 최상위 요소가 아니기 때문...
만약 글씨 크기를 더 크게 하고 싶다면
html {
font-size: (원하는 크기)
}이렇게 최상위인 html에서 지정해주면 된다~
번외) em vs rem
em의 사용이 불가피한 경우가 아니라면 되도록이면 rem을 쓰는 것이 좋다
em은 부모 요소의 영향을 받는다는 점에서 변수가 많고, 유지보수가 어렵기 때문이다...
자 이렇게 CSS 단위에 대해서 대략 알아보았다.
그래서 무엇을 쓰라는 건가요??
사실 정답은 없고 그때그때, 필요한 상황에 따라 적절하게 사용하면 된다...
라는 진부한 대답도 할 수 있겠지만 나의 개인적 견해를 말해보자면
일단은 절대 단위보다는 상대 단위를 쓰는 것이 좋아보인다.
1. 레이아웃 관점
다양한 화면 크기와 디바이스에 대응하기 쉽기 때문이다. 다양한 디바이스에서 일관된 경험을 할 수 있도록 도와준다. 즉 반응형 만약 전체 box의 크기를 컴퓨터에 맞춰 1600px로 설정한다면, 폰으로 봤을 때는 가로 스크롤이 끝없이 넘겨야할 것이다. 만약 100vw로 설정한다면 어느 디바이스로 봐도 화면에 꽉차보이게 될 것이다!!
2. 글씨 크기 관점
font-size의 경우, 사용자가 기기나 브라우저 설정에서 글꼴 크기를 조정할 때, 상대 단위를 사용하면 콘텐츠의 크기도 그에 맞게 조정된다.
브라우저 내에서 글씨 크기를 조절할 수 있다!
크롬의 경우 setting -> appearance -> font-size 에서 조절가능~
만약 font-size를 다 절대 단위로 박아버리면 크기가 고정되어 모든 브라우저 설정을 덮어버려서 font-size을 키우고 싶어도 못 키우고,,줄이고 싶어도 못 줄이는 슬픈 상황이 생긴다.
font-size를 상대 단위로 했을 때에는 유동적으로 크기가 변한다!!
밑은 font-size를 very small로 설정했을때
밑은 font-size를 very large로 설정했을때
이는 사용자 경험 개선에 도움을 준다
그래서 뭘 쓰는게 좋냐고..
사람마다, 또 어플리케이션의 성격에 따라 다르겠지만, 본인만의 기준을 갖고 하는 것이 좋다고 생각한다.
나의 경우 font-size,margin,padding는 무조건 rem,
전체적 레이아웃은 %나 가끔은 vw,vh,
세부적 레이아웃은 rem이나 가끔은 %을 주는 것을 선호한다.
