인라인 CSS란 무엇인가?
HTML에서는 모든 요소(element)에 사용할 수 있는 style 속성을 통해 스타일 규칙을 직접 정의할 수 있습니다. 이렇게 정의된 규칙을 인라인 CSS(Inline CSS)라고 부르며, 해당 스타일은 오직 그 요소 하나에만 적용됩니다.
인라인 방식은 외부 스타일시트나 내부 스타일 블록 없이 특정 요소에만 빠르게 스타일을 적용하고 싶을 때 유용합니다. 다만 코드 재사용성이 떨어지므로, 실무에서는 간단한 테스트나 일회성 스타일 적용에 주로 활용됩니다.
기본 문법
style 속성을 사용하는 일반적인 문법은 다음과 같습니다.
<element style="...스타일 규칙...">
즉, 스타일을 적용하려는 HTML 태그 안에 style 속성을 추가하고, 속성값으로 CSS 선언(속성: 값 형태)을 작성하면 됩니다. 여러 개의 스타일 규칙이 필요하다면 세미콜론(;)으로 구분하여 나열할 수 있습니다.
예제 코드
다음은 <p> 태그에 style 속성을 사용해 글자 색상을 파란색(#36C)으로 지정하는 예제입니다.
<html>
<head>
</head>
<body>
<p style="color:#36C;"> This is inline CSS </p>
</body>
</html>위 코드를 브라우저에서 실행하면 "This is inline CSS"라는 문장이 지정한 색상으로 표시되며, 이 스타일은 해당 <p> 요소에만 영향을 미칩니다.
참고 사항
- 인라인 스타일은 우선순위가 높아 외부 CSS나 내부 CSS보다 나중에 적용됩니다.
- 유지보수와 코드 가독성을 고려하면, 대규모 프로젝트에서는 외부 스타일시트 사용이 권장됩니다.