html 문서에 외부 CSS파일 삽입하기 3가지 방법~!

html 문서에 css를 적용하는 방법에는 크게 3가지가 있다...

method 1 문서에 직접 삽입 - style 엘리먼트 사용

<html>

<head>

.....

이곳에 css를 규칙에 맞게 삽입

.....

</style>

</head>

method 2 외부에 css파일을 두고 불러오기 - 외부스타일 시트 사용

.....

<hrad>

/* link태크는 단독태그라서 뒤에.. /를 붙여준다. */

</head>

.....

method 3 외부에 css파을 두고 불러오기 - @import 사용

.....

<head>

<![CDATA[

@import "style.css"

/* 넷스케이트 같은 @import규칙을 지원하지 않는 브라우저에서 숨길수 있다 */

]]>

</style>

</head>

.....

방법3으로 하게 되면 지원하지 않는 css를 숨김으로 해서 레이아웃이 깨지거나 잘못된 해석을 막을수 있다.

css를 숨기지 않는다면 예전 브라우저에서는 알아볼 수 없는 변형된 페이지를 보여주게 된다.

method 4 인라인 스타일

.....

<h1 style="font-size:14px"> 내용을 적어주세요 </h1>

.....

케스케이드의 가장 낮은 단계로써 외부스타일스트와 head태그내의 스타일까지 모두 덮어씁니다.
문서의 어디에서나 사용할 수 있으나 나중에 관리가 용이 하지 않다

스타일 문서를 2개이상 불러오는 경우

네스케이프등에서 지원하지 않는 경우는 새로운 스타일을 적용하면 안되므로 구버젼용의 스타일을 따로 지정해 두는것이 좋다. 스타일 파일 2개 만들어서 1개의 파일에는 모두 적용되는 기본 스타일로 문서를 만들고 또 다른 하나의 파일은 최근버젼에서 읽히는 파일로 만들어두면 페이지의 유연성이 좋아진다.

그리고 2개의 파일을 불러올 경우에는....

어떤 파일을 먼저 호출하느냐에 따라서 스타일이 중복될 경우 달라진다.

먼저 불러온 파일의 스타일은 나중에 불러온 스타일에 덮여쳐진다.

그래서 아래와 같이 하면 구버젼 신버젼에서도 유연한 코딩을 할 수가 있다..

@import "new_style.css";

</style>

위와 같이 하게 되면

old_style은 구버젼, 신버젼에서도 모두 적용 되는 스타일을 삽입하고,

new_style에는 신버젼에서 적용되는 스타일을 삽입하게 되면 구버젼에서는 old_style파일을 적용하게 되고 new_style을 적용하지 않아서 의도한 페이지를 보여줄수 있으며 신버젼에서는 old_style의 클래와 new_style의 클래서가 중복될 경우 나중에 선언한 스타일을 적용할 수가 있다

* method2의 link태그는 구버젼에서 읽지 못하도록 숨길수 가 없으나,

method3의 @import는 구버젼에서 숨길 수가 있다.