HTML에서 인라인 CSS를 추가하려면 style 속성을 사용합니다. style 속성은 특정 요소에 개별적인 스타일을 직접 지정할 수 있게 해주며, font-family, font-style, text-decoration, direction 등 다양한 CSS 속성과 함께 활용할 수 있습니다.
단, 한 가지 주의할 점이 있습니다. style 속성으로 지정한 스타일은 전역으로 설정된 스타일보다 항상 우선 적용됩니다. 즉, HTML의 <style> 태그나 외부 스타일 시트에서 정의한 스타일을 모두 덮어쓰기(오버라이드)하게 됩니다.
예제
아래 코드를 실행하면 HTML에서 인라인 CSS를 사용하는 방법을 직접 확인할 수 있습니다. 이 예제에서는 인라인 CSS를 이용해 제목(h1) 요소의 글자 크기를 지정했습니다.
<!DOCTYPE html> <html> <head> <title>HTML Inline CSS</title> </head> <body> <h1 style="font-size: 20px;"> Tutorials </h1> <p>We have tutorials on Programming, CMS, Scripting Languages, etc.</p> </body> </html>
인라인 CSS 사용 시 참고 사항
- 높은 우선순위: style 속성은 <style> 태그나 외부 스타일 시트보다 우선 적용되므로, 의도치 않게 기존 스타일을 덮어쓸 수 있습니다.
- 유지보수의 어려움: 스타일이 각 태그에 분산되어 재사용이 어렵고, 코드가 길어질수록 관리가 번거로워집니다.
- 적합한 용도: 빠른 테스트, 일회성 스타일 적용, 이메일 템플릿처럼 외부 스타일 시트를 사용하기 어려운 환경에 적합합니다.
따라서 실무에서는 대부분 외부 스타일 시트를 기본으로 사용하고, 인라인 CSS는 필요한 경우에만 선택적으로 활용하는 것이 좋습니다.