HTML에서 글꼴 크기 변경하기
HTML에서 글꼴 크기를 변경하려면 style 속성을 사용합니다. style 속성은 요소에 인라인(inline) 스타일을 직접 지정하는 역할을 하며, CSS의 font-size 속성과 함께 HTML의 <p> 태그 등 다양한 요소에 적용할 수 있습니다.
특히 주의할 점은 HTML5에서는 예전에 사용되던 <font> 태그를 더 이상 지원하지 않는다는 것입니다. 따라서 현재 웹 표준에서는 글꼴 크기를 설정할 때 반드시 CSS 스타일을 사용해야 합니다.
인라인 스타일 사용 시 주의사항
style 속성으로 지정한 인라인 스타일은 전역(globally)으로 설정된 스타일보다 우선순위가 높습니다. 즉, HTML 문서 내 <style> 태그나 외부 스타일시트(CSS 파일)에서 이미 정의한 스타일이 있더라도, 인라인 스타일이 이를 덮어쓰게(override) 됩니다. 의도하지 않은 스타일 충돌을 피하려면 이 점을 반드시 기억해 두어야 합니다.
예제 코드
아래 예제 코드를 실행하면 HTML 페이지에서 글꼴 크기를 실제로 변경하는 모습을 확인할 수 있습니다. 제목(h1)에는 40px, 본문(p)에는 18px의 글꼴 크기를 각각 적용했습니다.
<!DOCTYPE html> <html> <head> <title>HTML Font size</title> </head> <body> <h1 style="color:red;font-size:40px;">Heading</h1> <p style="color:blue;font-size:18px;">This is demo text</p> </body> </html>