고정 헤더 영역
상세 컨텐츠
본문
5. 스타일 시트 레퍼런스
이 절은 CSS 구문과 자바스크립트 구문에 대한 레퍼런스 정보들로, 넷스케이프 네비
게이터 4.0에
서 구현되는 스타일 시트 기능들에 대해 설명한다.
5.1 스타일 시트에서의 주석문
스타일 시트에서의 주석문은 C 프로그래밍 언어의 주석문과 비슷하다.
예를 들어:
B {color:blue;} /* 텍스트가 파란색의 굵은 글씨체로 디스플레이된다 */
tags.B.color = "blue"; /* 텍스트가 파란색의 굵은 글씨체로 디스플레이된다 */
자바스크립트 스타일 시트 구문은 C++ 스타일의 주석문도 지원한다.
예를 들어:
tags.B.color = "blue"; // 텍스트가 파란색의 굵은 글씨체로 디스플레이된다
주석문은 주석문내에 다른 주석문을 포함할 수 없다.
5.2 새로운 HTML 태그
여기에서는 스타일 사용한 작업에 유용하게 쓰일 수 있는 HTML 태그를 설명한다.
■ <STYLE>
<STYLE>과 </STYLE> 태그는 스타일 시트를 가리킨다. <STYLE>과 </STYLE>
사이에 요소에 대한 스타일을 지정하고 클래스와 ID를 정의하며, 문서
내에서 사용하기 위한 스타일을 구축한다.
스타일 시트가 자바스크립트 구문을 사용한다고 알려주려면 TYPE 속성을
"text/javascript"로 설정하고, CSS 구문을 사용한다고 알려주려면 TYPE
속성에 "text/css"를 설정한다. TYPE의 기본값은 "text/css"이다.
예제:
<STYLE TYPE = "text/css">
BODY {margin-right: 20%; margin-left:20%}
PRE {color:green;}
all.CLASS1 {float:right; font-weight: bold;}
</STYLE>
■ <LINK>
<LINK> 요소를 사용하면 문서 내에서 사용할 수 있도록 외부 스타일
시트를 링크할 수 있다.
예제:
========
CSS 구문
========
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL = STYLESHEET TYPE="text/css"
HREF="http://style.com/mystyles1.htm">
</HEAD>
=================
자바스크립트 구문
=================
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL = STYLESHEET TYPE = "text/javascript"
HREF="http://style.com/mystyles1.htm">
<HEAD>
■ <SPAN>
텍스트에서 일부에만 스타일을 적용할 때, 스타일이 적용되는 텍스트의
시작과 끝을 나타내려면 <SPAN>과 </SPAN> 요소를 사용한다.
아래 예제는 텍스트 일부에 개별적인 스타일을 적용하는 것이다.
<P>Here is some normal paragraph text. It looks OK, but would be
much better if it was<SPAN style="color:blue; font-weight:bold;
font-style:italic"> in bright, bold, italic blue. </SPAN>The bluetext stands out much more.</P>
(예제 결과 : 위 문장 중에서 in bright, bold, italic blue 부분이
밝은 파란색의 이탤릭체로 디스플레이된다.)
<SPAN> 요소는 아래 예제와 같이 이니셜 문자를 크게 디스플레이하고자
할 경우에도 사용할 수 있다.
<STYLE TYPE="text/css">
init-letter.all {font-size:400%; font-weight:bold;}
</STYLE>
<P><SPAN class="init-letter">T</SPAN>his is...</P>
(예제 결과 : This is.. 중에서 T가 진하고 크게 디스플레이된다)
5.3 기존의 HTML 태그를 위한 새로운 속성
이 절에서는 스타일을 사용한 작업에서 유용하게 사용하는 기존 HTML
태그에 대한 새로운 속성을 설명한다.
■ STYLE
STYLE 속성은 특정 요소의 스타일을 지정한다. 예를 들어,
========
CSS 구문
========
<H3 STYLE="line-height:24pt; font-weight:bold; color:cyan;">
Cyan Heading</H3>
=================
자바스크립트 구문
=================
<H3 STYLE="lineHeight='24pt'; fontWeight='bold'; color='cyan'">
Cyan Heading<H3>
(예제 결과 : 짙은 청록색으로 Cyan Heading이 디스플레이된다.)
■ CLASS
CLASSES 자바스크립트 속성을 사용하면 스타일 시트에 있는
스타일 클래스를 정의할 수 있다. CLASS 속성은 요소에 적용하기 위한
스타일 클래스를 지정한다.
CSS 구문과 자바스크립트 구문이 약간 다른 구문을 사용해서 스타일
클래스를 정의하기는 하지만, CLASS 속성의 사용법은 두 구문에 있어서동일하다. 예를 들어:
===========
CSS 구문 예
===========
<STYLE TYPE="text/css">
H3.class1 {font-style:italic; color:red;}
</STYLE>
====================
자바스크립트 구문 예====================
<STYLE TYPE="text/javascript">
classes.class1.H3.fontStyle="italic";
classes.class1.H3.color="red";
</STYLE>
===================
스타일 시트 사용 예
===================
<H3 CLASS = "class1">This H3 is in red italic letters.</H3>
클래스 이름은 대소문자를 구별해서 써야 한다.
각 HTML 요소는 오직 하나의 스타일 클래스만을 사용할 수 있다.
클래스가 모든 요소에 적용될 수 있도록 하려면 해당 클래스에 대한속성을 설정할 때 요소 선택자(element selector)인 all을 사용한다.
예를 들어, 아래의 코드 샘플은 LEMON 클래스가 모든 요소에 적용되고,
LEMON 스타일 클래스를 사용하는 요소들은 모두 노란색으로 디스플레이
하도록 하는 것이다.
========
CSS 구문========
<STYLE TYPE="text/css">
all.LEMON {color:yellow;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE TYPE="text/javascript">
classes.LEMON.all.color="yellow";
</STYLE>
===================
스타일 시트 사용 예
===================
<H1 class="LEMON">A Nice Yellow Heading</P>
<P CLASS="LEMON">What a nice shade of yellow this paragraph is.</P>
스타일 클래스 만들기와 예제에 대해서는 "3.스타일 시트 만들기와 스타일
할당하기"를 참고하기 바란다.
■ ID
스타일 시트를 정의할 때, individual named 스타일을 만들 수 있다.
요소는 스타일 클래스 뿐만 아니라 named 스타일도 사용할 수 있다.
이렇게 하면, named 스타일을 사용하여, 스타일과 관련된 individual
예외사항을 스타일 클래스로 표현할 수 있다.
CSS 구문에서 individual named 스타일을 정의하려면 # 기호를 사용하여
해당 이름이 individual임을 표시한다. 반면, 자바스크립트 구문에서는
ID 선택기를 사용한다.
CSS 구문과 자바스크립트 구문 모두, HTML 요소에서 ID 속성을 사용하여
해당 요소에 대한 스타일을 지정한다.
ID 이름은 대소문자 구별을 해야 한다.
ID 스타일은 "2. HTML 컨텐트 배치하기"에서 설명했던 것처럼 정교하게
배치된 HTML 레이어를 사용할 때 특히 유용하다.
아래의 코드는 individual named 스타일의 사용례이다. 이 예제에서,
STYLE1 클래스는 열거가지 특성을 지닌 스타일을 정의한다. A1이라는
named 스타일은 색상을 파란색으로 지정한다. 이 스타일은 문단이
STYLE1의 모든 스타일 특성을 가지도록 지정할 때도 사용할 수 있다.
단, 색상은 빨간색이 아니라 파란색이 된다.
========
CSS 구문
========
<STYLE TYPE="text/css">
P.STYLE1 {
color:red; font-size:24pt; line-height:26pt;
font-style:italic; font-weight:bold;
}
#A1 {color:blue;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE TYPE="text/javascript">
with (classes.STYLE1.P) {
color="red";
fontSize="24pt";
lineHeight="26pt";
fontStyle="italic";
fontWeight="bold";
}
ids.A1.color="blue";
</STYLE>
==================
스타일 시트 사용례
==================
<P CLASS="STYLE1">Big red text</P>
<P CLASS="STYEL1" ID="A1">Big blue text</P>
■ 새로운 자바스크립트 오브젝트 속성
이제부터 자바스크립트 구문을 사용하여 스타일 시트를 정의할 때
유용하게 사용될 새로운 자바스크립트 오브젝트 속성에 대해설명하기로 한다.
˚ tags
<STYLE> 요소 안에 자바스크립트 구문을 사용할 때, document라는
자바스크립트 오브젝트의 tags 속성을 사용하여 스타일을 설정할
수 있다.
다음 예제는 전체 문단을 빨간색으로 표시하도록 지정하는 자바스크립트
구문이다:
<STYLE TYPE="text/javascript">
tags.P.color=red;
</STYLE>
참고로, CSS 구문에서는 다음과 같이 사용한다:
<STYLE TYPE="text/css">
P { color:red; }
</STYLE>
tags 속성은 항상 현재 문서에 대한 document 오브젝트에 적용되기
때문에, document.tags라고 쓸 수도 있다. 예를 들어, 아래의 두
문장은 같은 의미이다:
document.tags.P.color="red";
tags.P.color="red";
<BODY> 요소에서 원하는 스타일을 설정하면 문서 내의 모든 요소에 대해
기본 스타일로 설정할 수 있다. 예를 들어, 문서에서 오른쪽 여백을
획일적으로 지정할 수 있다.
tags.body.marginRight="20pt"; /* 자바스크립트 구문 */
BODY {margin-right:20pt;} /* CSS 구문 */
˚ classes 속성과 id 속성에 대해서는 "DHTML 5-1"의 classes
자바스크립트 속성과 id 자바스크립트 속성을 참고하기 바란다.
------------------------------------------------------------------------------
------------------------------------------------------------------------------
*
5.3 스타일 시트 속성
■ 폰트 속성
스타일을 사용하면 모든 요소에 대해 폰트 크기와 폰트군(font family),
폰트 스타일 및 폰트 굵기를 지정할 수 있다.
1) 폰트 크기
CSS 구문 이름 : font-size
자바스크립트 구문 이름: fontSize
사용가능값 : 절대 크기, 상대 크기, 길이, 백분율
초기값 : medium
적용 대상 : 모든 요소
상속 여부 : 상속
백분율값 : 부모 요소의 폰트 크기에 대해 상대적인 값
① 절대 크기(absolute-size) : 절대 크기는 다음과 같은 키워드이다.
xx-small
x-small
small
medium
large x-large
xx-large
② 상대 크기(relative-size) : 상대 크기를 사용하면, 부모 요소의
폰트 크기에 비례하여 폰트 크기가 해석된다.
※ 주의 : 상대적인 크기가 지정될 요소에는, 폰트 크기를 가지는 부모 요소가 있어야만 상대적인 폰트 크기가 실제 크기로
계산될 수 있다.
사용가능한 값은 larger와 smaller이다.
예를 들어, 부모 요소 폰트 크기가 medium이고, 요소의 폰트 크기가
"larger"로 지정되었다면, 현재 요소의 폰트 크기는 large가 된다.
③ 길이(length) : 길이는 24pt처럼 숫자와 측정 단위를 사용한다.
④ 백분율(percentage) : 백분율 키워드는 부모 요소의 폰트 크기와의 상대
적인 크기를 백분율로 설정하는 것이다.
========
CSS 구문
========
P {font-size:12pt;}
EM {font-size:120%;}
BLOCKQUOTE {font-size:medium;}
B {font-size:larger;}
=================
자바스크립트 구문
=================
tags.P.fontSize = "12pt";
tags.EM.fontSize = 120%;
tags.BLOCKQUOTE.fontSize = "medium";
tags.B.fontSize="larger";
2) 폰트군
CSS 구문 이름 : 폰트군
자바스크립트 구문 이름 : fontFamily
사용가능값 : fontFamily
초기값 : 사용자가 설정한 기본폰트
적용 대상 : 모든 요소
상속 여부 : 상속
백분율값 : N/A
① 폰트군(fontFamily) : 폰트군은 Helvetica나 Arial 같이 사용 중인
폰트군을 가리킨다. 폰트 이름 목록이 주어지면, 브라우저는
사용자 시스템에 존재하는 폰트를 찾을 때까지 폰트 목록을
차례로 검색한다. 지정한 폰트 군을 사용자 시스템에서 사용할
수 없을 경우, 대신 기본 폰트가 사용된다.
폰트 정의 파일을 웹 페이지에 연결하여, 웹 페이지를 다운로드할 때
폰트 정의 파일도 함께 다운로드되도록 하려면, 정의 파일에 있는
모든 폰트를 사용자 시스템에서 사용할 수 있어야 한다.
폰트를 문서에 연결하는 방법에 대해서는 이후에 설명하기로 한다.
일반적인 폰트군 이름들을 사용하면 모든시스템의 폰트를 표시할
수는 있지만, 정확한 폰트는 시스템에 따라 달라진다. 다섯 가지의 일반적인 폰트군 이름은 다음과 같다:
serif
sans-serif
cursive
monospace
fantasy
========
CSS 구문
========
<STYLE TYPE="text/css">
H1 {fontFamily:Helvetica, Arial, sans-serif;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE TYPE="text/javascript">
tags.H1.fontFamily="Helvetica, Arial, sans-serif";
</STYLE>
3) 폰트 굵기
CSS 구문 이름 : font-weight
자바스크립트 구문 이름 : fontWeight
사용가능값 : normal, bold, bolder, lighter, 100-900
초기값 : normal
적용 대상 : 모든 요소
상속 여부 : 상속
백분율값 : N/A
폰트 굵기는 폰트의 두께를 가리킨다. 예를 들어:
========
CSS 구문
========
<STYLE>
BLOCKQUOTE {font-weight: bold;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE>
tags.BLOCKQUOTE.fontWeight="bold";
</STYLE>
가능한 값은 normal과 bold, bolder 및 lighter이고, 굵기를 100에서
900사이의 값으로 지정할 수 있다. 100은 가장 얇은 값이고, 900은
가장 굵은 값이다.
4) 폰트 스타일
CSS 구문 이름 : font-style
자바스크립트 구문 이름 : fontStyle
사용가능값 : normal, italic
초기값 : normal
적용 대상 : 모든 요소
상속 여부 : 상속
백분율값 : N/A
이 속성은 폰트의 스타일을 지정한다.
아래의 예제는 <H1> 요소 내에 포함된 텍스트를 이탤릭체로
지정하는 것이다.
========
CSS 구문========
<STYLE>
H1 EM {font-style: italic;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE>
contextual {tags.H1, tags.EM}.fontStyle="italic";
</STYLE>
■ 텍스트 속성
스타일 시트를 사용하면 줄 간격이나 텍스트 장식 등과 같은 텍스트 속성을
설정할 수 있다.
1) 줄 간격
CSS 구문 이름 : line-height
자바스크립트 구문 이름 : lineHeight
사용가능값 : 숫자, 길이, 백분율, normal
초기값 : 해당 폰트의 normal 값
적용 대상 : 블록 단계 요소
상속 여부 : 상속
백분율값 : 요소 자체 폰트크기 참조
이 속성은 인접한 두 줄의 기준선 간의 거리를 설정하는 것으로, 블록 단계
요소에만 적용된다.
① 숫자(number) : 측정 단위 없이 숫자만 지정하면 "현재 요소의 폰트 크기×숫
자
"
값이 줄 간격이 된다. 이것은 상속 방법에 있어서 백분율과는 다르게 동작한다. 숫자값이 지정되면 자식 요소는 결과값을 상속하는 것이
아니라 곱하는 값(지정된 숫자)을 상속한다. (참고로, 백분율이나
다른 단위에서는 결과값을 상속한다.)
예를 들어:
fontSize:10pt;
line-height:1.2 /* 줄 간격은 현재 120%, 즉, 12pt이다 */
font-size:20pt /* 현재, 줄 간격은 24pt이다 */
② 길이(length) : 줄 간격을 측정 단위로 표시한다.예를 들어:
line-height : 0.4in;
line-height : 18pt;
③ 백분율 : 요소의 폰트 크기에 비례하는 백분율. 예를 들어:
line-height : 150%;
음수값은 사용할 수 없다.
2) 텍스트 장식
CSS 구문 이름 : text-decoration
자바스크립트 구문 이름 : textDecoration
사용가능값 : none, underline, line-through, blink
초기값 : 없음
적용 대상 : 모든 요소
상속 여부 : 상속되지 않음
백분율 : N/A
이 속성은 요소의 텍스트에 추가되는 장식 효과를 지정하는 것이다.
요소에 텍스트가 없거나(ex, HTML에서 <IMG> 요소) 요소가 비어 있다면
(ex, "<EM></EM>" 이 속성은 적용되지 않는다.
이 속성은 상속되지 않지만, 자식 요소가 부모 요소에 일치된다.
예를 들어, 요소에 밑줄이 그어져 있을 경우, 이 밑줄은 자식 요소에까지
영향을 미친다. 자식 요소에 다른 색상이 지정되어 있을 경우에도
부모 요소의 밑줄 색상이 남아있게 된다.
예를 들어:
BLOCKQUOTE {text-decoration: underline;}
텍스트의 색상은 color 속성값으로 조절되기 때문에 텍스트 장식 옵션에는
색상 옵션이 포함되지 않는다.
4) 텍스트 형태
CSS 구문 : text-transform
자바스크립트 구문 : textTransform
사용가능값 : 시작글자 대문자(captialize), 대문자(uppercase),
소문
자(lowercase), none
초기값 : none
적용 대상 : 모든 요소
상속 여부 : 상속
백분율값 : N/A
이 속성은 텍스트 형태를 가리킨다:
① 시작글자 대문자(capitalize) : 각 단어의 첫글자를 대문자로 표시
② 대문자(uppercase) : 요소의 모든 글자를 대문자로 표시
③ 소문자(lowercase) : 요소의 모든 글자를 소문자로 표시
④ none : 대소문자 구분 없이 표시
예제:
========
CSS 구문
========
<STYLE TYPE="text/css">
H1 {text-transform:capitalize;}
H1.CAPH1 {text-transform: uppercase;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE>
tags.H1.textTransform = "capitalize";
classes.CAPH1.H1.textTransform = "uppercase";
</STYLE>
==================
스타일 시트 사용례
==================
<H1>This is a regular level-one heading</H1>
<H1 CLASS=CAPTH1>important heading</H1>
(결과: This Is A Regular Level-One Heading
IMPORTANT HEADING)
5) 텍스트 정렬
CSS 구문 이름 : text-align
자바스크립트 구문 이름 : textAlign
사용가능값 : 왼쪽(left), 오른쪽(right), 중앙(center),
혼합(justify)
초기값 : 왼쪽(left)
적용 대상 : 블록 단계 요소
상속 여부 : 상속 백분율값 : N/A
이 속성은 요소 내에서 텍스트가 정렬되는 방법을 지정한다.
예제:
tags.P.textAlign="center";
=============
CSS 구문 예제
=============
<STYLE TYLE="text/css">
all.RIGHTHEAD {text-align:right; color:blue;}
P.LEFTP {text-align:left; color:red;}
</STYLE>
======================
자바스크립트 구문 예제
======================
<STYLE TYPE="text/javascript">
classes.RIGHTHEAD.all.textAlign="right";
classes.LEFTP.P.textAlign="left";
classes.RIGHTHEAD.all.color="blue";
classes.JUSTP.P.color="red";
</STYLE>
==================
스타일 시트 사용례
==================
<H3>A Normal Heading</H3>
<H3 CLASS=RIGHTHEAD>A Right-Aligned Heading</H3>
<P>This is a normal paragraph. This is what paragraphs usually look
like, when they are left to their own devices, and you do not use
style sheets to control their text alignment.</P>
<P CLASS=LEFTP>This paragraph is left-justified, which means
it has a ragged right edge. Whenever paragraphs contain
excessively, perhaps unnecessarily, long words, the raggendness
of the justification becomes more manifestly apparent than in the
case where all the words in the sentence are short.</P>
■ 텍스트 형태
6) 텍스트 들여쓰기
CSS 구문 이름 : text-indent
자바스크립트 구문 이름 : textIndent
사용가능값 : 길이(length), 백분율(percentage)
초기값 : 0
적용 대상 : 블록 단계 요소
상속 여부 : 상속
백분율값 : 부모 요소의 폭 참조
이 속성은 첫번째 칸 앞에 얼마나 들여쓸 것인가를 지정한다.
text-indent 값은 음수가 될 수도 있다. 다른 요소와 분리되는 요소의
중간에는 들여쓰기가 되지 않는다.
① 길이(length) : 단위와 함께 숫자를 입력한다. 예를 들어:
P {text-indent:3em;}
② 백분율(percentage) : 들여쓰기 크기를 부모 요소의 폭에 비례한
백분율로 표시한다. 예를 들어:
P {text-indent:25%;}
=============CSS 구문 예제
=============
<STYLE TYPE="text/css">
P.INDENTED {text-indent:25%;}
</STYLE>
======================
자바스크립트 구문 예제
======================
<STYLE>
classes.INDENTED.P.textIndent = "25%";
</STYLE>
=================
스타일시트 사용례
=================
<P CLASS=INDENTED>
The first line is indented 25 percent of the width of the parent
element, which in this case happens to be the BODY tag, since thiselement is not embedded in anything else.</P>
<BLOCKQUOTE>
<P CLASS=INDENTED>
This time the firsst line indented 25 percent from the blockquote that
surrounds this element. A blockquote automatically indents its contents.
</P>
</BLOCKQUOTE>
=====
결과
=====
he first line is indented 25 percent of the width of the
parent element, which in this case happens to be the BODY tag,
since this element is not embedded in anything else.
This time the firsst line indented 25 percent from the
blockquote that surrounds this element. A blockquote
automatically indents its contents.
이 절은 CSS 구문과 자바스크립트 구문에 대한 레퍼런스 정보들로, 넷스케이프 네비
게이터 4.0에
서 구현되는 스타일 시트 기능들에 대해 설명한다.
5.1 스타일 시트에서의 주석문
스타일 시트에서의 주석문은 C 프로그래밍 언어의 주석문과 비슷하다.
예를 들어:
B {color:blue;} /* 텍스트가 파란색의 굵은 글씨체로 디스플레이된다 */
tags.B.color = "blue"; /* 텍스트가 파란색의 굵은 글씨체로 디스플레이된다 */
자바스크립트 스타일 시트 구문은 C++ 스타일의 주석문도 지원한다.
예를 들어:
tags.B.color = "blue"; // 텍스트가 파란색의 굵은 글씨체로 디스플레이된다
주석문은 주석문내에 다른 주석문을 포함할 수 없다.
5.2 새로운 HTML 태그
여기에서는 스타일 사용한 작업에 유용하게 쓰일 수 있는 HTML 태그를 설명한다.
■ <STYLE>
<STYLE>과 </STYLE> 태그는 스타일 시트를 가리킨다. <STYLE>과 </STYLE>
사이에 요소에 대한 스타일을 지정하고 클래스와 ID를 정의하며, 문서
내에서 사용하기 위한 스타일을 구축한다.
스타일 시트가 자바스크립트 구문을 사용한다고 알려주려면 TYPE 속성을
"text/javascript"로 설정하고, CSS 구문을 사용한다고 알려주려면 TYPE
속성에 "text/css"를 설정한다. TYPE의 기본값은 "text/css"이다.
예제:
<STYLE TYPE = "text/css">
BODY {margin-right: 20%; margin-left:20%}
PRE {color:green;}
all.CLASS1 {float:right; font-weight: bold;}
</STYLE>
■ <LINK>
<LINK> 요소를 사용하면 문서 내에서 사용할 수 있도록 외부 스타일
시트를 링크할 수 있다.
예제:
========
CSS 구문
========
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL = STYLESHEET TYPE="text/css"
HREF="http://style.com/mystyles1.htm">
</HEAD>
=================
자바스크립트 구문
=================
<HTML>
<HEAD>
<TITLE>A Good Title</TITLE>
<LINK REL = STYLESHEET TYPE = "text/javascript"
HREF="http://style.com/mystyles1.htm">
<HEAD>
■ <SPAN>
텍스트에서 일부에만 스타일을 적용할 때, 스타일이 적용되는 텍스트의
시작과 끝을 나타내려면 <SPAN>과 </SPAN> 요소를 사용한다.
아래 예제는 텍스트 일부에 개별적인 스타일을 적용하는 것이다.
<P>Here is some normal paragraph text. It looks OK, but would be
much better if it was<SPAN style="color:blue; font-weight:bold;
font-style:italic"> in bright, bold, italic blue. </SPAN>The bluetext stands out much more.</P>
(예제 결과 : 위 문장 중에서 in bright, bold, italic blue 부분이
밝은 파란색의 이탤릭체로 디스플레이된다.)
<SPAN> 요소는 아래 예제와 같이 이니셜 문자를 크게 디스플레이하고자
할 경우에도 사용할 수 있다.
<STYLE TYPE="text/css">
init-letter.all {font-size:400%; font-weight:bold;}
</STYLE>
<P><SPAN class="init-letter">T</SPAN>his is...</P>
(예제 결과 : This is.. 중에서 T가 진하고 크게 디스플레이된다)
5.3 기존의 HTML 태그를 위한 새로운 속성
이 절에서는 스타일을 사용한 작업에서 유용하게 사용하는 기존 HTML
태그에 대한 새로운 속성을 설명한다.
■ STYLE
STYLE 속성은 특정 요소의 스타일을 지정한다. 예를 들어,
========
CSS 구문
========
<H3 STYLE="line-height:24pt; font-weight:bold; color:cyan;">
Cyan Heading</H3>
=================
자바스크립트 구문
=================
<H3 STYLE="lineHeight='24pt'; fontWeight='bold'; color='cyan'">
Cyan Heading<H3>
(예제 결과 : 짙은 청록색으로 Cyan Heading이 디스플레이된다.)
■ CLASS
CLASSES 자바스크립트 속성을 사용하면 스타일 시트에 있는
스타일 클래스를 정의할 수 있다. CLASS 속성은 요소에 적용하기 위한
스타일 클래스를 지정한다.
CSS 구문과 자바스크립트 구문이 약간 다른 구문을 사용해서 스타일
클래스를 정의하기는 하지만, CLASS 속성의 사용법은 두 구문에 있어서동일하다. 예를 들어:
===========
CSS 구문 예
===========
<STYLE TYPE="text/css">
H3.class1 {font-style:italic; color:red;}
</STYLE>
====================
자바스크립트 구문 예====================
<STYLE TYPE="text/javascript">
classes.class1.H3.fontStyle="italic";
classes.class1.H3.color="red";
</STYLE>
===================
스타일 시트 사용 예
===================
<H3 CLASS = "class1">This H3 is in red italic letters.</H3>
클래스 이름은 대소문자를 구별해서 써야 한다.
각 HTML 요소는 오직 하나의 스타일 클래스만을 사용할 수 있다.
클래스가 모든 요소에 적용될 수 있도록 하려면 해당 클래스에 대한속성을 설정할 때 요소 선택자(element selector)인 all을 사용한다.
예를 들어, 아래의 코드 샘플은 LEMON 클래스가 모든 요소에 적용되고,
LEMON 스타일 클래스를 사용하는 요소들은 모두 노란색으로 디스플레이
하도록 하는 것이다.
========
CSS 구문========
<STYLE TYPE="text/css">
all.LEMON {color:yellow;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE TYPE="text/javascript">
classes.LEMON.all.color="yellow";
</STYLE>
===================
스타일 시트 사용 예
===================
<H1 class="LEMON">A Nice Yellow Heading</P>
<P CLASS="LEMON">What a nice shade of yellow this paragraph is.</P>
스타일 클래스 만들기와 예제에 대해서는 "3.스타일 시트 만들기와 스타일
할당하기"를 참고하기 바란다.
■ ID
스타일 시트를 정의할 때, individual named 스타일을 만들 수 있다.
요소는 스타일 클래스 뿐만 아니라 named 스타일도 사용할 수 있다.
이렇게 하면, named 스타일을 사용하여, 스타일과 관련된 individual
예외사항을 스타일 클래스로 표현할 수 있다.
CSS 구문에서 individual named 스타일을 정의하려면 # 기호를 사용하여
해당 이름이 individual임을 표시한다. 반면, 자바스크립트 구문에서는
ID 선택기를 사용한다.
CSS 구문과 자바스크립트 구문 모두, HTML 요소에서 ID 속성을 사용하여
해당 요소에 대한 스타일을 지정한다.
ID 이름은 대소문자 구별을 해야 한다.
ID 스타일은 "2. HTML 컨텐트 배치하기"에서 설명했던 것처럼 정교하게
배치된 HTML 레이어를 사용할 때 특히 유용하다.
아래의 코드는 individual named 스타일의 사용례이다. 이 예제에서,
STYLE1 클래스는 열거가지 특성을 지닌 스타일을 정의한다. A1이라는
named 스타일은 색상을 파란색으로 지정한다. 이 스타일은 문단이
STYLE1의 모든 스타일 특성을 가지도록 지정할 때도 사용할 수 있다.
단, 색상은 빨간색이 아니라 파란색이 된다.
========
CSS 구문
========
<STYLE TYPE="text/css">
P.STYLE1 {
color:red; font-size:24pt; line-height:26pt;
font-style:italic; font-weight:bold;
}
#A1 {color:blue;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE TYPE="text/javascript">
with (classes.STYLE1.P) {
color="red";
fontSize="24pt";
lineHeight="26pt";
fontStyle="italic";
fontWeight="bold";
}
ids.A1.color="blue";
</STYLE>
==================
스타일 시트 사용례
==================
<P CLASS="STYLE1">Big red text</P>
<P CLASS="STYEL1" ID="A1">Big blue text</P>
■ 새로운 자바스크립트 오브젝트 속성
이제부터 자바스크립트 구문을 사용하여 스타일 시트를 정의할 때
유용하게 사용될 새로운 자바스크립트 오브젝트 속성에 대해설명하기로 한다.
˚ tags
<STYLE> 요소 안에 자바스크립트 구문을 사용할 때, document라는
자바스크립트 오브젝트의 tags 속성을 사용하여 스타일을 설정할
수 있다.
다음 예제는 전체 문단을 빨간색으로 표시하도록 지정하는 자바스크립트
구문이다:
<STYLE TYPE="text/javascript">
tags.P.color=red;
</STYLE>
참고로, CSS 구문에서는 다음과 같이 사용한다:
<STYLE TYPE="text/css">
P { color:red; }
</STYLE>
tags 속성은 항상 현재 문서에 대한 document 오브젝트에 적용되기
때문에, document.tags라고 쓸 수도 있다. 예를 들어, 아래의 두
문장은 같은 의미이다:
document.tags.P.color="red";
tags.P.color="red";
<BODY> 요소에서 원하는 스타일을 설정하면 문서 내의 모든 요소에 대해
기본 스타일로 설정할 수 있다. 예를 들어, 문서에서 오른쪽 여백을
획일적으로 지정할 수 있다.
tags.body.marginRight="20pt"; /* 자바스크립트 구문 */
BODY {margin-right:20pt;} /* CSS 구문 */
˚ classes 속성과 id 속성에 대해서는 "DHTML 5-1"의 classes
자바스크립트 속성과 id 자바스크립트 속성을 참고하기 바란다.
------------------------------------------------------------------------------
------------------------------------------------------------------------------
*
5.3 스타일 시트 속성
■ 폰트 속성
스타일을 사용하면 모든 요소에 대해 폰트 크기와 폰트군(font family),
폰트 스타일 및 폰트 굵기를 지정할 수 있다.
1) 폰트 크기
CSS 구문 이름 : font-size
자바스크립트 구문 이름: fontSize
사용가능값 : 절대 크기, 상대 크기, 길이, 백분율
초기값 : medium
적용 대상 : 모든 요소
상속 여부 : 상속
백분율값 : 부모 요소의 폰트 크기에 대해 상대적인 값
① 절대 크기(absolute-size) : 절대 크기는 다음과 같은 키워드이다.
xx-small
x-small
small
medium
large x-large
xx-large
② 상대 크기(relative-size) : 상대 크기를 사용하면, 부모 요소의
폰트 크기에 비례하여 폰트 크기가 해석된다.
※ 주의 : 상대적인 크기가 지정될 요소에는, 폰트 크기를 가지는 부모 요소가 있어야만 상대적인 폰트 크기가 실제 크기로
계산될 수 있다.
사용가능한 값은 larger와 smaller이다.
예를 들어, 부모 요소 폰트 크기가 medium이고, 요소의 폰트 크기가
"larger"로 지정되었다면, 현재 요소의 폰트 크기는 large가 된다.
③ 길이(length) : 길이는 24pt처럼 숫자와 측정 단위를 사용한다.
④ 백분율(percentage) : 백분율 키워드는 부모 요소의 폰트 크기와의 상대
적인 크기를 백분율로 설정하는 것이다.
========
CSS 구문
========
P {font-size:12pt;}
EM {font-size:120%;}
BLOCKQUOTE {font-size:medium;}
B {font-size:larger;}
=================
자바스크립트 구문
=================
tags.P.fontSize = "12pt";
tags.EM.fontSize = 120%;
tags.BLOCKQUOTE.fontSize = "medium";
tags.B.fontSize="larger";
2) 폰트군
CSS 구문 이름 : 폰트군
자바스크립트 구문 이름 : fontFamily
사용가능값 : fontFamily
초기값 : 사용자가 설정한 기본폰트
적용 대상 : 모든 요소
상속 여부 : 상속
백분율값 : N/A
① 폰트군(fontFamily) : 폰트군은 Helvetica나 Arial 같이 사용 중인
폰트군을 가리킨다. 폰트 이름 목록이 주어지면, 브라우저는
사용자 시스템에 존재하는 폰트를 찾을 때까지 폰트 목록을
차례로 검색한다. 지정한 폰트 군을 사용자 시스템에서 사용할
수 없을 경우, 대신 기본 폰트가 사용된다.
폰트 정의 파일을 웹 페이지에 연결하여, 웹 페이지를 다운로드할 때
폰트 정의 파일도 함께 다운로드되도록 하려면, 정의 파일에 있는
모든 폰트를 사용자 시스템에서 사용할 수 있어야 한다.
폰트를 문서에 연결하는 방법에 대해서는 이후에 설명하기로 한다.
일반적인 폰트군 이름들을 사용하면 모든시스템의 폰트를 표시할
수는 있지만, 정확한 폰트는 시스템에 따라 달라진다. 다섯 가지의 일반적인 폰트군 이름은 다음과 같다:
serif
sans-serif
cursive
monospace
fantasy
========
CSS 구문
========
<STYLE TYPE="text/css">
H1 {fontFamily:Helvetica, Arial, sans-serif;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE TYPE="text/javascript">
tags.H1.fontFamily="Helvetica, Arial, sans-serif";
</STYLE>
3) 폰트 굵기
CSS 구문 이름 : font-weight
자바스크립트 구문 이름 : fontWeight
사용가능값 : normal, bold, bolder, lighter, 100-900
초기값 : normal
적용 대상 : 모든 요소
상속 여부 : 상속
백분율값 : N/A
폰트 굵기는 폰트의 두께를 가리킨다. 예를 들어:
========
CSS 구문
========
<STYLE>
BLOCKQUOTE {font-weight: bold;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE>
tags.BLOCKQUOTE.fontWeight="bold";
</STYLE>
가능한 값은 normal과 bold, bolder 및 lighter이고, 굵기를 100에서
900사이의 값으로 지정할 수 있다. 100은 가장 얇은 값이고, 900은
가장 굵은 값이다.
4) 폰트 스타일
CSS 구문 이름 : font-style
자바스크립트 구문 이름 : fontStyle
사용가능값 : normal, italic
초기값 : normal
적용 대상 : 모든 요소
상속 여부 : 상속
백분율값 : N/A
이 속성은 폰트의 스타일을 지정한다.
아래의 예제는 <H1> 요소 내에 포함된 텍스트를 이탤릭체로
지정하는 것이다.
========
CSS 구문========
<STYLE>
H1 EM {font-style: italic;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE>
contextual {tags.H1, tags.EM}.fontStyle="italic";
</STYLE>
■ 텍스트 속성
스타일 시트를 사용하면 줄 간격이나 텍스트 장식 등과 같은 텍스트 속성을
설정할 수 있다.
1) 줄 간격
CSS 구문 이름 : line-height
자바스크립트 구문 이름 : lineHeight
사용가능값 : 숫자, 길이, 백분율, normal
초기값 : 해당 폰트의 normal 값
적용 대상 : 블록 단계 요소
상속 여부 : 상속
백분율값 : 요소 자체 폰트크기 참조
이 속성은 인접한 두 줄의 기준선 간의 거리를 설정하는 것으로, 블록 단계
요소에만 적용된다.
① 숫자(number) : 측정 단위 없이 숫자만 지정하면 "현재 요소의 폰트 크기×숫
자
"
값이 줄 간격이 된다. 이것은 상속 방법에 있어서 백분율과는 다르게 동작한다. 숫자값이 지정되면 자식 요소는 결과값을 상속하는 것이
아니라 곱하는 값(지정된 숫자)을 상속한다. (참고로, 백분율이나
다른 단위에서는 결과값을 상속한다.)
예를 들어:
fontSize:10pt;
line-height:1.2 /* 줄 간격은 현재 120%, 즉, 12pt이다 */
font-size:20pt /* 현재, 줄 간격은 24pt이다 */
② 길이(length) : 줄 간격을 측정 단위로 표시한다.예를 들어:
line-height : 0.4in;
line-height : 18pt;
③ 백분율 : 요소의 폰트 크기에 비례하는 백분율. 예를 들어:
line-height : 150%;
음수값은 사용할 수 없다.
2) 텍스트 장식
CSS 구문 이름 : text-decoration
자바스크립트 구문 이름 : textDecoration
사용가능값 : none, underline, line-through, blink
초기값 : 없음
적용 대상 : 모든 요소
상속 여부 : 상속되지 않음
백분율 : N/A
이 속성은 요소의 텍스트에 추가되는 장식 효과를 지정하는 것이다.
요소에 텍스트가 없거나(ex, HTML에서 <IMG> 요소) 요소가 비어 있다면
(ex, "<EM></EM>" 이 속성은 적용되지 않는다.
이 속성은 상속되지 않지만, 자식 요소가 부모 요소에 일치된다.
예를 들어, 요소에 밑줄이 그어져 있을 경우, 이 밑줄은 자식 요소에까지
영향을 미친다. 자식 요소에 다른 색상이 지정되어 있을 경우에도
부모 요소의 밑줄 색상이 남아있게 된다.
예를 들어:
BLOCKQUOTE {text-decoration: underline;}
텍스트의 색상은 color 속성값으로 조절되기 때문에 텍스트 장식 옵션에는
색상 옵션이 포함되지 않는다.
4) 텍스트 형태
CSS 구문 : text-transform
자바스크립트 구문 : textTransform
사용가능값 : 시작글자 대문자(captialize), 대문자(uppercase),
소문
자(lowercase), none
초기값 : none
적용 대상 : 모든 요소
상속 여부 : 상속
백분율값 : N/A
이 속성은 텍스트 형태를 가리킨다:
① 시작글자 대문자(capitalize) : 각 단어의 첫글자를 대문자로 표시
② 대문자(uppercase) : 요소의 모든 글자를 대문자로 표시
③ 소문자(lowercase) : 요소의 모든 글자를 소문자로 표시
④ none : 대소문자 구분 없이 표시
예제:
========
CSS 구문
========
<STYLE TYPE="text/css">
H1 {text-transform:capitalize;}
H1.CAPH1 {text-transform: uppercase;}
</STYLE>
=================
자바스크립트 구문
=================
<STYLE>
tags.H1.textTransform = "capitalize";
classes.CAPH1.H1.textTransform = "uppercase";
</STYLE>
==================
스타일 시트 사용례
==================
<H1>This is a regular level-one heading</H1>
<H1 CLASS=CAPTH1>important heading</H1>
(결과: This Is A Regular Level-One Heading
IMPORTANT HEADING)
5) 텍스트 정렬
CSS 구문 이름 : text-align
자바스크립트 구문 이름 : textAlign
사용가능값 : 왼쪽(left), 오른쪽(right), 중앙(center),
혼합(justify)
초기값 : 왼쪽(left)
적용 대상 : 블록 단계 요소
상속 여부 : 상속 백분율값 : N/A
이 속성은 요소 내에서 텍스트가 정렬되는 방법을 지정한다.
예제:
tags.P.textAlign="center";
=============
CSS 구문 예제
=============
<STYLE TYLE="text/css">
all.RIGHTHEAD {text-align:right; color:blue;}
P.LEFTP {text-align:left; color:red;}
</STYLE>
======================
자바스크립트 구문 예제
======================
<STYLE TYPE="text/javascript">
classes.RIGHTHEAD.all.textAlign="right";
classes.LEFTP.P.textAlign="left";
classes.RIGHTHEAD.all.color="blue";
classes.JUSTP.P.color="red";
</STYLE>
==================
스타일 시트 사용례
==================
<H3>A Normal Heading</H3>
<H3 CLASS=RIGHTHEAD>A Right-Aligned Heading</H3>
<P>This is a normal paragraph. This is what paragraphs usually look
like, when they are left to their own devices, and you do not use
style sheets to control their text alignment.</P>
<P CLASS=LEFTP>This paragraph is left-justified, which means
it has a ragged right edge. Whenever paragraphs contain
excessively, perhaps unnecessarily, long words, the raggendness
of the justification becomes more manifestly apparent than in the
case where all the words in the sentence are short.</P>
■ 텍스트 형태
6) 텍스트 들여쓰기
CSS 구문 이름 : text-indent
자바스크립트 구문 이름 : textIndent
사용가능값 : 길이(length), 백분율(percentage)
초기값 : 0
적용 대상 : 블록 단계 요소
상속 여부 : 상속
백분율값 : 부모 요소의 폭 참조
이 속성은 첫번째 칸 앞에 얼마나 들여쓸 것인가를 지정한다.
text-indent 값은 음수가 될 수도 있다. 다른 요소와 분리되는 요소의
중간에는 들여쓰기가 되지 않는다.
① 길이(length) : 단위와 함께 숫자를 입력한다. 예를 들어:
P {text-indent:3em;}
② 백분율(percentage) : 들여쓰기 크기를 부모 요소의 폭에 비례한
백분율로 표시한다. 예를 들어:
P {text-indent:25%;}
=============CSS 구문 예제
=============
<STYLE TYPE="text/css">
P.INDENTED {text-indent:25%;}
</STYLE>
======================
자바스크립트 구문 예제
======================
<STYLE>
classes.INDENTED.P.textIndent = "25%";
</STYLE>
=================
스타일시트 사용례
=================
<P CLASS=INDENTED>
The first line is indented 25 percent of the width of the parent
element, which in this case happens to be the BODY tag, since thiselement is not embedded in anything else.</P>
<BLOCKQUOTE>
<P CLASS=INDENTED>
This time the firsst line indented 25 percent from the blockquote that
surrounds this element. A blockquote automatically indents its contents.
</P>
</BLOCKQUOTE>
=====
결과
=====
he first line is indented 25 percent of the width of the
parent element, which in this case happens to be the BODY tag,
since this element is not embedded in anything else.
This time the firsst line indented 25 percent from the
blockquote that surrounds this element. A blockquote
automatically indents its contents.
