CSS - CSS 적용하는 방법 (외부 스타일시트)

[xozu]

HTML 문서에 스타일시트를 적용하는 방법.

스타일을 문서 내부에서 표현할 수도 있고, 별개의 스타일시트 파일을 구성할 수도 있다.

외부 스타일시트

CSS 파일을 독립적으로 생성하여 웹 문서에 삽입하는 방법을 외부 스타일시트라고 한다. 이렇게 외부 스타일시트 방식을 사용하려면 @import‎ 와 link 요소를 이용하는 두 가지 방법이 있다. link 요소를 사용하여 CSS를 문서에 적용하는 방법은 다음과 같다.

<link rel="stylesheet" type="text/css" href="wanted_css_file" />

외부 스타일시트는 다음의 default.css 라는 파일처럼 작성할 수 있습니다.

첫 줄의 @charset "euc-kr"는 문자 코드 세트를 선언한 것입니다. 다음은 이 default.css 스타일시트를 link 태그를 이용하여 포함시키는 소스입니다.

head 태그의 link 태그를 보면 링크시킬 파일을 default.css 라고 지정한 것을 알 수 있습니다. 문서와 스타일시트가 동일한 디렉토리에 있기 때문에 파일명만으로 지정할 수 있는 것입니다. 이렇게 HTML 문서와 분리하여 적용하는 경우 외부 스타일시트를 한 번만 다운로드하면 캐시에 저장되어 웹 페이지 로딩 속도가 빨라지는 효과가 있습니다.

두 번째로 외부 스타일시트를 가져오는 방법은 import 명령을 이용하는 것입니다. 이 import 명령을 사용하는 경우는 두 가지가 있습니다. HTML 문서에서 import 하는 경우와, 다른 스타일시트에서 또다른 스타일시트를 임포트하는 경우입니다.

임포트 명령의 사용 방법은 다음과 같습니다.

HTML 문서에서 CSS 파일 임포트하는 경우:

<style>

@import‎ url("연결하려는 CSS 파일");

</style>

CSS 문서에서 다른 CSS 파일을 임포트하는 경우:

@import‎ url("연결하려는 CSS 파일");

HTML 문서에서 default.css 파일을 임포트하는 경우의 예입니다.

이렇게 HTML 문서에서 외부 CSS 파일을 임포트할 경우에는 <style> 태그에 @import‎(적용할CSS파일) 식으로 기술하면 됩니다.

CSS에서 CSS 파일들을 임포트하는 경우는 그냥 본문 위치에 주욱 나열하면 됩니다.