2.2 적용 우선 순위
그럼, 앞에서 처럼 3개의 STYLE이 하나의 HTML문서에 동시에 적용되었을 때, 과연
어떤 것이 우선 순위가 높을까? 앞장에서 나열된 순서대로 우선 순위가 높고, 아래로 내려갈
수록 적용되는 범위는 넓다고 말할 수 있다. 즉,
인라인 스타일 시트 > 임베디드 스타일 시트 > 외부 스타일 시트
따라서, 전체에는 외부 스타일 시트사용하며, 특정 HTML문서만 변경하고자 하는 경우에는
임베디드 스타일 시트를 사용한다. 그리고, 문서의 특정부분만을 바꾸고 싶은 경우에는
인라인 스타일 시트를 사용하면 된다.(당연한 얘기군!)
2.3 텍스트 관련 속성
CSS에서 가장 먼저 살펴볼 속성은 글자(font)에 관련된 속성들이다. 하나씩 살펴보도록
하자.
- font-family / fontFamily : 폰트의 종류를 지정한다. 즉, Arial, 바탕체, ...
font-family는 HTML안에서 사용되는 속성의 표시방법이며, fontFamily는 Script에서 인식되는
속성값이다.( 왜냐하면, JavaScript에서는 하이픈('-')은 사용할 수 없기 때문이다. )
* 주의할 것은 만일 특정한 글자체를 선정했는데, 사용자의 PC에 해당 폰트가 존재해야 한다. 만일 존재하지
않는 경우에는 기본 폰트가 사용된다.
ex)
- Times체를 지정하는 경우 : {font-family: times}
- 여러 폰트를 지정하는 경우 : {font-family: times, serif}
: 맨앞의 폰트가 없으면 그 다음, 그다음.. 폰트를 사용하게 한다.
- font-size / fontSize : 글자의 크기를 지정한다. 크기를 지정하는 방법은
4가지가 존재한다.
- 절대크기 : 폰트의 사이즈를 직접 지정한다.(서로1.5배차이)
속성값) xx-small, x-small, small, medium, large, x-large, xx-large
- 상태크기 : 현재 지정된 사이즈에 비례한 상대적 크기
속성값) larger, smaller
- 숫자표기 : 직접 사이즈를 지정한다. cm, mm, in, pt, pc, px, em, ex와 같은 단위를 사용할 수 있다.
ex) 20px, 5cm
- 비율표기 : 상대적인 사이즈를 지정한다.
ex) 30%, 100%, 200%
- font-style / fontStyle : 폰트의 스타일을 지정한다.
속성값 : normal, italic, italic small-caps, oblique, oblique small-caps, small-caps
- font-weight / fontWeight : : 글자의 두께를 말한다
속성값 : lighter, normal, bold, bolder 또는 100~900사이의 값(400이 normal이다.)
<html>
<head><title>TEST Style</title></head>
<STYLE><!--
H1 {font-family: arial, san-serif; font-size: 100pt; font-style: normal}
H2 {font-family: arial, san-serif; font-size: 50pt; font-style: normal}
P {font-family: times, serif; font-size: 12pt; font-style: normal;}
A {text-decoration: none; font-weight: bold}
--></STYLE>
<body bgcolor="#ffffff">
<H1>H1 text....</H1>
<P>Now <A href="test.html" title="first
link">link area</A> 이렇게 작성한다.</P>
<H2>H2 Txt --- </H2>
<P>두번째 문단으로 <A href="test.html" title="second
link">연결</A> 된
부분을 포함한 하나의 문장이다....</P>
</body>
</html>
|
예제보기
- Last Update : 2001.6.29 by Deadfire(http://www.deadfire.net)
|
DHTML이란?
CSS