CSS에서는 외부 스타일시트를 HTML 문서에 연결하여 사용할 수 있습니다. 이 방식을 활용하면 CSS 코드를 별도의 파일로 분리해 관리할 수 있어 유지보수가 훨씬 쉬워지고, 브라우저가 스타일시트를 캐싱할 수 있기 때문에 페이지 로딩 속도도 함께 개선됩니다.
외부 CSS 파일은 문서의 <head> 태그 안에 <link> 태그를 작성하여 지정합니다.
기본 문법
외부 CSS 파일을 포함하는 기본 문법은 다음과 같습니다.
<link rel="stylesheet" href="#location">
주요 속성 살펴보기
- rel: 현재 문서와 연결되는 파일 간의 관계를 지정합니다. 스타일시트는 항상 "stylesheet" 값을 사용합니다.
- href: 불러올 CSS 파일의 경로 또는 URL을 지정합니다.
- type: 연결한 리소스의 MIME 유형(text/css)을 나타내며, HTML5부터는 생략해도 무방합니다.
예제 1 — 기본적인 외부 스타일시트 연결
다음 예제는 HTML 문서에 외부 CSS 파일을 연결해 스타일을 적용하는 과정을 보여줍니다.
HTML 파일
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Demo Text</h2> <div> <ul> <li>This is demo text.</li> <li>This is demo text.</li> <li>This is demo text.</li> <li>This is demo text.</li> <li>This is demo text.</li> </ul> </div> </body> </html>
CSS 파일(style.css)
h2 {
color: red;
}
div {
background-color: lightcyan;
}출력 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
예제 2 — 배경 이미지와 그림자 효과 적용
외부 스타일시트에는 배경 이미지, 박스 그림자 등 다양한 시각 효과도 자유롭게 정의할 수 있습니다.
HTML 파일
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Demo Heading</h2> <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p> </body> </html>
CSS 파일(style.css)
p {
background: url("https://www.tutorialspoint.com/images/QAicon.png");
background-origin: content-box;
background-size: cover;
box-shadow: 0 0 3px black;
padding: 20px;
background-origin: border-box;
}출력 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
