HTML에서 작은 글꼴 설정하기
HTML에서 기본 크기보다 작은 글꼴을 적용하려면 style 속성을 사용하면 됩니다. style 속성은 요소에 인라인(inline) 스타일을 지정하는 역할을 하며, HTML의 <p> 태그와 함께 CSS의 font-size 속성을 조합하여 사용합니다.
참고로 HTML5에서는 예전에 글꼴 크기를 조절하던 <font> 태그를 더 이상 지원하지 않습니다. 따라서 현재는 CSS 스타일을 통해 글자 크기를 지정하는 것이 표준적인 방법입니다.
style 속성 사용 시 주의사항
style 속성으로 지정한 스타일은 다른 모든 전역(global) 스타일보다 우선적으로 적용된다는 점을 기억해야 합니다. 즉, HTML 문서 내 <style> 태그나 외부 스타일 시트에서 설정한 값이 있더라도, 인라인 style 속성이 그것을 덮어쓰게(override) 됩니다.
예제 코드
아래 코드를 실행하면 HTML 페이지에서 기본 글꼴보다 작은 텍스트를 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML smaller font</title> </head> <body> <h1>Heading</h1> <p>This is demo content.</p> <p style="color:blue;font-size:11px;">This text will be smaller.</p> </body> </html>
위 예제에서 세 번째 <p> 태그에는 font-size:11px가 적용되어 있어 일반 본문 텍스트보다 작게 표시되며, 동시에 color:blue로 파란색 글자가 적용됩니다.
실행 결과
