HTML에서 특정 요소에 인라인(in-line) CSS 스타일을 적용하려면 style 속성을 사용합니다. 인라인 스타일은 별도의 CSS 파일이나 <style> 태그 없이 해당 요소에 직접 스타일을 지정할 수 있어 간편합니다.
기본 문법
<element style="스타일속성">
여기서 스타일속성에는 하나 이상의 CSS 속성이 들어갑니다. 여러 개의 속성을 지정할 때는 각 속성을 세미콜론(;)으로 구분해야 합니다.
문법 예시
style="color:red;"— 글자 색상만 지정하는 경우style="color:white;background-color:black;"— 여러 속성을 세미콜론으로 구분하여 지정하는 경우
실전 예제
아래 코드를 실행하면 h1 요소에 인라인 CSS 스타일이 적용되는 것을 확인할 수 있습니다.
<!DOCTYPE html> <html> <body> <h1 style="color:white;background-color:black">Tutorialspoint</h1> <h2>Simply Easy Learning</h2> <p>We provide free learning content.</p> </body> </html>
실행 결과 설명
위 예제에서 첫 번째 <h1> 태그에는 style="color:white;background-color:black"이라는 인라인 스타일이 적용되었습니다. 그 결과 배경은 검은색, 글자는 흰색으로 표시됩니다. 반면 아래의 <h2>와 <p> 요소에는 스타일이 지정되지 않아 기본 스타일로 렌더링됩니다.
인라인 스타일 사용 시 참고 사항
인라인 스타일은 빠르게 테스트하거나 특정 요소 하나에만 스타일을 적용할 때 유용하지만, 코드 재사용성과 유지보수 측면에서는 내부 스타일시트(<style>)나 외부 CSS 파일을 사용하는 것이 권장됩니다.