CSS를 접하다 보면 크기를 지정하는 단위를 많이 사용하게된다. 웹디자인을 할당시 주로 px(필셀) 단위와 폰트 크기를 결정하는 pt(포인트)를 주로 사용했는데 이런 단위는 '절대 길이 단위'로 인쇄할때 주로 이용되는 단위라고 한다.
다양한 디바이스가 존재하고 pc, 모바일, 태블릿 등 반응형 사이트에서 절대 길이 단위는 사용을 권장하지 않는다고 하는데..
개발할땐 어떤 단위를 주로 사용해야 하는걸까? 🤔
절대 길이 단위
절대 길이 단위에는 cm, mm, in, pc, pt, px 등 다양한 단위가 있지만 주로 사용하는 px 만 살펴보겠습니다.
px은 디바이스 화면에서 이미지를 표현하는 가장 작은 단위 입니다. 또한 고정된 값이라 직관적으로 쉽게 사용할 수 있다는 장점이 있습니다. 단, 개발시 px 사용은 권장되지 않습니다.
❗️px 사용을 권장하지 않는 이유
- 다양한 디바이스가 생겨나면서 필셀 밀도도 다양해짐(해상도), 절대 단위 값 사용 시 디바이스 별로 다른 위치에 있거나 크기가 달라지는 문제 발생
- 저시력자 들은 본인의 디바이스 폰트크기를 임의로 조절하는 경우가 잦은데 px 단위로 고정이 되면 조절을 할 수 없어 웹 접근성에 벗어남
- 반응형 사이트 이용시 px 값으로 고정된 요소들은 유동적으로 변경이 되지 않아 대응할 수 없음
상대 길이 단위
상대 길이 단위는 다른 요소의 영향을 받습니다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되어 반응형에 대응하거나 디바이스 마다 공통된 사용성을 줄 수 있다는 장점이 있습니다.
% vw vh vmin vmax em rem
- % : 부모 요소를 기준으로 하는 백분율 단위
- vw, vh : 뷰포트(화면) 넓이(w), 높이(h)를 기준으로 하는 백분율 단위 ex) 1vw = 전체 화면의 1%
주의⚠️ㅣ <iframe> 태그를 사용하면 다른 페이지 안에 속하게 되므로 작동하지 않음 - em : 부모요소로부터 상속받은 요소의 글자 크기를 기준으로 하는 배수 단위
✅ 부모로부터 상속 받기 때문에 각 중첩 부분은 부모로부터 배수가 되어 부모와 같음 em 단위를 쓰면 배로 커짐 - rem (root em) : 최상위 요소 <html>의 글자 크기를 기준으로 하는 배수 단위
✅ <html>의 기본 폰트 사이즈는 16px 이다.
/* html 기본 폰트 값을 10px 로 설정한 상태 */
/* div의 폰트크기를 20px 로 설정한 상태 */
/* 각각의 박스들은 <div class="단위">단위명</div> 로 묶인 상태 */
.px { width: 100px; height: 100px; }
.em { width: 10em; height: 10em; }
/* div로 부터 상속 받은 글자의 크기가 20px 이므로 20*10 = 200px 크기의 박스가 생성됨 */
.rem { width: 10rem; height: 10rem; }
/* 최상위 글자 크기가 10px 일때 10*10 이므로 px 기준 100px */
.vw-vh { width: 10vw; height: 10vh; }
/* 아래 예제 이미지에서 브라우저의 넓이가 좁아진 상태에서 캡쳐함 */
em, rem 사용을 권장하는 이유는? 🤔
협업을 할 경우 글자 크기를 전체적으로 크게 또는 작게 수정해다랄는 요청사항이 많이 온다. 유지보수성을 생각했을때 하나의 기준 사이즈를 설정해 두면 폰트 크기를 기준으로 요소 하나만 변경하면 나머지는 그 기준에 맞게 일괄적으로 변경되기 때문에 사용을 권장한다.
✅ 배수로 계산하여 사이즈를 결정한다는 것은 동일하지만 em과 rem의 가장 큰 차이점은 기준점이다 em은 요소의 글꼴 크기를 1em으로 만약 해당 요소의 글꼴 크기가 없다면 부모 요소의 글꼴 크기를 1em으로 갖으며 rem 은 최상위 요소인 html을 기준으로 가지므로 html의 기본 폰트 사이즈인 16px을 1rem으로 갖는다.
❓ em 은 언제 쓰이고 rem은 언제 쓰일까?
em을 사용하게 될 때 영향을 받게 되는 변수 px들이 많아지기 때문에 실제론 많은 CSS 가이드 들이 em을 사용해야 하는 타당한 이유가 없다면 rem을 우선적으로 사용하기를 권고한다.
만약 rem과 em을 혼용하여 사용하게 된다면 페이지 어디에 사용해도 사이즈가 고정되어야 하는 곳엔 rem을 부모 요소에 따라 유동적으로 변화해야 하는 곳엔 em을 사용하는 것이 좋다. paddig 이나 margin등 화면에 따라 유연하게 변하는 크기는 em을 많이 사용한다.
/ 위 내용에서랑 강의에서 보통 padding, margin 값은 em 을 쓰라고 하는데 이해가 잘 안됨 걍 rem으로 쓰면 안되나?/
아래는 자세하게 em과 rem을 정리한 글인데 다시 자세히 읽어보는게 좋을듯하다
https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984
'dev > HTML CSS' 카테고리의 다른 글
| [html] img 사용 이유와 관련 속성 (2) | 2023.03.19 |
|---|---|
| [CSS] flex-cotainer, item (0) | 2023.03.11 |
| [CSS] float 사용 후 clear를 사용하는 이유는 뭘까 (0) | 2023.03.11 |
| [CSS] overflow (0) | 2023.03.09 |
| [CSS]선택자 결합자, 가상(의사) 클래스, 가상(의사) 요소 (0) | 2023.03.05 |
댓글