css속성에 크기나 길이값을 적용할 때 사용하는 여러가지 단위들이 있다.
px/em/rem/ex/%/cm/mm/in/pt/pc/ch/vh/vw/vmin/vmax.. 이렇게 아주 많은데 각각의 개념을 알고 적절히 잘 사용할 필요가 있다. DND 슬편생 프로젝트에서는 rem 단위를 메인으로 사용했다.
서비스 URL -> https://www.wise24life.site
많이 사용되는 px,em,rem
1.px(절대 길이)
px은 웹개발에서 가장 많이 사용되는 단위이다. 화면의 한개의 점이라고 보면 된다.기기의 해상도에 따라서 크기가 달라진다.
2. em(상대 길이)
바로 위 부모 요소의 font-size에 대해 상대적인 값으로 계산되도록 하는 단위이다. 만약 부모요소의 font-size가 16px이라면 자식요소의 1em은 16px이 된다. 즉 (n)em 은 (n*16)px 이다. 계산 결과는 소수점 세자리까지 반영된다.
3. rem(상대 길이)
Root Em. 즉 상대적인 값으로 계산되도록 하나 그 기준을 html(root) 태그의 font-size로만 하겠다는 것이다.계산법은 위 em과 동일하다.
rem만 사용했어요! 🧐왜?
em은 다루기 까다로운 단위이다. 위 부모요소의 font-size 크기를 알고 있어야 하기 때문이다. 그러기에 코드의 직관성도 떨어진다. px 을 사용한다면 직관적이고 디자이너의 의도를 가장 잘 반영해 줄 수 있지만 웹 접근성에 문제가 생긴다.
사용자가 설정탭에서 임의로 브라우저의 기본 폰트 사이즈의 크기를 임의로 키우거나 작게 설정할 때 px로 크기를 지정한다면 아무리 설정을 바꿔도 콘텐츠의 사이즈가 고정이 되어 눈이 잘 안보이는 사용자가 브라우저의 기본 폰트 사이즈를 바꾸는 경우 대응해 줄 수 없다.
이때, rem으로 콘텐츠의 크기를 지정해 놓는다면 설정 탭에서 설정한 기본 font-size는 루트 요소의 font-size가 되므로 설정에 따라 콘텐츠의 크기가 변한다. velog 서비스의 경우 기본 폰트 사이즈 설정에 따라 컨텐츠 크기가 변하는 걸 볼 수 있다.
따라서, 웹접근성을 고려하여 rem단위를 사용하기로 하였고 폰트크기 변경으로 인해 레이아웃이 깨지는 것(ex.글씨가 버튼을 빠져나감.)을 방지하기 위해 모든 요소의 크기를 rem으로 지정했다.
그러나 rem단위도 상대적인 크기를 계산하게 되기 때문에 직관적으로 계산할 수 있도록 처리를 해둘 필요가 있다.
Rem단위 계산을 직관성 있게 해보자. 62.5%
루트 요소의 기본 폰트 사이즈가 10px로 설정하면 1rem은 10px이 되어 rem값에서 10을 곱하면 되므로 직관적으로 계산을 할 수 있게 된다. 웹 브라우저의 기본 폰트사이즈가 대게 16px 인데, 10px로 만들어 주기 위해 이를 62.5%만큼 축소시켜주면 된다.
html {
font-size: 62.5%;
}
