-
CSS - em , rem , vw , vh , %기타 2023. 4. 28. 11:18
CSS 작업을 할 때, 원리를 파악하지 못 하고 복붙해서 사용해왔다.
그래서 앞으로 em과 rem, vw와 vh, % 에 대해 정리해보려고 한다.
em, rem
-> 상대 단위로, 고정되지 않고 특정 기준에 따라 유동적으로 바뀌는 수치를 지정할 수 있다.
em 과 rem은 둘 다 font-size를 기준으로 변화하는 단위이다.
차이점으로 rem은 최상위 요소인 html의 font-size를 기준으로 변화한다.
em은 해당 단위가 사용되고 있는 요소의 font-size를 기준으로 변화한다.
따라서 css를 작성할 때
rem은
// 최상위 요소에 font-size를 지정하고, html{ font-size: 10px; } // 원하는 요소에 rem을 사용하자 .class{ width: 10rem; }
em은
// 최상위 요소가 아닌, 단위가 사용되고 있는 요소를 기준으로 하고싶을 때 .class{ font-size: 15px; width: 10em; }
형태로 사용하자.
vw , vh , %
-> 상대 단위의 일종으로, em과 rem이 font-size를 기준으로 잡았다면,
vw , vh 는 화면 전체 넓이를 기준으로 하고, % 는 부모의 범위를 기준으로 잡는다.
.class{ font-size: 50vw; -> 화면 전체 넓이의 50프로 }
font-size 도 vw , vh로 설정할 수 있으므로, em과 혼합해서 사용할 수 있다.
'기타' 카테고리의 다른 글
반응형 웹 레이아웃 만들기 (0) 2023.05.15 최대 공약수, 공배수 구하기 // 코테 (0) 2023.05.11 JavaScript에서 생성자를 초기화하면 메소드들이 실행된다. (0) 2023.04.26 git pull 오류 ( Synchronize 가 맞지 않을 때 ) (0) 2023.04.19 org.springframework.beans.factory.BeanCreationException (0) 2023.04.18