상대적인 값
em
타이포그래피에서 현재 지정된 포인트 사이즈를 나타내는 단위
부모 사이즈의 상대적으로 크기가 계산되어 진다.
<div class="parent">
parent
<div class="child"> child</div>
</div>.parent {
font-size: 8em; /* 128px */
}
.child {
font-size: 0.5em; /* 64px */
}
브라우저에서 HTML에 할당되는 기본폰트 사이즈는 16px이다.
.parent 사이즈가 8em이라는 것은 부모요소인 HTML16px의 8배가 곱해진 값.
.parent는 16px * 8 = 128px 로 브라우저에 표기됨.
parent안에 있는 .child의 폰트사이즈 0.5em은 부모인 parent의 0.5배가 계산되어진 128px * 0.5 = 64px 로 브라우저에 표기가 된다.
이때 %로 지정할 경우의 폰트사이즈는 .parent 는 800% 가되고 .child는 부모의 폰트사이즈에서 50%로 나타낼 수 잇다. 동일한 결과값이 나옴.
rem
em에서 root를 나태는 r이 더해진 단위로 부모에 따라 사이즈가 계산되는 것이 아니라
루크에 지정된 폰트사이즈에 따라 크기가 결정되는 단위.
.parent {
font-size: 8rem; /* 128px */
}
.child {
font-size: 0.5rem; /* 8px */
}
viewport 에 관련된 단위 (vw, vh, vmin, vmax)
vw
- 100vw는 viewport width 너비의 100%로 쓴 값
- 50vw는 viewport width 너비의 50%로 사이즈를 지정한다.
vh
- viewport height
vmin
- vmin은 브라우저의 너비와 높이 중 작은 값의 50%
vmax
- vmax는 라우저의 너비와 높이 중 큰 값의 50%
%
부모요소의 상대적으로 크기가 계산되는 단위
위의 em대신 %로 계산하게 되면 아래와 같다.
.parent {
font-size: 800%; /* 128px */
}
.child {
font-size: 50%; /* 64px */
}
총정리
부모요소의 사이즈에 따라서 사이즈가 변경되야한ㄴ다면 %나 em과 같은 단위를 사용한다.
부모와 상관없이 브라우저 기준의 사이즈에따라 반응해야하면 부포트단위인 vm,vh나 rem을 사용하면된다.
요소의 너비와 높이에 따라 사이즈가 변경되야하면 %나 부포트단위인 vm,vh를 사용하면 된다.
폰트사이즈에 따라서 사이즈가 반응해야하면 em과 rem을 사용한다.
예제
버튼의 컴포넌트
버튼의 폰트를 rem을 사용해서 만들게되면 root의 폰트사이즈에 다라 크기가 결정되기 때문에
최상단의 body나 다른 컴포넌트 안에서 사용할때와 크기의 변동사항이없다.
em을 사용해서 만든다면 body에 서 사용할때와 부모요소에서 사용햇을대 크기차이가 달라지게 된다.
페이지 어디에서 사용되어져도 사이즈가 그대로 고정되야한다면 rem
어디에서 사용되냐에따라 사이즈가 유동적으로 변경되야하면 em을 사용한다.
html 예제
<body>
<div class="level1">
<h1>level 1</h1>
<div class="level2">
<h1>level 2</h1>
<div class="level3">
<h1>level 3</h1>
<div class="level4">
<h1>level 4</h1>
</div>
</div>
</div>
</div>
</body>em 예제
body { font-size: 16px; }
.level1 { font-size: 2em; /* 32px */ }
.level2 { font-size: 2em; /* 64px */ }
.level3 { font-size: 2em; /* 128px */ }
.level4 { font-size: 2em; /* 256px */ }rem 예제
body { font-size: 16px; }
.level1 { font-size: 2rem; /* 32px */ }
.level2 { font-size: 2rem; /* 32px */ }
.level3 { font-size: 2rem; /* 32px */ }
.level4 { font-size: 2rem; /* 32px */ }
'UXUI Development > CSS' 카테고리의 다른 글
| [CSS] border effect css (0) | 2020.07.22 |
|---|---|
| [CSS] 배경이미지 종횡비율 유지 반응형 적용 (0) | 2020.05.20 |
| [CSS] PNG, SVG 파일 CSS로 색상 변경하기 (0) | 2019.01.14 |
| [CSS] 페이지의 하단에 footer 고정 시키기 (0) | 2019.01.10 |
| [CSS3] Flexbox (display:flex, justify-conent, align-items, flex-grow, flex-basis) (0) | 2018.07.16 |
| [CSS3] Animation 애니메이션 CSS (@keyframes) (0) | 2018.07.16 |
| [CSS3] Transition CSS 트랜지션 (0) | 2018.07.05 |
| [CSS3] Transform 속성 (0) | 2018.07.04 |