HTML style 속성 – 요소에 인라인 스타일 적용하는 방법

HTML의 style 속성은 문서 내 개별 요소에 인라인(inline) 스타일을 직접 지정할 때 사용합니다. style 속성은 전역(global) 속성에 해당하므로, 모든 HTML 요소에 자유롭게 적용할 수 있다는 장점이 있습니다.

기본 문법

style 속성의 기본 작성 형식은 다음과 같습니다.

<태그명 style="스타일 선언"></태그명>

속성값으로는 CSS 속성과 값을 쌍으로 묶은 스타일 선언을 넣으며, 여러 개의 스타일을 지정할 때는 세미콜론(;)으로 구분합니다.

사용 예제

다음 예제는 <ol> 목록 요소에 style 속성을 사용해 글자 크기와 굵기를 지정하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    }
</style>
<body>
<h1>HTML style Demo</h1>
<p>List of subjects: </p>
<ol style="font-size:1.2rem;font-weight:bold;">
<li>Physics</li>
<li>Chemistry</li>
<li>Maths</li>
<li>Biology</li>
<li>Economics</li>
</ol>
</body>
</html>

실행 결과

위 코드를 실행하면 목록 항목들이 style 속성에서 지정한 대로 1.2rem 크기의 굵은 글씨로 표시됩니다.

HTML style 속성 – 요소에 인라인 스타일 적용하는 방법

정리

style 속성은 간단하게 특정 요소 하나에만 스타일을 적용할 때 유용합니다. 다만 유지보수와 코드 재사용 측면에서는 외부 CSS 파일이나 <style> 태그를 활용하는 것이 권장되며, 인라인 스타일은 일시적이거나 우선순위가 높은 개별 스타일이 필요한 경우에 적절히 사용하는 것이 좋습니다.