HTML 문서에 CSS를 적용하는 방법은 크게 세 가지입니다. 요소에 직접 스타일을 지정하는 인라인(inline) 방식, <head> 안의 <style> 태그에 작성하는 내부(internal) 방식, 그리고 별도의 CSS 파일을 연결하는 외부(external) 방식이 그것입니다.
기본 문법
HTML 문서에 CSS를 포함할 때 사용하는 기본 문법은 다음과 같습니다.
/* 인라인 */
<element style="/*스타일 선언*/"></element>
/* 내부 */
<head>
<style>
/*스타일 선언*/
</style>
</head>
/* 외부 */
<head>
<link rel="stylesheet" href="#파일 경로">
</head>
예제
아래 예제들을 통해 HTML 문서에 CSS를 적용하는 각 방법을 하나씩 살펴보겠습니다.
1. 인라인 CSS
인라인 방식은 개별 요소의 style 속성에 스타일을 직접 선언하는 방법으로, 특정 요소 하나에만 빠르게 스타일을 적용할 때 유용합니다.
<!DOCTYPE html> <html> <head> </head> <body> <p style="font-family: Forte;">Demo text</p> <p style="background-color: lightblue;">This is Demo text</p> <img src="https://www.tutorialspoint.com/memcached/images/memcached.jpg" style="border: 3px groove orange;"> </body> </html>
출력 결과: 위 코드는 다음과 같이 렌더링됩니다.
2. 내부 스타일 시트
<head> 영역 안에 <style> 태그를 두고 스타일 규칙을 작성하면, 해당 HTML 문서 전체에 스타일이 적용됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
padding: 15px;
width: 33%;
border: 2px solid;
border-radius: 5%;
}
div > div {
border-color: transparent;
box-shadow: inset 0 0 6px red;
}
div > div > div {
border-color: red;
}
</style>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>
출력 결과: 위 코드는 다음과 같이 렌더링됩니다.
3. 외부 스타일 시트
스타일을 별도의 .css 파일로 분리한 뒤, <link> 태그를 사용해 HTML 문서에 연결할 수도 있습니다. 여러 페이지에서 동일한 스타일을 재사용해야 하는 경우 가장 효율적인 방법입니다.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Demo text</p> <p>Demo text again</p> </body> </html>
출력 결과: 위 코드는 다음과 같이 렌더링됩니다.
다음은 위 예제에서 참조한 style.css 파일의 내용입니다.
p {
text-decoration: overline;
text-transform: capitalize;
}
정리
간단한 일회성 스타일에는 인라인 방식이, 하나의 문서에만 적용되는 스타일에는 내부 방식이 적합합니다. 반면 실무 환경에서는 유지보수성과 재사용성이 뛰어난 외부 스타일 시트 방식을 사용하는 것이 일반적이며, 이는 HTML 구조와 디자인을 명확히 분리하는 모범 사례이기도 합니다.