인라인 CSS란 무엇인가?
HTML 문서에 스타일을 적용하는 방법은 크게 인라인 CSS(Inline CSS)와 외부 CSS(External CSS) 두 가지로 나눌 수 있습니다. 이 중 인라인 CSS는 HTML 요소에 직접 스타일을 지정하는 가장 간단한 방식으로, 별도의 스타일시트 파일 없이 해당 요소에만 즉시 스타일을 적용할 수 있다는 장점이 있습니다.
인라인 CSS는 모든 HTML 요소에서 사용할 수 있는 style 속성을 통해 정의합니다. 이렇게 지정한 스타일 규칙은 해당 요소에만 적용되며, 다른 요소에는 영향을 주지 않습니다.
기본 문법
인라인 스타일의 일반적인 작성 형식은 다음과 같습니다.
<element style="...스타일 규칙...">
style 속성 정리
| 속성 | 값 | 설명 |
|---|---|---|
| style | 스타일 규칙 | style 속성의 값은 세미콜론(;)으로 구분된 여러 스타일 선언문의 조합입니다. 예를 들어 color:#800000; font-size:16px;처럼 여러 속성을 한 번에 지정할 수 있습니다. |
인라인 CSS 예제
다음 예제는 <h2> 요소에 인라인 스타일을 적용하여 글자 색상을 변경하는 코드입니다.
<html> <head> </head> <body> <h2 style="color:#800000;"> This is inline CSS </h2> </body> </html>
위 코드를 브라우저에서 실행하면, <h2> 태그로 감싸진 텍스트가 마룬색(#800000)으로 표시됩니다. 이처럼 인라인 CSS는 특정 요소 하나에만 빠르게 스타일을 테스트하거나 적용할 때 유용합니다.
인라인 CSS 활용 시 참고 사항
인라인 CSS는 간편하지만, 스타일이 HTML 코드 안에 섞이기 때문에 코드 재사용성이 떨어지고 유지보수가 어려워질 수 있습니다. 따라서 실무에서는 전체 사이트의 일관된 디자인을 위해서는 외부 CSS 파일을 사용하고, 인라인 스타일은 빠른 테스트나 특정 요소의 일회성 스타일 지정에 활용하는 것이 좋습니다.