고정 헤더 영역
상세 컨텐츠
본문
| 3. 스타일 시트 만들기와 스타일 할당하기 이 장에서는 스타일을 정의하는 다양한 방법에 대해 살펴보고, 스타일 을 HTML 요소에 적용하는 방법에 대해서도 알아본다. 스타일 시트는 하나 이상의 스타일 정의를 모아 놓은 것으로, 스타일 을 사용하는 문서 내에서 직접 정의할 수도 있고, 외부 문서에서 스타 일 시트를 정의할 수도 있다. 스타일 시트가 외부 문서에 있을 경우, 다른 문서에서도 같은 스타일 시트를 사용할 수 있다. 예를 들어, 특정 사이트 내의 여러 페이지들은 외부에서 정의한 하나의 스타일 시트를 사용할 수 있다. 스타일 시트를 다른 문서에서 쓰도록 할 생각이 아니라면 해당 스타일 시트를 사용할 문서 내에서 정의하여, 스타일 시트와 컨텐트를 한 곳 에 모아 두는 것이 낫다. 3.1 <STYLE> 태그를 사용하여 스타일 시트 정의하기 스타일 시트를 문서 내에 직접 정의하려면, 문서의 헤더 부분에서 <STYLE> 태그를 사용한다. <STYLE> 태그는 스타일 시트를 열고, </STYLE>로 스타일 시트를 닫는다. <STYLE> 태그는 반드시 <BODY> 태그 앞에 와야 한다. <STYLE> 태그를 사용하면 정의 유형이 "text/css"인지, 아니면"text/javascript"인지를 나타내기 위해, TYPE 속성을 지정할 수 있다. TYPE의 기본값은 "text/css"이다. 다음의 예제는 1단계 제목을 모두 파란색의 대문자로, 인용문은 모두 붉은 이탤릭체로 지정한느 스타일 시트를 정의한 것이다. ======== CSS 구문 ======== <HEAD> <STYLE TYPE="text/css"> H1 {color: blue; text-transform: uppercase; } BLOCKQUOT {color: red; font-style: italic; } </STYLE> </HEAD> <BODY> ============= JavaScript 구문 ============= <HEAD> <STYLE TYPE = "text/javascript"> tags.H1.textTransform = "uppercase"; tags.H1.color = "blue"; tags.BLOCKQUOTE.color = "red"; tags.BLOCKQUOTE.font-style = "italic"; </STYLE> </HEAD> <BODY> ================ 스타일 시트 사용례 ================ <H1>This Heading Is Blue</H1> <B>BLOCKQUOTE>This blockquote is displayed in red.</B> 결과: "http://developer.netscape.com/one/dynhtml/index.html"의 "Chapter3/Defining Style Sheets with the <STYLE> Tag"에서 살펴 볼 수 있다. 3.2 외부 파일에서 스타일 시트 정의하기 문서와 별도의 파일에 스타일 시트를 정의한 후, 해당 스타일 시트를 문서에 링크할 수 있다. 이 방법의 잇점은 스타일 시트를 다른 HTML 문서에서도 사용할 수 있다는 것이다. 외부에서 정의한 스타일 시트를 어떤 문서에나 적용할 수 있는 스타일 템플릿으로 여겨도 된다. 예를 들어, 특정 웹 사이트의 모든 페이지에 해당 스타일 시트를 링크하면 해당 사이트에서 제공하는 모든 페이지에 스타일 템플릿을적용할 수 있다. 외부 파일에 스타일을 정의하기 위한 구문은 <STYLE> 태그와 </STYLE> 태그가 필요하지 않다는 점을 제외하면, 문서 파일 내에서 스타일을 정의할 때와 똑같다. 다음은 예제이다: ======== CSS 구문 ======== /* 외부 스타일 시트 mystyles1.htm */ all.BOLDBLUE {color: blue; font-weight: bold;} H1 {line-height: 18pt;} P {color: yellow} /* end of file */ ============= JavaScript 구문 ============= /* 외부 스타일 시트 mystyles1.htm */ classes.BOLDBLUE.all.color = "blue"; classes.BOLDBLUE.all.fontWeight = "bold"; tags.H1.lineHeight = "18pt"; tags.P.color = "yellow"; /* end of file */ 외부에 정의한 스타일 시트를 문서에서 사용하려면, 다음 예제에서 보 는 것처럼 <LINK> 태그를 사용하여 스타일 시트를 링크한다: ======== CSS 구문 ======== <HTML> <HEAD> <TITLE>A Good Title</TITLE> <LINK REL=STYLESHEET TYPE = "text/css" HREF="http://style.com/mystyles1.htm"> </HEAD> ============= JavaScript 구문 ============= <HTML> <HEAD> <TITLE>A Good Title</TITLE> <LINK REL=STYLESHEET TYPE = "text/javascript" HREF="http://style.com/mystyles1.htm"> 3.3 스타일의 클래스 정의하기 문서 내에 스타일 시트가 포함되어 있거나 외부의 스타일 시트에 연결 되어 있을 경우, 스타일 시트에서 정의된 모든 스타일을 문서에서 사 용할 수 있다. 스타일 시트가 어떤 HTML 요소의 스타일을 지정하면, 문서에서 해당 종류의 HTML 요소 전체가 정의된 스타일을 사용하게 된다. 가끔 HTML 요소에 스타일을 선택적으로 적용하고 싶을 때가 있을 것이다. 예를 들어, 문서에 있는 일부 문단(<P> 요소)만 붉은 색으로지정하고자 할 경우가 있다. 이런 상황에서모든 <P> 요소에 적용하 는 스타일을 정의하는 것은 옳지 않다. 대신, 스타일의 클래스를 정의 하여 적절한 스타일 클래스를 스타일을 사용해야 하는 각 요소에 적용 한다. 스타일 클래스를 HTML 요소에 적용하려면, 스타일 시트에서 스타일 클래스를 정의한 후, HTML 요소의 CLASS 속성을 사용한다. 다음 예제는 중간 정도 밝기의 푸른색상과 굵은 글씨체를 가진, GREENBOLD라는 클래스를 정의하는 방법을 보여준다. ======== CSS 구문 ======== <STYLE TYPE = "text/css"> all.GREENBOLD {color:#44CC22; font-weight:bold;} </STYLE> ============= JavaScript 구문 ============= <STYLE TYPE = "text/javascript"> class.GREENBOLD.all.color = "#44CC22" class.GREENBOLD.all.fontWeight = "bold" </STYLE> ============== 스타일 시트 예제 ============== <H1 CLASS=GREENBOLD>This Heading Is Very Green</H1> <P CLASS = GREENBOLD>This paragraph uses the style class GREENBOLD. You can use the CLASS attribute to specify the style class to be used by an HTML element. </P> <BLOCKQUOTE CLASS = GREENBOLD> This blockquote uses the style class GREENBOLD. As a consequence, it is both green and bold. It can be useful to use styles to make blockquote stand out from the rest of the page. </BLOCKQUOTE> 결과: "http://developer.netscape.com/one/dynhtml/index.html"의 "Chapter3/Defining Classes of Styles"에서 살펴볼 수 있다. 자바스크립트 구문에서는 클래스 이름 안에 하이픈(-)을 사용할 수 없 다. 하이픈은 자바스크립트 연산자인 마이너스 기호이기 때문이다. 자바스크립트 구문에서의 클래스 이름은 +, -, *, / 및 % 뿐만 아니라 모든 자바스크립트 연산자를 포함할 수 없다. 스타일 클래스를 정의할 대, 해당 스타일을 사용할 수 있는 HMTL 요 소를 지정할 수도 있고, 모든 요소가 해당 스타일을 사용할 수 있도록 all이라는 키워드를 사용할 수도 있다. 예를 들어, 다음 예제는 모든 HTML 요소가 사용할 수 있는 DARKYELLOW라는 스타일 클래스를 만드는 것이다. 또한 RED1이라 는 클래스도 만드는데, 이 클래스는 <P>와 <BLOCKQUOTE> 요소에 서만 사용할 수 있다. ======== CSS 구문======== <STYLE TYPE = "text/css"> all.DARKYELLOW {color:#EECC00;} P.RED1 {color: red; font-weight:bold;} BLOCKQUOTE.red1 {color:red; font-weight:bold;} </STYLE> ============= JavaScript 구문============= <STYLE TYPE = "text/javascript"> classes.DARKYELLOW.all.color ="#EECC00"; classes.RED1.P.color = "red"; classes.RED1.P.fontWeight = "bold"; classes.RED1.BLOCKQUOTE.color = "red"; classes.RED1.BLOCKQUOTE.fontweight = "bold"; </STYLE> ================ 스타일 시트 사용례 ================ <BODY> <P CLASS=red1>This paragraph is red.</P> <P>This paragraph is in the default color, since it does not use the class RED1. </P> <BLOCKQUOTE CLASS=red1>This blockquote usethe class RED1. </BLOCKQUOTE> <H5 CLASS=red1>This H5 element tried to use the style RED1, but was not allowed to use it.</H5> <P CLASS=darkyellowclass>This paragraph is dark yellow. </P> <H5 CLASS=darkyellowclass>This H5 element tried to use the style DARKYELLOW and was sucessfule.</H5> 결과: "http://developer.netscape.com/one/dynhtml/index.html"의 "Chapter3/Defining Classes of Styles"에서 살펴볼 수 있다. HTML 요소는 한가지 스타일 클래스만 사용할 수 있다. HTML 요소에서 하나 이상의 스타일 클래스를 지정할 경우, 최초의 클래스만 사 용한다. 예를 들어, 아래 코드에서 문단은 RED1 스타일만 사용하고 나 머지 DARKYELLOW 클래스는 무시한다: <P CLASS="RED1" CLASS="DARKYELLOW">Another paragraph. </P> 3.4 개별적인 named 클래스 정의하기 개별적인 named 클래스를 만들 수 있다. HTML 요소는 스타일 클래 스와 개별적인 named 클래스, 두 가지 모두를 사용할 수 있다. 따라 서, 개별적인 named 스타일을 사용하여 스타일 클래스에서 제외된 스 타일 관련 속성을 표현할 수 있다. 예를 들어, 문단이 MAIN이라는 스타일 클래스를 사용할 경우, MAIN 스타일과 약간 다르게 표현하는 BLUE1이라는 named 스타일도 사용할 수 있다. 개별적인 named 스타일은 위치가 정해진 HTML 컨텐트의 레이어를 정의하는데도 유용하게 쓰이는데, 이 부분에 대해서는 앞으로 설명할 것이다. namde 스타일을 CSS 구문으로 정의하려면 스타일 이름 앞에#를 붙 이고, 자바스크립트 구문에서는 ids 프로퍼티를 사용한다. 스타일을 요소에 적용하려면 해당 스타일 이름을 요소 ID 속성의 값으 로 지정하면 된다. 다음은 MAIN이라는 스타일 클래스를 정의하는 코드이다. 이 클래스는줄 간격을 20포인트로, 폰트 크기는 18포인트로 하고; 글씨체는 굵은체 로, 색상은 붉은 색으로 지정하는 것이다. 또한 색상이 파란색인 BLUE1이라는 named 스타일도 정의한다. ========= CSS 구문 ========= <STYLE TYPE = "text/css"> all.STYPE1 {line-height: 20pt; font-size:18pt; font-weigth: bold; color: red; } #BLUE1 {color: blue; } </STYLE> =============== 자바스크립트 구문 =============== <STYLE TYPE = "text/javascript"> with (classes.STYLE1.all) { lineHeight = "20pt"; fontSize = "18pt"; fontWeight = "bold"; all.color ="red"; } ids.BLUE1.color = "blue"; </STYLE> ================ 스타일 시트 사용례 ================ <P CLASS = "STYLE1">Here you see some tall red text. The text in this paragraph is much taller, bolder, and bigger than paragraph text normally is. </P> <P CLASS = "STYLE1" ID="BLUE1">This paragraph has tall, bold, blue text. Although this paragraph is in class STYLE1, whose members are normally red, it also has a uique ID that allows it to be blue. </P> 결과: "http://developer.netscape.com/one/dynhtml/index.html"의 "Chapter3/Defining Name Indivisual Styles"에서 살펴볼 수 있다. ------------------------------------------------------------------------------ ------------------------------------------------------------------------------ * 3.5 문맥 상의 선택 범주(contextual select criteria) 사용하기 특정 종류의 모든 HTML 요소가 사용하는 스타일도 정의할 수 있다. 스타일이 사용될 때 좀더 확실하게 제어해야 할 경우, 모든 요소에 선 택적으로 적용할 수 있는 스타일 클래스를 정의할 수 있다. 그러나, 가 끔은 제어가 힘들어지기도 한다. 예를 들어, 1단계 제목 안에서 모든 <EM> 요소의 색상을 푸른색으로 지정해야 할 때가 있다. 스타일 정 의에서 문맥상의 선택 범주를 사용하면 스타일 응용 전체에 걸쳐 제어 할 수 있다. 문맥상의 선택 범주를 사용하면 "이 스타일은 다른 종류 의 요소에 포함되어 있는 이런 종류의 요소에 적용된다."처럼 범주를 지정할 수 있다. CSS 구문에서 문맥상의 선택 범주를 지정하려면 프로퍼티 목록의 왼 쪽 괄호를 열기 전에 HTML 요소를 순서대로 나열한다. 자바스크립트 구문에서는, 미리 정의된 메쏘드 contextual()를 사용한다. ======== CSS 구문 ======== <STYLE TYPE = "text/css"> H1 EM {color:gree;} </STYLE> ================ 자바스크립트 구문 ================ <H1>This is <EM>green, emphasized text, </EM> but this is plain heading-one text.</H1> 결과: "http://developer.netscape.com/one/dynhtml/index.html"의 "Chapter3/Using Contextual Selection Criteria"에서 살펴볼 수 있다. 다른 예를 들어보자. 다음의 첫 줄은 CSS 구문이고, 다음 줄은 자바스크립트 구문이다. UL UL LI {color:blue;} contextual (tags.UL, tags.UL, tags.LI).color="blue"; 이 경우, 선택 범주는 <LI> 요소를 가장 최근의 두 개 <UL> 부모와 일치시킨다. 즉, 순서가 없는 목록(UL)에서 두 단계 깊이인 목록 항목 만이 이러한 문맥 상의 선택과 일치되고, 파란색으로 디스플레이 되게 된다. 태그나 클래스, ID, 혹은 이들 조합을 살펴보기 위해 문맥상의 선택 범 주를 사용할 수도 있다. 예를 들어, 아래 예제는 MAGENTACLASS란 느 클래스를 만드는 것이다. 이 클래스에 있는 모든 것은 자홍색(magenta)이 된다. <DIV> 요소 내에 있으면서 MAGENTACLASS인 모든 문단은 이탤릭체로 디스플레이된다. <DIV> 요소 내에 있는 MAGENTACLASS의 문단 내에 포함된 <B> 태그 내의 모든 텍스트 는 특별히 크게 디스플레이된다. ========= CSS 구문 ========= <STYLE TYPE = "text/css"> all.MAGENTACLASS {color:magenta;} DIV P.MAGENTACLASS {font-style: italic;} DIV P.MAGENTACLASS B {font-size:18pt;} </STYLE> =============== 자바스크립트 구문 =============== <STYLE TYPE = "text/javascript"> classes.MAGENTACLASS.all.color = "magenta"; contextual(tags.DIV, classes.MAGENTACLASS.P).fontStyle ="italic"; contextual(tags.DIV, classes.MAGENTACLASS.P, tags.B).fontSize = "18pt"; </STYLE> ================ 스타일 시트 사용례 ================ <DIV CLASS=MAGENTACLASS> <H3>Heaing 3 in the MAGENTACLASS</H3> <P>Is this paragraph magenta and italic? It should be. Here comessome <B>big bold text.</B> We achieved this result with contextual selection. </P> <P>This paragraph should be magenta too.</P> </DIV> <P>This paragraph is still magenta colored, but since it is not inside a DIV block, it should not be italic.</P> 결과: "http://developer.netscape.com/one/dynhtml/index.html"의 "Chapter3/Using Contextual Selection Criteria"에서 살펴볼 수 있다. 3.6 요소 각각에 스타일 지정하기 스타일 시트에서 스타일을 정의하는 것 뿐만 아니라, HTML 태그의 STYLE 속성을 사용하여 해당 태그에서만 사용할 스타일을 정의할 수 있다. 기본적으로 이런 방법은 진행 중인 스타일을 정의하고, 특정 상 황의 HTML 요소만 스타일을 사용하도록 하고 싶고, 문서 내의 다른 곳에 있는 스타일에서는 다시 사용하지 않도록 하고 싶을 때 유용하 다. 일반적으로, 문서가 사용할 모든 스타일은 한 군데(대개 문서의 맨 위 나 별도의 스타일 시트 파일)에서 정의하여, 스타일을 변경할 위치를 알기 쉽도록 하는 것이 좋다. 스타일 시트에서 스타일을 정의할 경우,문서에 있는 모든 요소는 해당 스타일을 사용할 수 있다. 스타일의 속 성을 변경하고 싶을 경우, 한 번만 변경하면 해당 스타일을 사용하는 모든 요소에 자동 적용된다. 그러나, 개개의 요소의 스타일을 정의하고자 할 경우가 있는데, 이를 쉽게 처리하게 해주는 것이 STYLE 속성이다. 아래의 예제는 개개의 <P> 요소의 스타일을 정의한 것이다. 또한, 일부 컨텐트에 스타일을 적용하기 위해 <SPAN> 태그와 함께 STYLE 속성을 사용하는 방법 도 보여준다. ======== CSS 구문 ======== <P STYLE = "color:green; font-weight:bold; margein-right:20%; margin-left:20%; border-width:2pt; border-color:blue;"> This paragraph, and only this paragraph is bold green with big margins and a blue border. </P> <P>This paragraph is in the usual color, whatever that may be, but this <SPAN STYLE="color:red; font-style:italic;">word </SPAN> is different from the other words in this paragraph.</P> ===============자바스크립트 구문 =============== <P STYLE = "color = 'green'; fontWeight = 'bold'; marginRight = '20%'; marginLeft = '20%'; borderWidth = '2pt'; borderColor = 'blue';"> This paragraph, and only this paragraph is bold green with big margins and a blue border. </P> <P>This paragraph is in the usual color, whatever that may be, but this <SPAN STYLE="color='red'; fontStyle='italic';">word</SPAN> is different from the other words in this paragraph.</P> 결과: "http://developer.netscape.com/one/dynhtml/index.html"의 "Chapter3/Specifying Styles for Indivisual Elements"에서 살펴볼 수 있다. 3.7 스타일 시트 조합하기 하나 이상의 스타일 시트를 사용하여 문서에 대한 스타일들을 설정할 수 있다. 이것은 여러 가지 스타일 시트를 혼합하여 사용하거나, 문서 가 여러개의 다른 영역으로 나뉘어 있고, 각 영역에서 서로 다른 스타 일 시트를 사용하려고 할 때 이런 작업이 필요하다. 예를 들어, Networks Unlimited라는 기업에서 넷트웍 제품의 장점에 대한 백서를 작성 중이라고 가정해 보자. 여기에서는 백서에 대한 기 업에서 사용할 스타일을 정의하는 시트 하나, 넷트웍 제품에 관한 문 서에서 사용할 스타일을 정의하는 시트 하나, 그리고, Networks Unlimited라는 기업 스타일을 정의하는 시트 하나, 이렇게 세 가지 스 타일 시트를 사용하게 될 것이다. 아래의 예제는 하나의 문서에 여러 가지 스타일 시트를 사용하는 예이 다. <STYLE TYPE = "text/css" SRC="http://www.networksunlimited.org/styles/corporate"> </STYLE> <STYLE TYPE = "text/css"SRC="styles/whitepaper"></STYLE> <STYLE TYPE = "text/css" SRC="styles/networkthings"></STYLE> <STYLE TYPE = "text/css" H1 {color: red;} /* 외부 시트를 덮어쓴다 */ </STYLE> 외부에서 링크된 스타일 시트로 인해, 마지막 줄이 앞서 정의한 스타 일 시트보다 우선한다. 이 경우에, networkthings와 whitepaper가 충돌 하는 스타일을 정의한다면 networkthings에서 정의한 스타일이 whitepaperpd서 정의한 스타일보다 우선한다. 로컬에서 정의한 스타일(역주: 각 요소에서 직접 정의한 스타일, "3.5 요소 각각에 스타일 지정하기" 참고)은 <STYLE> 요소에서 정의된스타일보다 우선하고, 외부 스타일 시트에서 정의한 스타일보다 우선 한다. 일반적으로, 다음의 예제에서 보는 것처럼, 로컬 스타일 값이 부 모 요소로부터 상속된 값을 덮어쓰게 되고, 좀더 특수한 스타일 값이 좀더 일반적인 스타일 값을 덮어쓴다. ======== CSS 구문 ======== <STYLE TYPE = "text/css"> P {color:blue;} B {color:green;} </STYLE> =============== 자바스크립트 구문 =============== <STYLE TYPE = "text/javascript"> tags.P.color = "blue"; tags.B.color = "green"; </STYLE> ================ 스타일 시트 사용례 ================ <P>This is a blue paragraph, as determined by the style sheet, But these <B>bold words are green, </B> as you see. </P> <P STYLE="color:red">This is a red paragraph, as determined by the local style. However, these <B>bold words are still green,</B> since the style defined directly for bold elements overrides the style of the parent element.</P> 결과: "http://developer.netscape.com/one/dynhtml/index.html"의"Chapter3/Combining Style Sheets"에서 살펴볼 수 있다. |
