REM 2

[CSS] em과 rem 비교 (feat. 브라우저 기본 설정 폰트 크기)

1)공통 em과 rem 단위를 쓰면 디자인이 유연해지면서 고정된 크기에만 머무는 게 아니라 구성 요소의 크기를 늘리고 줄이는 게 가능해집니다. 브라우저 사용자는 전체 사이트의 크기를 조절해 가면서 읽기에 가장 적합한 환경을 손수 구성할 수도 있습니다. 2)em 단위의 한계 (연쇄 상속) 일반적으로 폰트 크기는 px 혹은 vw와 같이 상속에 영향을 받지 않는 단위를 지정해주지 않는 한 자동으로 상위 요소로부터 그 값을 상속 받는다. 그런데 이 상속으로 인해 em 단위를 가지고 작업을 할 때 복잡한 상황에 처할 수 있다. em 단위는 사용된 요소의 폰트 크기에 따라 결정됩니다. 그런데 사용된 요소의 폰트 크기는 상위에 있는 요소로부터 폰트 크기를 상속 받았을 수도 있고, 그 상위 요소도 마찬가지로 그 위의 ..

[HTML,CSS] 2023.04.25

[HTML,CSS] CSS 기본 단위(px, em, rem, % 등) 및 브라우저 영역viewpoint 기준 단위(vw,vh)

1.CSS의 기본 단위 CSS의 단위로는 절대 단위와 상대 단위가 있다. 절대 단위로 px, 상대 단위로 em, rem, vh, vw 등이 있다. 대부분의 브라우저에서는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100% 로 이루어져 있다. 1)절대 단위 px 반응형 웹에는 적절하지 않다. 그렇기 때문에 웹 디자인할 때에는 px 를 권장하지 않는다. 2)상대 단위 (1)em과 rem em은 실제 사용된 요소의, rem은 최상위(루트) 요소( 태그)의 글자 크기(font-size)를 기준으로 가변한다. 즉 em과 달리 rem은 태그 요소의 글자 크기만 참조한다. 등 다른 태그의 글자 크기와 상관없다. em 단위가 상위 요소의 폰트 크기와 직접 연관되어 있다고 잘못 알려져 있다. W3 명세서의 의..

[HTML,CSS] 2023.04.20