px / %
- px : 해상도에 따른 상대 단위. (해상도에 따라서 px 단위가 조금씩 변함)
- % : 부모요소의 가로 사이즈에 영향을 받는다.
em / rem
- em : 자기 자신의 폰트 사이즈의 영향을 받음
- rem : HTML에 지정된 폰트사이즈에만 영향을 받음
em
위의 예시의 경우 600px을 10px로 나누면 60이므로 60em으로 단위를 고치면 600px과 동일한 값을 가진다.
container > parent > child의 구조인데 font 속성의 경우 상속되는 속성이므로 자식(하위)요소에 font-size가 명시되어 있지 않으면 부모(상위)요소들로부터 font-size를 상속받아 font-size: 10px로 설정되어 있다고 생각하면 된다.
만일 .parent의 font-size를 2em으로 바꾸게 된다면 기존에 있던 자기 자신의 폰트사이즈(상속받은 font-size: 10px)의 2배를 뜻하므로 2배로 커지게 된다.
또한 그 아래 자식요소인 .child의 font-size에도 2em을 작성하게되면 .parent로 부터 상속받은 폰트 사이즈의 2배이므로 .parent의 글씨보다 2배 더 커지게 된다.
이와 같이 em을 통해 단위를 작성하면 이 단위는 font-size에영향을 받게 되고, font-size가 조정되면 영향을 받는 모든 부분의 크기가 변형되게 된다.
따라서 특정한 부모요소나 조상요소에 절대적인 값을 px단위로 입력해놓고 그 이하는 그 값에 변형되도록 설정할 때 em단위를 사용한다.
단점: 연결된 상위요소들을 타고 올라가면서 영향을 받는 관계들을 이해해야하기 때문에 위에서부터 내려오면서 중간 부분에 폰트 사이즈를 지정하기 애매한 부분이 생기면 em이라는 단위에 영향을 주기 때문에 관리하기 어렵다.
rem
이럴 때 사용하는 단위가 rem이다. rem에서 r은 루트를 뜻한다.
중간 단계를 건너뛰고 최종단계, 가장 조상요소인 HTML 태그에 지정된 폰트 사이즈에만 영향을 받는 것이다.
만일 HTML font-size의 영향을 받고 싶지 않다면 그 아래에 body font-size를 지정해주면, rem은 HTML의 폰트 사이즈 영향을 받으면서 폰트를 조정해주면 된다.
vw / vh
- vw: viewport width (뷰포트 가로너비)
- vh: viewport height (뷰포트 세로너비)
- 기본적인 단위는 백분율(%)로 나타남
따라서 만일 width: vw 를 입력하면 100%로 뷰포트 너비에 가득차게 차지하게 되고, width: 50vw 를 입력하면 전체너비의 절반을 차지한다. 뷰포트의 너비가 줄어들면 줄어드는 만큼 절반만 사용한다.
vmin / vmax
- vmin: viewport minimum (뷰포트 최소너비) = 현재 뷰포트의 더 짧은 너비
- vmax: viewport maximum (뷰포트 최대너비) = 현재 뷰포트의 더 넓은 너비
width를 50vmax로 설정했을 때, 만일 뷰포트의 너비가 가로가 길고 세로가 짧은 형태라면 vmax는 뷰포트의 현재 더 넓은 사이즈를 의미한다.
반대로 vmin은 뷰포트의 더 짧은로 width값을 설정하게 된다. (백분율(%))
예시
width 값을 vmax 단위로 작성해보자
width: 50vmax
- 뷰포트의 가로가 더 길 경우: 50vmax는 가로사이즈의 50%. 뷰포트의 가로너비의 50%만큼을 가로너비로 가진다.
- 뷰포트의 세로가 더 길 경우: 50vmax는 세로사이즈의 50%. 뷰포트의 세로너비의 50%만큼을 가로너비로 가진다.
