-
스타일 시트(CSS)html/css 2008. 8. 21. 16:09반응형
글자모양을 정의하는 태그는 <FONT>입니다. 그러나 이 강의에서는 HTML 4.0의 권고대로 <FONT>태그는 사용하지 않고, 스타일시트(<STYLE>, CSS)를 사용해서 글자모양을 바꿀 것을 권합니다. 가능하면 표준 스타일(CSS)에 대해서만 설명하고, IE나 넷스케이프 전용 태그에 대해서는 사이트를 소개하는 것으로 대신 하겠습니다.
스타일 시트를 문서에 삽입하기
· 문서 내부에 정의 하기
<HTML>
<HEAD>
<STYLE type="text/css">
H3 { COLOR : blue; FONT-SIZE : 12pt; }
P { COLOR : black; FONT-SIZE : 10pt; }
</STYLE>
</HEAD>
</HTML>
· 외부 스타일 시트 사용하기 (스타일 시트내용을 따로 mystyle.css에 저장해 놓은 경우)
<HTML>
<HEAD>
<LINK REL='stylesheet' TYPE="text/css" HREF="mystyle.css">
</HEAD>
</HTML>
외부 스타일 시트를 사용하면 하나의 양식을 여러 문서에 적용할 수 있기 때문에 생산성을 높일 수 있다. 한편 외부 스타일 시트를 사용하면서 동시에 내부 스타일 시트도 사용할 수 있는데, 이 때 내부 스타일 시트는 외부 스타일 시트의 정의 아래에 내부 스타일 정의를 하도록 합니다. 그래야 외부 스타일과 내부 스타일이 중복되었을 때 내부 스타일이 적용되거든요. 즉, 일반적인 모양의 외부 스타일 파일을 하나 만들어 두고 내부 스타일에서는 각 문서에 맞게 일부분을 조정해서 사용할 수 있다는 얘기죠.
스타일 정의하기
<STYLE>~</STYLE>에서 스타일을 정의하는 방법은 크게 태그 수준, 클래스 수준, ID 수준으로 나눌 수 있습니다. 이외에 더 복잡한 방법-그러나 편리한 방법-도 있지만 세 가지 방법에 대해서만 설명하도록 하겠습니다.
· ■ 태그 수준의 정의
BODY { Color : green; Font-Size : 10pt; } /* BODY 태그의 모든 텍스트에 대해 검정색 10포인트의 글꼴로 정의 */
P { Color : Black; Line-Height : 150%; Margin-Left: 2em; }
H1, H2, H3 {Color : Blue; } /* H1, H2, H3 태그의 색을 모두 파랑으로 정의 */
H1 { Font-Size : 20pt; }
H2 { Font-Size : 16pt; }
H3 { Font-Size : 14pt; }
위와 같이 특정 태그에 대해 스타일을 정의하는 방법입니다. 이 방법을 사용할 경우 해당 태그를 사용하는 모든 문단이나 문장에 동일한 모양이 적용됩니다.
이 때 여러 태그에 공통적으로 사용되는 것이 있다면 태그와 태그를 쉼표( 콤마 , )로 구분한 후 { }로 묶어서 한 번에 정의할 수도 있습니다.
아래의 예를 살펴보면 스타일 시트에서 정의한 태그를 사용한 문단은 정의된 모양대로 출력되지만 특별히 정의하지 않은 태그는 원래의 모습대로 출력될 겁니다. 다만 <ol>이나 <ul>태그가 정의된 텍스트는 초록색으로 출력될 텐데 그 이유는 <body>의 글자색 정의를 따르기 때문입니다.
<Body>
<h1>보안 교육</h1>
<h2>보안의 의의</h2>
<p>국가 안전 보장상 보호를 요하는 비밀이나 문서, 자재, 인원, 시설, 지역 등을 국내외적의 침해행위 및 각종 재해로부터 보호하기 위하여 취하여 지는 일체의 예방적 방위 수단 및 활동
<h2>보안의 주체 및 대상</h2>
<ol>
<li>주체 : 국가
<li>대상
<ul>
<li>인원
<li>문서
<li>시설
<li>통신
</ul>
</ol>
</Body>
■ 클래스 수준의 정의
P.강조 { Font-Weight : bold; }
.들여쓰기 { Text-Indent : 2em; }
클래스 수준의 정의는 특정 태그 내의 클래스와 태그를 구분하지 않고 적용할 수 있는 클래스로 구분할 수 있습니다. 특정 태그 내에서만 적용할 수 있는 클래스는 '태그.클래스이름' 과 같이 사용합니다.
클래스 수준으로 정의된 스타일을 적용할 때는 태그 안에 Class='클래스이름' 과 같은 옵션을 사용합니다.
다음 예문을 <Body>에 입력해 보세요.
<P class='강조'>이 문단은 강조 클래스를 사용하므로 굵게 표시 됩니다
<P>이 문단은 보통 모양으로 출력됩니다.
<P class='들여쓰기'>이 문단은 왼쪽 들여쓰기 됩니다.
<P>
<ul>
<li>클래스를 적용하지 않은 태그입니다
<li class='들여쓰기'>이 문장은 들여쓰기가 됩니다.
<li class='강조'>이 문장은 P태그가 아니므로 굵게 표시되지 않습니다.
</ul>
■ ID 수준의 정의
P { Font-Size : 10pt; Color : black; Font-Weight : normal; }
P.강조 { Font-Weight : bold }
P.강조#빨강 { Color : Red }
.들여쓰기#작게 { Font-Size : 8pt }
LI#초록 { Color : Green }
#파랑 { Color : Blue }
위와 같이 ID수준에서의 정의는 #으로 시작합니다. 특정 태그의 특정 클래스들 중 일부분에 대해서만 스타일을 다르게 지정하고자 할 때 또는 특정 클래스들 중 일부만 다른 스타일을 지정하고자 할 때 또는 모든 태그들에 대해서 일부만 다른 스타일을 지정하고자 할 때 사용합니다.
간단히 줄여 말하면 클래스 수준보다 낮은 수준에서 스타일을 지정하고자 할 때 사용합니다.
ID 속성은 class와 비슷하지만, 한 문서에서 같은 id는 하나만 존재해야 한다는 것이 다릅니다. ID 속성을 쓰면 종종 NAME속성을 지원하지 않는 태그들에 ID속성을 두어 자바스크립트를 사용해서 내용을 바꿀 수도 있고, 하이퍼링크의 대상이 될 수도 있다는 점도 알아 둡시다.
통상 ID 수준에서 정의된 스타일은 문장의 일부 단어나 글자에 대해 다른 모양을 지정할 때 사용하게 되지요. 이 때 사용되는 태그가 <SPAN>~</SPAN>이랍니다.
스타일이 위와 같이 정의되었을 때 다음과 같은 예문을 <BODY>에 입력해서 어떻게 표현되는지 살펴 봅시다.
<P>이 부분은 태그 수준에서 정의된 모양이지만 <span id='파랑'>파랑색</span>으로 표시된 부분은 ID수준에서 정의된 스타일이지요.
<P class='강조'>이 부분은 강조 클래스를 사용하기 때문에 굵게 표시됩니다.
<UL>
<LI>이 줄에서 <span id='빨강'>빨강색</span>이 빨강으로 나오지 않는 이유는
<LI>상위 태그가 P이고 그 클래스가 강조인데, 빨강색이 P태그가 아닌 Span태그로 묶여있기 때문에 적용되지 않는 거지요.
<LI ID='초록'>여기는 초록색으로 나오지요.
</UL>
스타일 시트의 항목별 속성
글꼴 (FONT)
Font-Family
o 글꼴을 정하는 속성이다. Times나 Palatino 글꼴에는 serif, Helvertica 계열의 글꼴에는 sans-serif, Zapf-Chancery 계열에는 cursive, Western이나 Circus 계열에는 fantasy 그리고 System이나 Courier 계열에는 monospace 등의 글꼴을 지정한다.
o 여러 개의 대체 글꼴을 콤마로 구분하여 입력한다. 브라우저가 글꼴을 찾는 순서는 왼쪽에서 오른쪽이다.
o 글꼴이름에 공백이 있는 경우에는 글꼴 이름을 따옴표로 묶어준다.
예) P { font-familly : 굴림, 돋움, "Arial Bold", serif; }
Font-Size
o 글꼴의 크기를 다양한 치수로 지정한다.
o 절대적 크기 : xx-small, x-small, small, medium, large, x-large, xx-large
o 상대적 크기 : larger, smaller
o 퍼센트 : 상위 요소 글꼴 크기의 백분율 값으로 지정
o 간격(상대길이) : em(현재 글자의 크기), ex(현재 글자 중 x자의 크기), px(픽셀)
o 간격(절대길이) : in(인치), cm(센티미터), mm(밀리미터), pt(포인트 : 1pt=1/72in), pc(파이카 : 1pc=12pt)
예) P { font-size : 10pt; } H1 { font-size : x-large }
Font-Style
o 글꼴의 모양을 이탤릭체로 하거나 흘림꼴로 할 때 사용하며, 다음 세 가지 중 하나를 선택한다.
o normal, italic, obilique
o italic은 글꼴이름 중 Italic, Cursive, Kursiv 등의 단어가 들어가는 글꼴
o oblique는 글꼴이름 중 Oblique, Slanted, Incline 등의 단어가 들어가는 글꼴
예) P { font-style : italic }
Font-Varient
o 일반 글꼴과 소형 대문자 글꼴 사이를 전환할 때 사용한다.
o normal : 일반글꼴, small-caps : 소형 대문자 즉, 대문자이긴 하되 크기가 작은 글꼴로 표시되는 대문자
예) P.smallcap { font-varient : small-caps }
Font-Weight
o 글꼴의 두께를 지정한다.
o normal, bold, bolder, light, lighter 중 하나를 사용하거나 100, 200, 300, 400(normal), 500, 600, 700(bold), 800, 900을 쓴다.
예) H1 { font-weight : bold; font-size : 15pt;}
텍스트
Letter-Spacing
o 텍스트 요소 내에 있는 단어들의 글자 사이 간격을 조절할 때 사용.
o 단, 글자들 사이에 크거나 작은 간격을 군데 군데 삽입하는 것은 불가능
o 글자 사이의 간격을 넓혀서 시원스럽게 보일 때 유용.
o normal 또는 em, ex, px, in, cm, mm, pt, pc등의 단위를 사용할 수 있다.
예) P { letter-spacing : 1em } H2 { letter-spacing : -0.5em }
Word-Spacing
o 단어 사이의 간격을 조절할 때 사용하며, Letter-Spacing과 같은 방법으로 사용한다.
Line-Spacing
o 문장의 줄 간격을 설정할 때 사용한다.
o 이 속성은 하위 요소들에게 까지 적용된다. 예를 들어 <ul>에서 Line-Spacing을 2로 설정하고, 그 아래에서 <li>에 1.5를 설정하면 <li>는 실제로는 3(2*1.5)이 된다.
o 문단과 문단사이의 간격이 아니라 한 문단 내에서 각 줄과 줄 사이의 간격을 의미한다.
o normal, 숫자(현재 글꼴의 몇 배), 간격(font-size에서 쓰는 단위 em, pt 등등), 퍼센트(현재 글꼴의 몇 %)를 사용할 수 있다.
예) P { line-spacing : 160% }
Text-Align
o 문장의 가로 방향의 정렬 방법을 지정한다.
o left (왼쪽), right (오른쪽), center (가운데), justified (각 줄들의 길이를 동일하게 즉, 좌우여백이 동일하게)
예) H3 { text-align : center }
Text-Decoration
o 밑줄이나 깜박임의 효과를 줄 때 사용한다.
o none (효과없음), underline (밑줄), overline (문장위에 가는 줄), line-through (문장 가운데 가는 줄), blink (깜박임)
Text-Indent
o 문단의 첫 줄을 들여쓰기 또는 내어쓰기할 때 사용한다.
o 길이(font-size에서 사용하던 것)나 퍼센트를 사용하며, 내어쓰기를 할 때는 음수로 지정하면 된다.
예) P { text-indent : 2em } P.nae { text-indent : -2em }
Text-Transform
o 대소문자를 지정할 때 사용.
o none (입력한 대로), capitalize (각 단어의 첫 글자를 대문자로), uppercase (모든 글자를 대문자로), lowercase (모든 글자를 소문자로)
Vertical-Align
반응형