CSS 글꼴 크기
글꼴 크기
font-size속성은 텍스트의 크기를 설정합니다 .
웹 디자인에서 텍스트 크기를 관리하는 것은 중요합니다. 그러나 단락이 제목처럼 보이거나 제목이 단락처럼 보이도록 글꼴 크기 조정을 사용해서는 안 됩니다.
제목에는 <h1> - <h6>, 단락에는 <p>와 같이 항상 적절한 HTML 태그를 사용하세요.
font-size 값은 절대 또는 상대 크기일 수 있습니다.
절대 크기:
- 텍스트를 지정된 크기로 설정
- 사용자가 모든 브라우저에서 텍스트 크기를 변경하는 것을 허용하지 않습니다(접근성 이유로 좋지 않음)
- 출력의 물리적 크기를 알고 있는 경우 절대 크기가 유용합니다.
상대적 크기:
- 주변 요소를 기준으로 크기를 설정합니다.
- 사용자가 브라우저에서 텍스트 크기를 변경할 수 있습니다.
참고: 글꼴 크기를 지정하지 않으면 단락과 같은 일반 텍스트의 기본 크기는 16px(16px=1em)입니다.
픽셀로 글꼴 크기 설정
텍스트 크기를 픽셀로 설정하면 텍스트 크기를 완전히 제어할 수 있습니다.
예시
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
팁: 픽셀을 사용하는 경우에도 확대/축소 도구를 사용하여 전체 페이지의 크기를 조정할 수 있습니다.
Em으로 글꼴 크기 설정
사용자가 브라우저 메뉴에서 텍스트 크기를 조정할 수 있도록 하기 위해 많은 개발자가 픽셀 대신 em을 사용합니다.
1em은 현재 글꼴 크기와 같습니다. 브라우저의 기본 텍스트 크기는 16px입니다. 따라서 1em의 기본 크기는 16px입니다.
크기는 다음 공식을 사용하여 픽셀에서 em까지 계산할 수 있습니다. 픽셀 /16= em
예시
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
위의 예에서 em의 텍스트 크기는 픽셀 단위의 이전 예와 동일합니다. 그러나 em 크기를 사용하면 모든 브라우저에서 텍스트 크기를 조정할 수 있습니다.
불행히도 이전 버전의 Internet Explorer에는 여전히 문제가 있습니다. 텍스트는 크게 만들면 원래보다 커지고 작게 만들면 원래보다 작아집니다.
퍼센트와 Em 조합 사용
모든 브라우저에서 작동하는 솔루션은 <body> 요소에 대한 기본 글꼴 크기를 백분율로 설정하는 것입니다.
예시
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
이제 코드가 훌륭하게 작동합니다! 모든 브라우저에서 동일한 텍스트 크기를 표시하고 모든 브라우저에서 텍스트를 확대/축소하거나 크기를 조정할 수 있습니다!
반응형 글꼴 크기
vw텍스트 크기는 "뷰포트 너비"를 의미 하는 단위로 설정할 수 있습니다 .
그렇게 하면 텍스트 크기가 브라우저 창의 크기를 따릅니다.
헬로월드
브라우저 창의 크기를 조정하여 글꼴 크기가 어떻게 조정되는지 확인합니다.
예시
<h1 style="font-size:10vw">Hello World</h1>
뷰포트는 브라우저 창 크기입니다. 1vw = 뷰포트 너비의 1%. 뷰포트의 너비가 50cm인 경우 1vw는 0.5cm입니다.