스타일 시트는 HTML 문서가 화면에 어떻게 표시될지를 정의하는 데 사용됩니다. CSS를 활용하면 HTML 요소에 다양한 스타일 속성을 손쉽게 지정할 수 있습니다. 각 속성은 이름과 값으로 구성되며, 두 항목은 콜론(:)으로 구분됩니다.
CSS를 적용하는 세 가지 방법
HTML 문서에서 CSS를 사용하는 방법은 크게 세 가지로 나눌 수 있습니다.
- 외부 스타일 시트(External Style Sheet) − 별도의 .css 파일에 스타일 규칙을 작성한 뒤, HTML <link> 태그를 사용해 해당 파일을 문서에 연결하는 방식입니다. 여러 페이지에 동일한 스타일을 일괄 적용할 때 유용합니다.
- 내부 스타일 시트(Internal Style Sheet) − HTML 문서의 <head> 섹션 안에 <style> 태그를 사용해 스타일 규칙을 직접 정의하는 방식입니다. 하나의 문서에만 스타일을 적용할 때 적합합니다.
- 인라인 스타일 시트(Inline Style Sheet) − style 속성을 사용하여 개별 HTML 요소에 직접 스타일을 지정하는 방식입니다. 특정 요소 하나에만 빠르게 스타일을 적용할 때 편리합니다.
각 속성 선언은 반드시 세미콜론(;)으로 구분해야 한다는 점을 기억하세요. style 속성을 이용하면 HTML 요소에 간단히 CSS를 추가할 수 있습니다. 아래는 인라인 스타일 시트를 사용해 텍스트 색상을 지정하는 예시입니다.
예제
다음 코드를 실행하면 HTML 페이지에 스타일 시트를 적용한 결과를 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML style sheet</title> </head> <body> <h1 style="color:red"> Heading </h1> <p style="color:blue"> This is demo text </p> </body> </html>
위 예제에서는 <h1> 요소에 빨간색(red), <p> 요소에 파란색(blue) 텍스트 색상이 각각 적용됩니다.
출력 결과
