CSS와 HTML의 연결 Linking Style Sheet to HTML
CSS와 HTML의 연결
……….. Linking Style Sheet to HTML
.css
파일 불러들이기 Linking to an External Style Sheet
.css 파일은 HTML의 'LINK'를 이용해서 HTML 문서와 연결할 수 있다.
<LINK>는 HTML 문서의<HEAD>안에 두어야 한다. 'TYPE' 은 MIME 형식(CSS의 경우
text/css)을 지정하는데, Css를 지원하지 않는 브라우저에서는 이것을 무시할 수 있도록 해준다. 'MEDIA'는 Css가
적용될 매체를 지정하는데, 그 형식은 다음과 같다.
print 인쇄
screen 화면 출력
projection 프로젝터 출력
braille 점자출력
aural 음성 출력
all 모든 매체에 대한 출력
여러 매체를 지정할 때에는 쉼표를 사용하거나 'all'을
사용한다.
보기
<LINK
REL=StyleSheet HREF=“sam.css” TYPE=“text/css” MEDIA=screen>
REL은 HTML문서와 연결된 파일 사이의 관계를 정의한다.
위의 보기는 현재문서가 'sam.css'파일에 의해 모든 Style Sheet가 설정되어 있음을 보여준다.
<LINK
REL=StyleSheet HREF=“sam1.css” TYPE=“text/css” TITLE=“sam1.css” MEDIA=“screen,print”>
위의 보기에서는 'sam1.css' 파일이 현재문서에
자동 적용된다. REL=StyleSheet과 TITLE을 함께 사용한다.
<LINK
REL=“Alternate StyleSheet” HREF=“sam3.css” TYPE=“text/css” TITLE=“sam3”
MEDIA=“screen, print”>
위는 보조 스타일의 보기인데, REL=“Alternate
StyleSheet“를 이용해서 지정한다. 이것은 자동 적용된 스타일을 바꾸기 위해 사용한다.
<LINK
REL=StyleSheet HREF=“basics.css” TITLE=“toge”>
<LINK REL=StyleSheet HREF=“tables.css” TITLE=“toge”>
<LINK REL=StyleSheet HREF=“forms.css” TITLE=“toge”>
위의 보기는 세개의 css파일이 동시에 한 문서에 적용되는
예인데, 이를 위해서는 동일한 TITLE을 사용해야만 한다.
.css 파일
불러들이기Linking to an External Style Sheet는 여러 페이지에 동일한 css가 적용될 때 편리하다.
대부분의 브로우저는 css파일을 캐쉬Cash로 보관하므로 문서의 생성시간을 절약할 수 있다.
<Style></style> 사용하기 Embedding a Style Sheet
한 문서안에서 css를 지정할 때 사용한다.
보기
<STYLE TYPE=“text/css”>
<!–
BODY { background: url(sam.gif) black; color: #ffffff }
P { background: yellow; color: black }
.fir { margin: 10px }
–>
</STYLE>
<STYLE>은 HTML의<HEAD>안에
위치한다.
@import로
불러오기 Importing a Style Sheet
@import는 css파일이나<style>에서 사용하는데, @import
는 css내용의 첫부분에 있어야만 한다.
보기
<STYLE TYPE=“text/css”
MEDIA=“screen, projection”>
<!–
..@import url(http://www.user.com/fir.css);
..@import url(sec.css); P { background: white
}
–>
</STYLE>
위의 보기에서 같은 내용의 설정은 뒤에 것이 우선한다.
만일 P에 대해 fir.css에서는 바탕Background을 붉은 색으로, sec.css에서는 검은 색으로 지정했다면, 화면의
바탕은 흰색으로 나타난다. 즉, 세번째의 설정이 우선하는 것이다. 따라서, @import는 전반적으로 지정된 css내용을 불러들여
일부를 문서안에서 수정해가며 사용할 때 편리하다.
직접쓰기
Inlining Style
임의의 요소Element안에서 css를 직접 지정할 때에 사용한다.
보기
<SPAN STYLE=“color: yellow;
font-family: 굴림, impact”>글꼴은
'굴림'이며, 글꼴색은 '노랗게' 나타난다
</SPAN>.
위의 보기는 반드시 아래와 같은
<SPAN STYLE=“color:
yellow;
font-family:
굴림, 'Comic Sans MS'“>글꼴은
'굴림'이며, 글꼴색은 '노랗게' 나타난다.</SPAN>
형식을 지켜야만 한다.
CLASS
(The CLASS Attribute)
이것은 일정한 css형식이 지정되어 있는 문서에 전혀 다른 내용의 css를 문서 일부에 포함시킬 때에 사용한다.
보기
.esp { color: #ffffff;
background: red }
B.new { font-size: 16px; color: green }
위의 보기는 다음과 같이 사용한다.
<P CLASS=“esp”>…</P>
<B CLASS=“new”>…</B>
위에서 'new'라는 CLASS는<B> 요소Element에만
적용된다.
ID
(The ID Attribute)
이것은 CLASS와 거의 같은 기능을 가지는데, 다른
점은 ID는 문서안에서 단한번 적용된다는 것이다.
보기
#woolee { font-family: “Comic
Sans MS” }
위의 보기는 다음과 같이 사용한다.
<P
ID="woolee">…</P>
SPAN
(The SPAN Element)
<SPAN>은 HTML 요소Element이지만, 아무런 기능도 가지고 있지 않다. 이는 순전히 css의 사용을 위해
고안된 것이다.
보기
<HTML>
<HEAD>
<TITLE>SPAN</TITLE>
<STYLE TYPE="text/css">
<!–
…sam { color: red }
–>
</STYLE>
</HEAD>
<BODY>
<SPAN CLASS="sam">붉은 보기</SPAN>
<P>
<SPAN STYLE="color: yellow">노란 보기</SPAN>
DIV
(The DIV Element)
SPAN과 바슷한 기능을 하는데, 차이점은 DIV는 묶음 요소Block-Level Element여서 문단을 다루는 데에 편리하다.
보기
<HTML>
<HEAD>
<TITLE>SPAN</TITLE>
<STYLE TYPE="text/css">
<!–
…sam { color: red }
–>
</STYLE>
</HEAD>
<BODY>
<DIY CLASS="sam">붉은 보기</DIV>
<P>
<DIV STYLE="color: yellow">노란 보기</DIV>
위의 두 보기에서
<SPAN>과<DIV>의 차이는 Netscape와 Explorer에서 상이하게 적용된다.
- 제작: w3master@sanyaro.com bestsouth@korea.com
