HTML에서 style 속성을 사용하면 개별 요소에 직접 CSS 스타일을 지정할 수 있습니다. 이를 인라인 CSS(Inline CSS)라고 하며, 외부 스타일시트나 내부 스타일 블록 없이 특정 태그에 즉시 스타일을 적용하고 싶을 때 유용합니다.
style 속성의 기본 문법
style 속성은 열고 닫는 따옴표 안에 CSS 속성과 값을 속성: 값; 형태로 작성합니다. 여러 개의 스타일을 적용할 때는 세미콜론(;)으로 구분합니다.
<태그 style="CSS속성: 값;">내용</태그>
예제 코드
아래 예제는 두 번째 <p> 요소에만 style 속성을 사용해 글자색을 초록색으로 지정한 코드입니다.
<!DOCTYPE html>
<html>
<body>
<h2>Tutorialspoint</h2>
<p>We provide tutorials.</p>
<p style="color:green">We provide learning videos.</p>
</body>
</html>이 코드를 실행하면 첫 번째 단락은 기본 검정색으로 표시되지만, style 속성이 적용된 두 번째 단락의 텍스트는 초록색으로 나타납니다.
여러 스타일 동시에 적용하기
하나의 요소에 글자색, 배경색, 폰트 크기 등 여러 스타일을 함께 지정할 수도 있습니다.
<p style="color:green; background-color:#f0f0f0; font-size:18px;"> 인라인 CSS로 여러 스타일을 적용한 단락입니다. </p>
참고 사항
style 속성은 간편하지만, HTML과 CSS가 섞이면 코드 관리가 어려워질 수 있습니다. 실무에서는 재사용성과 유지보수를 고려해 외부 스타일시트(<link>)나 내부 스타일(<style>) 방식을 우선적으로 사용하고, 빠른 테스트나 일회성 스타일 적용 시에만 인라인 CSS를 활용하는 것이 좋습니다.