스타일 시트(Style Sheets)

웹&컴퓨팅

스타일 시트(Style Sheets)

x2chi 2007. 6. 19. 20:54

※ 스타일 시트(Style Sheets)란?
뭔가를 배우더라도 자신이 지금 배우고 있는 것이 무엇인지는 알고 있어야 겠죠? ^^ 스타일 시트(css)란 쉽게 말해서 HTML의 단점을 보완하기 위해서 나온 언어(?) 라고 할 수 있습니다. 기존에 HTML의 경우 일일이 폰트, 색상, 크기 등을 다 적어주어야 했는데요.....하기사 요즘은 워낙 좋은 웹에디터들이 많이 나와서 일일이 다 태그를 입력하는 일은 없을 텐데요....웹에디터가 없었을 땐 태그명령어를 모두 다 손으로 키보드를 눌러가며 입력해서 홈페이지를 만들 었답니다. 이렇게 하다보니깐 홈페이지 하나 만들려면 시간과 노력이 엄청나게 들어가게 되었죠. 그래서 생각해 낸게 스타일 시트랍니다.

※ 스타일 시트의 장점

일단 웹페이지 관리가 쉬워 집니다.
태그를 입력할 때보다 손이 덜 아프답니다. -_- ;;;
웹페이지를 전보다 멋지게 꾸밀 수 있습니다.
로딩시간도 오래 걸리지 않습니다.
배우기 쉽습니다.
왠지 멋져보입니다. ^^

구체적으로 말하자면 기존에 태그만을 이용할 때는 웹페이지의 2개 이상의 폰트를 정해줄 때 글자마다 각기 다른 폰트명을 적어 주어야 했었는데...스타일 시트를 사용하면 간단하게 몇 줄만 적어주면 모든게 끝나게 되죠. 예를 한번 볼까요?

<html>
<head></head>
<body>
<font face="궁서체" size="2">이건 예제입니다</font><br>
<font face="돋움체" size="4" color="red"><b>태그매니아</font></b><br>
<font face="궁서체" size="2">예제 끝입니다.</font>
</body>
</html>

<html>
<head>
<style type="text/css">
font { font-size: 12px; font-family: 궁서체; }
b { font-size: 14px; color : red; font-family : 돋움체; }
</style>
</head><body>
<font>이건 예제입니다.<br><b>태그매니아</b><br>
예제 끝입니다.</body>
</html>

위에 예제를 보면...흠...글쎄....하시는 분들도 계실텐데..... 언듯 보기에는 글자수가 비슷해 보일지는 몰라도 웹페이지가 위에 예제처럼 딸랑 3줄로 끝나고 마는 웹페이지는 없죠. 대부분이 엄청난 양의 태그명령어를 필요로 하지만 스타일 시트를 이용하면 각각의 태그를 공통분모로 잡아줘서 그 상태를 설정해주기 때문에 훨씬 간단하게 웹페이지를 만들 수 있답니다.
흠....-_-;;; 몇 마디 하다보니 벌써 웹페이지 한장이 가득 찼네요. 다음 페이지에서 계속 하도록 하겠습니다.

앞장에 이어 계속 하겠습니다. 앞에서는 간단하게 스타일 시트의 개념에 대해서 알아보았는데요.... 이제부턴 스타일 시트이 기본적인 사용방법에 대해서 알아보도록 하겠습니다. 그런데...여기서 잠시 기본적인 사용방법을 배우기 전에 간단하게 스타일 시트의 원리를 알려드리겠습니다.

위에 예제를 보면 알 것 같다 하시는 분들은 태그를 열심히 배우신 분일 것이고 모르겠다 하시는 분들은 그렇지 않은 분일 겁니다. 하나 하나 설명해드리자면 <style type="text/css"></style>은 당근 스타일 시트를 나타내줄 때 적어주는 거죠. 자바 스크립트와 같은 방법이죠. 그리고 의 경우 주석문이고요.... 주석문은 스타일 시트를 지원하지 않는 브라우져에 대해서 스타일 시트 소스가 브라우져에 표현되는 걸 막아주는 역할을 하죠.
h1 { color : red ; font-size : 14px; font-family : 돋움체; } ☜ 이것은 <h1><h1> 태그 내에 있는 텍스트 기타 요소에 대해서 색은 빨간색, 글자크기는 14px , 글자체는 돋움체로 하라는 것이죠. 이해되시죠? 마찬가지로.....
b { background : green; font-size : 10px; } ☜이것의 경우는 <b></b> 태그 내에 있는 요소에 대해서 배경색은 녹색, 글자크기는 10px 로 하라는 의미죠. 그런데 여기서 주의 깊게 볼 것이 있습니다. 위의 스타일 시트의 경우 해당 태그내의 요소에 대한 속성을 정해주는 것이죠. 쉽게 말해서.. 해당태그 { 속성:지정; 속성:지정; 속성:지정; } ☜이런 식입니다. 속성지정과 속성지정 사이마다 ; ☜이 표시를 해준다는 것 , 그리고 color : red 이런 식으로 중간에 : ☜이 표시가 들어간다는 것 반드시 기억하시기 바랍니다. 흠.....^^ 간단하게 설명한다는게 설명이 조금 길어졌네요^^

아 ~ ! 그리고 배울게 또 하나 더 있다. 바로 '상속성' 이라는 건데요. 상속이 뭔지는 아시죠? 부모님으로부터 재산을 물려 받을 때 상속받는다고 하는데......참고적으로 우리나라의 가족법상 상속비율은 배우자 1.5 , 자녀들은 아들 딸 구별없이 똑같이 1 의 비율로 상속을 받습니다. 그냥 참고적으로 알고 계시길..... 흠... 계속 이어서 스타일 시트의 상속성에 대해서 이야기 하겠습니다. 스타일 시트에서 상속성이란 ... 흠...뭐라 설명해야 되나?? 굳이 표현을 하자면 스타일 시트로 지정된 해당 태그 내에 다른 태그에 대해서도 지정된 스타일 시트의 속성이 적용되는 것을 말합니다. 이해 되세요? 뭔 소리인지 모르는 분들이 더 많을 것 같아 한가지 예를 들어 설명 드리겠습니다.

위에 예제를 보면 <u></u>태그에 대해서 스타일 시트를 지정해 주었죠. 색은 빨간색, 글자체는 돋움체로 지정해주었는데.....예제를 보면 <u></u>태그 내에 있는 <b></b>태그에 대해서까지 그 속성이 적용되죠. 이걸 바로 스타일 시트의 상속성이라고 합니다. 어때요? 간단하죠? 이것은 주로 어디에 많이 쓰냐면 은요....해당 웹페이지 전체에 공통적으로 해당되는 속성을 지정해 줄때 사용됩니다. body { font-size : 13px; } ☜이런 식으로 하면 해당 웹페이지의 글자크기가 모두 13px가 된답니다. 그렇다면 여기서 의문점이 하나 생기죠? 만약 위와 같이 설정한 웹페이지에서 글자크기가 다른 글자를 표현할려면 어떻게 해야 할까요? 쉽게 말해서 모두 글자크기가 13px인데 그 중 일부분을 15px로 해주고 싶다면...? 거 역시 간단하죠.....아래 예제를 보면 바로 이해가 되실 겁니다.

어때요? 일부분(b 태그)에 대해서 정의를 해주면 간단하게 해결되죠? 일단 선행태그에 의해 상속이 되어도 일부분에 대해서 따로 지정을 해주면 그 부분에 대해선 따로 지정된 속성이 지정되게 되는 거죠. 그렇지만 따로 지정되지 않은 사항에 대해선 그대로 상속이 된답니다.
기본적인 사용방법 설명하기로 했는디.....원리와 상속성 설명하다보니 한 페이지가 벌써 다 차버렸네요...^^ 어쩔 수 없이 다음 페이지에서 이어서 설명드리져..^^

드뎌..... 기본 사용방식에 대해서 설명드리네요.^^ 스타일 시트의 사용방식은 세가지 형태로 나누어 지는데요.... 사용방식이 3가지 형태로..? 말이 좀 이상하죠? 흠..-_- ;;; 사용방식이라고도 할 수 있는데...쉽게 말해서 웹페이지에 스타일 시트를 넣어서 사용하는 방법을 말합니다. 세가지란 우리가 지금까지 예제로 봐왔던 "embeded 방식" , 그리고 css파일을 만들어 "링크시키는 방식" , 마지막으로 직접 HTML태그내에 스타일 시트를 적용시키는 "인라인방식" 으로 나눌 수 있습니다.

☞ embeded (임베이드) 방식
<style type="text/css"></style> 을 사용하여 스타일을 지정하는 방식으로써 웹페이지의 <head></head>부분에 들어가게 되죠. 일명 웹페이지 포함 방식입니다. 일반적으로 공통된 스타일 시트가 적용되는 웹페이지의 수가 몇 개 안되는 경우에 사용됩니다.

☞ 링크시키는 방식
일반적으로 메모장에 스타일 시트를 적어 확장자를 css파일로 해서 저장한 다음 이 파일을 각각의 웹페이지에 링크시키는 방식으로써 공통되는 스타일 시트가 적용되는 웹페이지의 수가 많을 경우 <head></head>사이에
<link rel = stylesheet href="lovestory.css" type="text/css"> ☜이런 방식으로 링크를 시켜주는 방법입니다.

☞ 인라인 방식
HTML태그 내에 직접 스타일 시트를 적용시켜 주는 방식입니다. 채팅방에서 많이 사용됬던 태그 중 하나였는데요...^^ 예제를 보시면 바로 알 수 있습니다.

<body>
<font style="font-size:20pt; color:red; font-family:돋움체;">태그매니아</font>
<p style="background:yellow; font-size:15; font-family:궁서체;">방갑습니다.</p>
</body>

이상으로 스타일 시트의 기본적인 방식 3가지에 대해서 말씀드렸습니다. 일반적으로 임베이트 방식이 가장 많이 사용되는 거 같구요. 태그매니아 홈페이지도 임베이드 방식으로 사용하고 있는데....언제 날 잡아서 링크방식으로 바꿔야 겠군요...요즘 시간이 없어서리.....-_- ;;; 아....그리고 혹시 링크시키는 방식에서 css파일을 어떻게 만들어야 하는가 궁금해 하실 분들이 있을 것 같아 간단하게 설명드리겠습니다. 일단 메모장에다가 임베이트 방식으로 스타일 시트를 적어 넣습니다. 그런다음 저장을 할 때 확장자를 css로 해서 저장을 시키세요. 그런 다음 위에서 설명한 것처럼 링크방식을 이용해서 웹페이지의 head 부분에 넣어주시면 되죠. 간단하죠?

========================================================================================

특강1 마지막에 예고 드렸듯이 이번에는 스타일 시트에서의 class를 지정하는 방법을 배워보겠습니다. 여기서 말하는 class는 자바 애플릿에서 사용되는 class파일과 전혀 다른 것이니 혼돈하지 마시길 바랍니다.
스타일 시트는 임의의 태그에 그 속성을 지정해주어서 해당 태그에 속하는 요소에 대해서 그 속성을 나타내어 주게 하는 작용을 하는 데요.....그럼 여기서 같은 스타일을 적용받는 태그내에서 다른 스타일을 적용시킬려면 어떻게 해야 할까요? 앞에서 배운 인라인 방식을 이용해서 직접 해줄 수 있겠지만 그건 일일이 태그내에 다 적어주어야 하기 때문에 좀 짜증나죠? 바로 여기서 사용될 수 있는게 class입니다. 예를 한번 볼까요?

위에 예제를 태그연습장에서 실행시켜보면 같은 p태그 내에서도 class로 따로 스타일을 지정해준 곳은 해당 스타일이 적용되는 것을 볼 수 있습니다. 구체적으로 <p> 태그에서도 love와 story로 class를 지정해준 곳은 해당 지정 스타일인 love 의 경우 검정색과 글자크기 15px 이 적용이 되고 story 의 경우 하늘색과 글자크기 18px 이 적용되는 것을 볼 수 있습니다. 그리고 마지막 class를 지정해주지 않은 <p> 태그 부분은 원래의 <p>태그에 지정된 스타일이 적용되죠. 어때요? 이해되시죠? 여기서 class의 이름은(love , story)는 여러분들 맘에 드는 단어(한글도 가능)로 지정해주시면 됩니다. 단, 주의 할 점은 head 부분에 들어가는 class 이름과 태그에 들어가는 클래스 이름이 반드시 일치해야만 해당 스타일이 적용됩니다. 음..... 그리고 중요한 게 하나 있는데....head 부분에 지정되는 class 이름 앞에 . ☜ 점을 꼭 해주어야 합니다. 만약 점(.)을 해주지 않으면 그 뒤에 오는 class 이름을 태그로 인식을 합니다. 그러면 당연히 해당 스타일 시트가 적용되지 않고 의도한 바와는 다른 엉뚱한 결과가 나오게 되겠죠. 점(.)을 안 해주는 경우에 대해선 좀 있다가 배우도록 하고요.........
그럼 이번에는 class를 지정해주는 방법 중 하나인데....... 헉 o.0 ;; 그런데 벌써 스크롤 바가 상당부분 하단으로 내려와 있네요...^^> 웹디자인의 기본원칙 중에 하나의 페이지에 너무 많은 글을 적지 말라는 말이 있는데요.....왜냐면 너무 많은 글을 적게 되면 그 글을 읽는 사람들이 읽다가 질려버린다고 하더군요... 맞는 말인거 같아요... -_-;;; 태그매니아 홈페이지는 글자가 넘 많은 거 같테..... 근데...그건 자세히 설명 하다보면 어쩔 수 없이 늘어나게 되더군요. 이해해주시길..... 대신 이렇게 질렸다 싶을 때 다음 페이지로 넘어 가게 하고 있답니다...... 핫핫 ^^ 다음 페이지에서 이어 계속 설명드리도록 하겠습니다.

흠.... 뭐하다가 넘어오게 된거죠? -_- ? ??? .... 하~! 맞져! class 파일 지정하는 다른 방법에 대해서 설명하려다가 넘어온거죠. 계속 설명드리도록 하죠. ^^ 앞장에서는 태그.클래스이름 ☜이런 식으로 지정해주었는데요.... 이번 예제에서는 약간 다르게 해준 거랍니다.

위에 예제를 보시면 head 부분의 스타일 시트 정의부분에서 class 이름을 지정해 줄때 앞에 태그를 생략해주었죠. 이런 경우에는 보시다시피 태그부분에서 클래스를 아무 태그부분에나 지정을 해주면 그 태그 내에서 해당 클래스의 스타일이 적용이 되게 됩니다. 예제를 가지고 좀더 자세히 설명하자면 <body> 부분에 love 클래스를 연결 시켜주고...<h1> 부분에 kiss 클래스를 연결 시켜주었죠. 그리고 <p>태그에는 story 클래스를 연결시켜 주었구요. 그러자 각각 해당 클래스에 지정된 스타일이 적용이 되는 군요. 이런 경우 앞장에서 배운 경우 보다는 좀더 신축성있게 스타일 시트를 적용할 수 있을 겁니다. 그쵸? ^^ 실제로 복잡한 웹페이지에서 스타일 시트를 사용할 때는 class 를 많이 적용해서 사용한답니다.
여러분들 웹서핑을 하다가 가끔씩 웹페이지 소스를 보면 스타일 시트 부분에 아래와 같은 것을 많이 봤을 겁니다.

A:link { text-decoration:none; color: 00448B;}
A:visited { text-decoration:none; color: 00448B;}
A:active { text-decoration:underline; color: 00448B;}
A:hover {color: blue; text-decoration:underline;}

이걸 앵커 가상 클래스라고 하는데...보통 우리가 홈페이지의 링크된 부분에 마우스를 가져다 대면 색이 바뀌면서 밑줄이 생기기도 하고 또한 한번 클릭한 링크부분은 다른 곳과 색이 달라지게 되기도 하는데....그걸 조절하는 스타일 시트랍니다. 당연 <a> 태그에 적용되는 거니깐 앞에 A 가 붙게 되고 그 다음 link는 아직 방문을 하지 않은 링크부분, visited는 한 번 이상 방문한 부분, active는 마우스로 클릭하는 순간의 지정해주는 것입니다. 마지막으로 hover의 경우는 마우스를 링크위에 올려놨을 때의 스타일을 지정하는 거죠. 그리고 나중에 또 배우겠지만 세부적인 사항으로 text-decoration:none; ☜이건 링크된 부분에 밑줄을 나타나게 해줄 것인지 아닌지를 경정해주는 것이랍니다. underline의 경우 밑줄이 생기는 것이고 none의 경우는 생기지 않는 경우이죠. 위에 설명한 앵커 가상 클래스는 실질적으로 스타일 시트에서 가장 많이 쓰인다고 해도 과언이 아닐 정도로 주로 사용됩니다. 반드시 숙지하고 계시길......... (앵커 가상 클래스에 대한 예제는 특강 마지막 부분에서 다루도록 하겠습니다.)
다음 페이지에서 이어 계속 설명드리겠습니다. Let's Go!

제가 특강2 첫장에서 클래스를 정의해줄때 점(.) 을 붙여주지 않으면 그 뒷부분은 태그로 인식한다고 한 적이 있는데요..(기억 안 나시는 분은 빨랑 확인하고 오세요 -.-) 이번에는 그에 관한 것을 배우보도록 하겠습니다. 일단 예제를 보고 설명드리도록 하겠습니다.

위에 예제를 실행시켜봐서 음...뭔지 알겠다 하시는 분은 지금까지 스타일 시트를 잘 이해하고 있다고 볼 수 있습니다. 그렇다고 그렇지 안 으신 분들은 걱정할 필요가 없습니다. 왜냐면 제가 이제부터 설명을 드릴 테니까요.^^ 제가 class 정의할 때 점(.)을 찍어 주지 않으면 뒤에 오는 클래스명을 태그로 인식한다고 했었는데요....그건 좀 쉽게 설명드리기 위해서 그렇게 한거구요......위에 예제는 클래스하고는 아무런 상관이 없는 예제입니다. 위에 예제를 보시다시피 태그 2개를 같이 스타일 시트를 정의시켜 줄 경우에는 앞에 오는 태그 내에 있는 뒤에 오는 태그에 대한 스타일 정의를 해주는 거죠. 즉, <h1> 태그 내에 있는 <b> 태그 부분에 대해서 스타일이 적용되는 것입니다. 이해되시죠? 다시 설명하자면 두번째 라인의 스타일 시트 부분인 p u { color: blue; font-family: 궁서체; } ☜ 이 부분을 풀이해보면 <p>태그 내에 있는 <u>태그의 요소에 대해서 색은 파란색, 글자체는 궁서체로 하라는 말이죠. 어떠요? 이번에는 확실히 이해되시죠? 이 스타일 시트 방법을 사용하면 특정 태그안에 있는 특정 요소에 대해서 그 속성을 설정해 줄 수 있게죠^^ 그런데 아직까지도 모르겠다하시는 분은 없을 줄 아는데...혹시 계신다면 연습 많이 해보세요. 더 이상 쉽게 설명은 곤란합니다. -_- ;;;

========================================================================================

특강 3장부터는 각각의 스타일 시트의 속성에 대해서 알아보도록 하겠습니다. 먼저 글자에 대해산 스타일 시트의 속성에 대해서 알아볼 텐데요.... 글자에 대한 속성으로는 font-family , font-size , font-style , font-variant , text-transform , text-decoration 이 있습니다. 앞에 family 와 size 는 알겠는데... 나머지 뒤에 3개에 대해선 잘 모르겠다구요? ^^ 이미 알고 계시는 분도 있을 테지만, 스타일 시트 첨 하시는 분이라면 당연 모르겠죠. 그 궁금증을 이제부터 풀어드리죠 ^^

☞ font-family
글자...그리고 가족? 이란 뜻인데요...-_- ;;; 글자가족? 바로 글꼴을 의미하는 겁니다. 글꼴이 뭔지는 아시겠죠? ^^ 돋움체, 명조체, 궁서체, 바탕체.. 기타 등등을 글꼴이라고 하죠. 물론 영자체도 포함됩니다. 이 글꼴을 스타일 시트에서 조정해주는 속성이 font-family 이죠. 일단 예제를 하나 볼까요?^^

위에 예제를 실행시켜보면 여러분들의 컴퓨터 사정에 따라 글자체가 각각 다르게 나타날 텐데요....일반적으로 폰트의 경우 홈페이지를 제작하는 사람이 '가는각진제목체'를 이용해서 글자를 적어주었다면 그 홈페이지를 보는 방문객의 컴퓨터에 '가는각진제목체'라는 글자가 있어야 만히 볼 수가 있답니다. 만약 해당 홈페이지를 보는 방문객의 컴퓨터에 '가는각진제목체' 라는 글자체가 없다면 그 방문객에게는 기본글자체로 밖에 보이질 않는답니다. 즉, 원래 홈페이지 제작자가 의도했던 대로 홈페이지를 보여줄 수 없게 되는 거죠. 이러한 사고(?)를 방지하기 위해선 홈페이지를 제작할 때 모든 방문객들의 컴퓨터에 들어있는 공통된 글자체, 즉 돋움체, 궁서체, 바탕체, 굴림체, 신명조체 같은 기본글자체를 이용해서 만드는 것이 가장 좋은 방법입니다. 물론 화려하고 자신의 마음에 꼭 드는 폰트(글자체)가 있을 땐 해당 폰트를 사용하는 건 자기 맘이지만 일반적으로 방문객들이 가지고 있는 폰트(글자체) 가 아닌 폰트를 사용한다면 자기와 해당폰트를 가지고 있는 소수의 방문객들에게만 보여지게 되겠죠.
그런데....위에 예제의 경우 글자체를 하나만 적어준게 아니라 여러 개를 적어주었죠? 가는각진제목체, 솔체, 궁서체, 돋움체 ☜이렇게 4개의 글자체를 순서대로 적어주었는데...이렇게 적어준 이유는 만약 방문객의 컴퓨터에 '가는각진제목체' 가 없다면 그 다음 폰트인 '솔체'가 보여지게 되죠. 그런데 '솔체'도 없다고 하면 그 다음인 '궁서체'가 보여지게 되는 겁니다. 궁서체까지 없다면 최후로 돋움체가 보여지게 되겠죠. ^^ 돋움체는 기본폰트 이니깐 다 보여지게 되겠죠. ^^ 이때 주의 할 점이 될 수 있는 대로 마지막에는 기본폰트를 적어주라는 것입니다. 왠지는 아시겠죠? ^^
영자체도 위에 설명한 것과 마찬가지랍니다. 그리고 인라인 스타일을 사용할 때는 폰트의 이름에 작은 따옴표를 해줍니다. 이런식으로 해주죠. ☞ body { font-family: "센스체","돋움체","궁서체" } 또한 다른 속성과 함께 사용할 때는 font-family 속성을 가장 나중에 적어 줍니다. 익스플러워3.0에서는 font-family 속성이 가장 나중에 있지 않으면 이후의 모든 css 를 무시해버리기 때문이라고 하는데........그런데..아직도 익스플러워 3.0 사용하시는 분 계시나요? ^^
다음 페이지에서는 font-size 에 대해서 알아보도록 하겠습니다.

이번에는 font-size 에 대해서 알아보도록 하겠습니다. 말 그대로 글자크기를 조절해주는 속성입니다. 일반적으로 태그를 사용해서는 글자크기를 최대로 해봤자 <font size="7"> 까지나 <H1> 까지밖에 표현을 못해 줍니다. 그러나 스타일 시트를 이용하면 글자크기를 얼마든지 사용자 맘대로 크게 하거나 작게 표현 할 수 있답니다.
우선 font-size 속성을 사용하는 경우 글자크기의 수치는 포인트(pt) , 픽셀(px) , 인치(in) , 센티미터(cm) 등이 있습니다. 이 중에서 여러분들이 쓰기 가장 편한 것을 골라 사용하시면 됩니다. 왜냐면 어떤 것을 쓰나 크기만 정확히 나타내어 주면 되는 거기 땜시... 핫핫 ^^> 단, 한가지만 골라서 그것만 계속 사용하시길.... 안 그러면 나중에 헤갈려여... 일반적으로 포인트(pt)나 픽셀(px)을 가장 많이 쓴답니다.(태그매니아에선 무조건 픽셀을 사용함-_-+) 이제 예제를 하나 봐볼까요? ^^

예제를 확인해보셨나요? px과 pt 의 경우는 여러분들이 넣는 수치만큼 글자크기가 조절됩니다. (마이너스값은 적용되지 않음) 그리고 인치(in)와 센티미터(cm)의 경우 값을 1로 정해주어도 폰트의 크기가 엄청커지기 때문에 잘 사용되지 않습니다.
그리고 퍼센트(%) 와 키워드 방식의 단위가 있으나 이건 거의 사용되지 않는 답니다. 페센트 값의 경우 부모인자에 대한 그 페센테 값만큼 크기를 조절해 주는 방식이며..키워드 방식은 xxsmall , xsmall , small , medium , large , xlarge , xxlarge 등의 키워드를 이용해서 크기를 조절해주는 방식입니다. 이건 그렇게 중요한게 아니라서 예제는 생략하도록 하겠습니다.
흠....속성 하나에 한 페이지씩 공간을 차지하네요 ^^ 설명하는 게 넘 더딘거 같아 좀더 스피드하게 설명드리도록 하겠습니다. 다음 페이지로 가시져..... /^_^/______________________@ 내 휴지는 내가 굴린다....-_- ;;

☞ font-style , font-variant , font-weight
font-style 속성은 글자체의 스타일을 지정해주는 것으로서 normal , italic , oblique 값을 사용할 수 있습니다. 그런데 font-style 속성을 이용해보면 알겠지만 italic은 말 그대로 이탤릭체이고 oblique는 이탤릭체와 비스므레(^^)한 정도로 볼 수 있습니다 .
font-variant 의 경우는 단순히 보통의 텍스트를 작은 대문자 폰트를 이용해서 작은 대문자로 바꾸어 주는 것입니다. 예컨데 p { font-variant : small-caps } ☜이런식으로 사용할 수 있죠. ^^
font-weight 의 경우는 폰트의 굵기를 지정해주는 속성으로서 lighter , light , normal , bold ,bolder 값을 지정해 줄 수 있습니다.
예제를 봐 볼까요?

위의 예제를 실행시켜 보면 글자가 다 이탤릭체로 나오게 됩니다. 그리고 font-variant 속성이 적용된 부분(tagmania)은 글자가 소문자임에도 불구하고 대문자로 표현되서 나오게 됩니다. 그리고 font-weight 속성의 경우 bold 로 지정되었기 때문에 더 굵게 나오게 되는 거죠. 단, font-weight 속성의 경우 표현되는 글자체에 bold체가 있어야 합니다. 예컨데..arial 체의 경우 arial bold체가 있어야만히 표현이 된다는 거죠. 각각의 글자체에 bold 체가 없는 경우엔 font-weight 속성은 적용될 수가 없습니다. 주의하시길......근뎅....bold체가 있는지 없는지 어떻게 확인하냐구요? 그건 여러분들의 컴퓨터의 [시작메뉴] -> [ 설정] -> [제어판] -> [글꼴] 을 클릭해서 확인해보시면 될겁니다. 또한 font-weight 속성의 경우 100~900까지 숫자로 굵기를 조절해줄 수 있는데요....단, verdana체와 arial체에서만 적용이 되기 때문에 제한적이라고 할 수 있답니다.

☞ text-transform , text-decoration
text-transform 속성은 모든 글자를 대문자나 소문자로 바꿔준다거나 단어의 첫글자만 대문자로 출력해주는 기능을 합니다. (물론 영문자에만 효과가 있습니다.)

uppercase	lowercase	capitalize	none
모든 글자를 대문자 변환	모든 글자를 소문자 변환	첫글자만 대문자로 변환	아무런 효과를 주지 않음

text-decoration 속성은 글자에 밑줄 , 윗줄 , 가운데 줄을 긋게하는 기능을 합니다. (영문이나 한글 모두 적용)

underline : 밑줄을 긋는 효과
overline : 윗줄을 긋는 효과
line-through : 가운데 줄을 긋는 효과

blink : 깜빡이게 하는 효과
none : 아무 효과도 없게 함

속성을 설명을 했으니 이제 예제를 보면서 실제로 어떻게 사용되는지 알아볼까요?

========================================================================================

☞ word-spacing , letter-spacing word-spacing 속성은 단어사이의 여백을 조절해주는 기능을 하고, letter-spacing 속성은 글자사이의 여백을 조절해주는 기능을 합니다. 넘 간단한 거라 더 이상 말이 필요 없습니다. 예제 하나 보고 담으로 넘어가겠습니다.

'웹&컴퓨팅' 카테고리의 다른 글

태터툴즈 한글인식 문제 (1)	2007.06.19
MySQL에서 지원하는 데이터 타입 (1)	2007.06.19
innerText, innerHTML ,outerText, outerHTML (2)	2007.06.19
putty의 다양한 기능을 활용해봅시다. (3)	2007.06.19
opener (3)	2007.06.19

현재글스타일 시트(Style Sheets)

Leading the Web to its Full Potential... (웹의 모든 잠재력을 이끌어 내기 위하여...)

불면증, 2030, 아, 안동, ㅋㅋ, me2photo, ㅋㅋㅋ, 헬스, ㅋㅋㅋㅋ, 주, 미투데이, 프로홈, 직장인, 대구, me2supporter, 다이어트, me2mobile, 대구웨딩연합회, 디자이어, 2fb,

Today :
Yesterday :

A.N.C.H.I.H.O.O.N