CSS
[CSS] Font Size
Dongi
2021. 12. 24. 12:21
안녕하세요 동기 여러분! 오늘은 폰트 사이즈를 바꾸는 방법에 대해 알아봅시다.
Font Size
p {
font-size: 14px;
}
잉? 이게 다입니다ㅋㅋㅋㅋ
하지만 이밖에도 더 많은 단위가 있으니...
Pixel(px)
가장 보편적으로 사용하는 폰트 사이즈의 크기를 나타내는 단위
p {
font-size: 16px;
}
em(The root element's font-size) 뿌리(최상위) 요소의 폰트 사이즈!!!
현재 HTML 문서에 지정된 폰트 사이즈의 크기에 비례하여 폰트 사이즈의 크기를 나타내는 단위
(예를 들어 현재 HTML 문서의 폰트 사이즈가 14px라고 치면 1rem은 14px, 2rem은 28px입니다.)
<p>안녕하세요!</p>
* {
font-size: 14px;
}
p {
font-size: 2rem; /* 최상위 폰트 사이즈가 14px이므로 2rem은 28px */
}
em
현재 부모 요소에 지정된 폰트 사이즈 크기에 비례하여 폰트 사이즈의 크기를 나타내는 단위
(예를 들어 현재 div 태그에 있는 폰트사이즈가 16px이고 그의 자식 태그인 p가 있다면 CSS에서 p의 폰트 사이즈를 1em 이라 할 때 그 크기는 16px, 2em이라면 32px입니다.)
<div>
<p>안녕하시유!</p>
</div>
* {
font-size: 1000px;
}
div {
font-size: 16px;
}
p {
font-size: 2em; /* em으로 설정하였기 때문에 부모 요소의 폰트 사이즈의 영향을 받아 2em = 32px가 된다. */
}
※ rem? em?
쉽게 말해 rem은 최상 위에 있는 폰트 사이즈의 기준으로 크기가 변하고 em은 바로 위에 있는 폰트 사이즈의 기준으로 크기가 변합니다. (rem -> 1대 조상님 폰트 사이즈, em -> 부모님 폰트 사이즈)
그밖에 폰트 사이즈
사이즈 | 설명 |
medium | 중간 크기 - 기본 크기 - 16px (브라우저 마다 다를 수 있음) |
xx-small | 더더 작은 크기 - 9px |
x-small | 더 작은 크기 - 10px |
large | 큰 크기 - 18px |
x-large | 더 큰 크기 - 24px |
xx-large | 더더 큰 크기 - 32px |
smaller | 부모 요소보다 작은 크기 |
larger | 부모 요소보다 큰 크기 |
length | 길이로 정하는 크기 length를 눌러보자. |
% | 부모 요소의 폰트사이즈를 퍼센트의 비율로 바뀌는 크기 |
initial | 기본 값으로 돌리기 |
inherit | 부모 요소의 값을 그대로 가져옴 |
오늘의 느낌
할말이 없음... ㅋㅋ