minstory
CSS Units 본문
em
button {
font-size: 1em; //부모 요소 폰트 크기의 1배
padding: 0 1em; //현재 요소 폰트 크기의 1배
border-radius: 0.5em; //현재 요소 폰트 크기의 0.5배 곡률 유지
}이렇게 하면 폰트 크기가 바뀌더라도 button 곡률은 망가지지 않고 모양이 유지된다.
*단점: 부모 요소의 글꼴 크기에 따라 달라지기 때문에 예를 들어 <ul> 중첩될 때 제곱한 만큼 크기가 바뀐다.
그래도 <button> border-radius 설정할 땐 유용함. 버튼 테두리 곡률은 버튼내부 글씨 크기에 영향을 받기 때문
rem
부모 요소 말고 root element ( <html> ) 글씨의 배수로 크기 설정
'HTML & CSS' 카테고리의 다른 글
| CSS flexbox (0) | 2022.07.03 |
|---|---|
| CSS transition (0) | 2022.06.28 |
| CSS box model (0) | 2022.06.21 |
| CSS selector (0) | 2022.06.16 |
| CSS review (0) | 2022.06.15 |
Comments