기존에 태그매니아 고급강좌부분에 스타일 시트를 2페이지 분량의 간단하게 올려 놨었는데요..... 많은 분들이 그것으로만은 스타일 시트가 뭔지 감이 잡히질 않는 다는 말씀을 하셔서 이번 업데이트 때 스타일 시트 특강을 마련하게 되었습니다. 스타일 시트 역시 기초부터 차근차근 설명해드릴 텐데요...... 제 강좌만 잘 따라오신다면 스타일시트는 자바스크립트 보다는 훨씬 쉽기 때문에 태그처럼 일주일안에 다 배우 실 수 있을 겁니다. 단, 태그나 자바스크립트 역시 마찬가지이지만 태그매니아에서는 어느 정도 중급수준까지는 올려 주지만 나머지 응용부분에서는 여러분들이 직접 웹서핑을 하면서 하나하나 경험하면서 배우셔야 할 겁니다. 그래야 실력도 금방 금방 늘게되고...또한 제가 늘 시간이 많은 게 아니라서요.....응용강좌까지 할려면 내년 이맘때 쯤이 되어야 할 수 있을 까요? 물론 그때까지 태그매니아 홈페이지가 존재한다면은요...^^ 그전까지는 자기가 직접 찾아가면서 배우셔야 할 겁니다. 흠.....^^ 왠지 두부(頭部)가 길어지는데......그럼 이제부터 스타일 시트 특강을 시작하도록 하겠습니다. 잘 보고 배우시길 바랍니다.
※ 스타일 시트(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">
<!--
h1 { color : red ; font-size : 14px; font-family :돋움체; }
b { background : green; font-size : 10px; }
-->
</style>
|
위에 예제를 보면 알 것 같다 하시는 분들은 태그를 열심히 배우신 분일 것이고 모르겠다 하시는 분들은 그렇지 않은 분일 겁니다. 하나 하나 설명해드리자면 <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 의 비율로 상속을 받습니다. 그냥 참고적으로 알고 계시길..... 흠... 계속 이어서 스타일 시트의 상속성에 대해서 이야기 하겠습니다. 스타일 시트에서 상속성이란 ... 흠...뭐라 설명해야 되나?? 굳이 표현을 하자면 스타일 시트로 지정된 해당 태그 내에 다른 태그에 대해서도 지정된 스타일 시트의 속성이 적용되는 것을 말합니다. 이해 되세요? 뭔 소리인지 모르는 분들이 더 많을 것 같아 한가지 예를 들어 설명 드리겠습니다.
<style type="text/css">
<!--
u { color : red ; font-family : 돋움체; }
-->
</style>
<u>u 태그는 내에 있는 <b>b태그는</b> 어케?</u> |
위에 예제를 보면 <u></u>태그에 대해서 스타일 시트를 지정해 주었죠. 색은 빨간색, 글자체는 돋움체로 지정해주었는데.....예제를 보면 <u></u>태그 내에 있는 <b></b>태그에 대해서까지 그 속성이 적용되죠. 이걸 바로 스타일 시트의 상속성이라고 합니다. 어때요? 간단하죠? 이것은 주로 어디에 많이 쓰냐면 은요....해당 웹페이지 전체에 공통적으로 해당되는 속성을 지정해 줄때 사용됩니다. body { font-size : 13px; } ☜이런 식으로 하면 해당 웹페이지의 글자크기가 모두 13px가 된답니다. 그렇다면 여기서 의문점이 하나 생기죠? 만약 위와 같이 설정한 웹페이지에서 글자크기가 다른 글자를 표현할려면 어떻게 해야 할까요? 쉽게 말해서 모두 글자크기가 13px인데 그 중 일부분을 15px로 해주고 싶다면...? 거 역시 간단하죠.....아래 예제를 보면 바로 이해가 되실 겁니다.
<style type="text/css">
<!--
u { color : red ; font-size : 13px; font-family : 돋움체; }
b { color : blue ; font-size : 15px; font-family : 궁서체; }
-->
</style>
<u>u 태그는 내에 있는 <b>b태그는</b> 어케?</b> |
어때요? 일부분(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 부분에 넣어주시면 되죠. 간단하죠?
흠......스타일 시트 첫번째 특강은 여기서 마치도록 하겠습니다. 두번째 특강에서는 class 사용방법에 대해서 알아보도록 하겠습니다. 푸~하~(하품하는 소리 -_- ;; ) 잠이 와서 안되겠습니다. 오늘 셤도 끝나고 해서 올나이트를 한번 해볼까 했는데....역시 나이는 못 속이는 구만요........ 한창땐...3일동안 밤을 세워도 끄떡 없었는데......... zzzzz
그럼 20000
☞ class
특강1 마지막에 예고 드렸듯이 이번에는 스타일 시트에서의 class를 지정하는 방법을 배워보겠습니다. 여기서 말하는 class는 자바 애플릿에서 사용되는 class파일과 전혀 다른 것이니 혼돈하지 마시길 바랍니다.
스타일 시트는 임의의 태그에 그 속성을 지정해주어서 해당 태그에 속하는 요소에 대해서 그 속성을 나타내어 주게 하는 작용을 하는 데요.....그럼 여기서 같은 스타일을 적용받는 태그내에서 다른 스타일을 적용시킬려면 어떻게 해야 할까요? 앞에서 배운 인라인 방식을 이용해서 직접 해줄 수 있겠지만 그건 일일이 태그내에 다 적어주어야 하기 때문에 좀 짜증나죠? 바로 여기서 사용될 수 있는게 class입니다. 예를 한번 볼까요?
<style type="text/css">
<!--
body { color : red; font-size:12px; font-family: 돋움체; }
h1 { color: blue; font-size:25px; }
p { color : green; font-size: 14px; }
p.love { color : black; font-size: 15px; }
p.story { color : skyblue; font-size: 18px; }
-->
</style>
<body>
<h1>태그매니아</h1>
<br>스타일 시트에서의 class사용법(여긴 body 부분)
<p>사용방법은 다음과 같다.(여긴 p 부분) </p>
<p class=love>여긴 class=love 인 곳이다.</p>
<p class=story>여긴 class=story 인 곳이다.</p>
<p>어때요? 확 차이가 나죠? </p>
</body>
|
위에 예제를 태그연습장에서 실행시켜보면 같은 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 파일 지정하는 다른 방법에 대해서 설명하려다가 넘어온거죠. 계속 설명드리도록 하죠. ^^ 앞장에서는 태그.클래스이름 ☜ 이런 식으로 지정해주었는데요.... 이번 예제에서는 약간 다르게 해준 거랍니다.
<style type="text/css">
<!--
.love { color : red; font-size: 13px; font-family: 돋움체; }
.story { color : blue; font-size: 18px; }
.kiss { color : skyblue; font-size: 23px; }
-->
</style>
<body class=love>
<h1 class=kiss>태그매니아</h1>
<p>여기는 love 클래스의 영향을 받게 되지요 ^^</p>
<p class=story>여기엔 story 클래스가 지정됬구요..^^</p>
이상 태그매니아 였습니다. ^^v
</body>
|
위에 예제를 보시면 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 의 마지막 페이지이네요.^^ 강좌를 쓴다는게 한 페이지 쓰는데 보통 1시간 이상 걸린답니다. 보기에는 간단한 것 처럼 보여도....직접 쓰는 사람한테는 엄청난 시간과 노력이 필요하답니다. 예제를 하나 만들 때도 이렇게 생각해보고 저렇게도 생각해보고... 하고 하고 해서..... 올리곤 한답니다. 그렇다고 강좌 잘 썼다고 누가 상주는 것도 아니고 단지 자기만족과 부수적으로 실력향상 차원에서 하는 거죠. 그러니깐 딴 생각하지 마시고 집중해서 보시길 바라겠습니다. (헉.... 왠지 선생님이 된 느낌..-_- ;;; ) 제가 특강2 첫장에서 클래스를 정의해줄때 점(.) 을 붙여주지 않으면 그 뒷부분은 태그로 인식한다고 한 적이 있는데요..(기억 안 나시는 분은 빨랑 확인하고 오세요 -.-) 이번에는 그에 관한 것을 배우보도록 하겠습니다. 일단 예제를 보고 설명드리도록 하겠습니다.
<style type="text/css">
<!--
h1 b { color: red; }
p u { color: blue; font-family: 궁서체; }
-->
</style>
<body>
<h1>태그<b>매니</b>아</h1>
<p>스타일 시트 <u>특강 중</u> 입니다.</p>
</body>
|
위에 예제를 실행시켜봐서 음...뭔지 알겠다 하시는 분은 지금까지 스타일 시트를 잘 이해하고 있다고 볼 수 있습니다. 그렇다고 그렇지 안 으신 분들은 걱정할 필요가 없습니다. 왜냐면 제가 이제부터 설명을 드릴 테니까요.^^ 제가 class 정의할 때 점(.)을 찍어 주지 않으면 뒤에 오는 클래스명을 태그로 인식한다고 했었는데요....그건 좀 쉽게 설명드리기 위해서 그렇게 한거구요......위에 예제는 클래스하고는 아무런 상관이 없는 예제입니다. 위에 예제를 보시다시피 태그 2개를 같이 스타일 시트를 정의시켜 줄 경우에는 앞에 오는 태그 내에 있는 뒤에 오는 태그에 대한 스타일 정의를 해주는 거죠. 즉, <h1> 태그 내에 있는 <b> 태그 부분에 대해서 스타일이 적용되는 것입니다. 이해되시죠? 다시 설명하자면 두번째 라인의 스타일 시트 부분인 p u { color: blue; font-family: 궁서체; } ☜ 이 부분을 풀이해보면 <p>태그 내에 있는 <u>태그의 요소에 대해서 색은 파란색, 글자체는 궁서체로 하라는 말이죠. 어떠요? 이번에는 확실히 이해되시죠? 이 스타일 시트 방법을 사용하면 특정 태그안에 있는 특정 요소에 대해서 그 속성을 설정해 줄 수 있게죠^^ 그런데 아직까지도 모르겠다하시는 분은 없을 줄 아는데...혹시 계신다면 연습 많이 해보세요. 더 이상 쉽게 설명은 곤란합니다. -_- ;;;
이렇게 해서 스타일 시트 특강2는 마무리 되어지는 군요. ^^ 지금까지 뭘 배웠었는지 머리 속으로 한번씩 떠 올려보시고 ...... 어떤 철학자가 이런 말을 했죠. 인간은 망각의 동물이다. 한번만 보고 돌아선다면 오래 못가 잊어 먹게 되니...홈페이지 만들때 직접 사용해보기도 하고 자주 연습해보세요. 그럼 절대 잊는 일은 없을 겁니다. 그럼 즐거운 하루 되시고 여기서 마치도록 하겠습니다.
특강 3장부터는 각각의 스타일 시트의 속성에 대해서 알아보도록 하겠습니다. 먼저 글자에 대해산 스타일 시트의 속성에 대해서 알아볼 텐데요.... 글자에 대한 속성으로는 font-family , font-size , font-style , font-variant , text-transform , text-decoration 이 있습니다. 앞에 family 와 size 는 알겠는데... 나머지 뒤에 3개에 대해선 잘 모르겠다구요? ^^ 이미 알고 계시는 분도 있을 테지만, 스타일 시트 첨 하시는 분이라면 당연 모르겠죠. 그 궁금증을 이제부터 풀어드리죠 ^^
☞ font-family
글자...그리고 가족? 이란 뜻인데요...-_- ;;; 글자가족? 바로 글꼴을 의미하는 겁니다. 글꼴이 뭔지는 아시겠죠? ^^ 돋움체, 명조체, 궁서체, 바탕체.. 기타 등등을 글꼴이라고 하죠. 물론 영자체도 포함됩니다. 이 글꼴을 스타일 시트에서 조정해주는 속성이 font-family 이죠. 일단 예제를 하나 볼까요?^^
<style type="text/css">
<!--
h2 { font-family: 가는각진제목체, 솔체, 궁서체, 돋움체; }
b { font-family: verdana, helvetica, sans-self; }
-->
</style>
<body>
<h2> font-family 속성은 글자체를 결정해줍니다.</h2><br>
<b>tagmania since 1999 </b>
</body>
|
위에 예제를 실행시켜보면 여러분들의 컴퓨터 사정에 따라 글자체가 각각 다르게 나타날 텐데요....일반적으로 폰트의 경우 홈페이지를 제작하는 사람이 '가는각진제목체'를 이용해서 글자를 적어주었다면 그 홈페이지를 보는 방문객의 컴퓨터에 '가는각진제목체'라는 글자가 있어야 만히 볼 수가 있답니다. 만약 해당 홈페이지를 보는 방문객의 컴퓨터에 '가는각진제목체' 라는 글자체가 없다면 그 방문객에게는 기본글자체로 밖에 보이질 않는답니다. 즉, 원래 홈페이지 제작자가 의도했던 대로 홈페이지를 보여줄 수 없게 되는 거죠. 이러한 사고(?)를 방지하기 위해선 홈페이지를 제작할 때 모든 방문객들의 컴퓨터에 들어있는 공통된 글자체, 즉 돋움체, 궁서체, 바탕체, 굴림체, 신명조체 같은 기본글자체를 이용해서 만드는 것이 가장 좋은 방법입니다. 물론 화려하고 자신의 마음에 꼭 드는 폰트(글자체)가 있을 땐 해당 폰트를 사용하는 건 자기 맘이지만 일반적으로 방문객들이 가지고 있는 폰트(글자체) 가 아닌 폰트를 사용한다면 자기와 해당폰트를 가지고 있는 소수의 방문객들에게만 보여지게 되겠죠.
그런데....위에 예제의 경우 글자체를 하나만 적어준게 아니라 여러 개를 적어주었죠? 가는각진제목체, 솔체, 궁서체, 돋움체 ☜이렇게 4개의 글자체를 순서대로 적어주었는데...이렇게 적어준 이유는 만약 방문객의 컴퓨터에 '가는각진제목체' 가 없다면 그 다음 폰트인 '솔체'가 보여지게 되죠. 그런데 '솔체'도 없다고 하면 그 다음인 '궁서체'가 보여지게 되는 겁니다. 궁서체까지 없다면 최후로 돋움체가 보여지게 되겠죠. ^^ 돋움체는 기본폰트 이니깐 다 보여지게 되겠죠. ^^ 이때 주의 할 점이 될 수 있는 대로 마지막에는 기본폰트를 적어주라는 것입니다. 왠지는 아시겠죠? ^^
영자체도 위에 설명한 것과 마찬가지랍니다. 그리고 인라인 스타일을 사용할 때는 폰트의 이름에 작은 따옴표를 해줍니다. 이런식으로 해주죠. ☞ body { font-family: "센스체","돋움체","궁서체" } 또한 다른 속성과 함께 사용할 때는 font-family 속성을 가장 나중에 적어 줍니다. 익스플러워3.0에서는 font-family 속성이 가장 나중에 있지 않으면 이후의 모든 css 를 무시해버리기 때문이라고 하는데........그런데..아직도 익스플러워 3.0 사용하시는 분 계시나요? ^^
다음 페이지에서는 font-size 에 대해서 알아보도록 하겠습니다.
☞ font-size
이번에는 font-size 에 대해서 알아보도록 하겠습니다. 말 그대로 글자크기를 조절해주는 속성입니다. 일반적으로 태그를 사용해서는 글자크기를 최대로 해봤자 <font size="7"> 까지나 <H1> 까지밖에 표현을 못해 줍니다. 그러나 스타일 시트를 이용하면 글자크기를 얼마든지 사용자 맘대로 크게 하거나 작게 표현 할 수 있답니다.
우선 font-size 속성을 사용하는 경우 글자크기의 수치는 포인트(pt) , 픽셀(px) , 인치(in) , 센티미터(cm) 등이 있습니다. 이 중에서 여러분들이 쓰기 가장 편한 것을 골라 사용하시면 됩니다. 왜냐면 어떤 것을 쓰나 크기만 정확히 나타내어 주면 되는 거기 땜시... 핫핫 ^^> 단, 한가지만 골라서 그것만 계속 사용하시길.... 안 그러면 나중에 헤갈려여... 일반적으로 포인트(pt)나 픽셀(px)을 가장 많이 쓴답니다.(태그매니아에선 무조건 픽셀을 사용함-_-+) 이제 예제를 하나 봐볼까요? ^^
<style type="text/css">
<!--
p { font-size : 13px ; }
b { font-size : 13pt ; }
h1 { font-size : -1in ; }
u { font-size : -1cm ; }
-->
</style>
<body>
<p>일반적으로 픽셀(px)과 포인트(pt) 값이</p><br>
<b>비교적 정확하게 크기를 설정해줄 수 있습니다.</b><br>
<h1>안녕하세요? 인치(in)와 센티미터(cm)의 경우는 </h1><br>
<u>마이너스(-) 1값을 사용할 수 있답니다.</u>
</body>
|
예제를 확인해보셨나요? 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 값을 지정해 줄 수 있습니다.
예제를 봐 볼까요?
<style type="text/css">
<!--
body { font-style : italic ; }
p { font-variant : small-caps ; }
u { font-weight : bold ; }
-->
</style>
<body>
안녕하세요? 태그매니아 입니다.<br>
<p> tagmania ☜이건 소문자 였는데..대문자로 나오네요</p>
<u> TAGMANIA </u>
</body>
|
위의 예제를 실행시켜 보면 글자가 다 이탤릭체로 나오게 됩니다. 그리고 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 : 아무 효과도 없게 함
속성을 설명을 했으니 이제 예제를 보면서 실제로 어떻게 사용되는지 알아볼까요?
<style type="text/css">
<!--
h1 { font-size:30px; font-weight:bold; }
body { font-size:20px; }
.love { text-transform:lowercase; text-decoration:underline; }
.story { text-transform:uppercase; text-decoration:line-through; }
.kiss { text-transform:none; text-decroation:none; }
a { text-transform:none; text-decoration:none; }
-->
</style>
<body>
<h1>스타일 시트</h1>
<p class=love>TAGMANIA에서는 태그와 각종 자바스크립 예제를 제공하고 있습니다.</p>
<p class=story>style sheet 특강을 실시하고 있습니다.</p>
<a href="이건 연습"> 링크인디....밑줄이 없네...</a>
</body>
|
예제를 실행시켜 보니 바로 알겠죠? ^^ 잘 모르겠다고 하시는 분들은 소스를 주의깊게 째려보신 다음에 위에 속성 설명한 거하고 비교하면서 하나씩 봐보세요. 그러면 제가 굳이 설명 안 하더라도 다 아실 수 있을 겁니다.
여기까지 읽어주신 거 고맙고요...여기서 세번째 특강은 마무리 짓도록 하죠. ^^
벌써 네번째 특강인가요? ^^ 하루에 특강 하나씩 만들다 보니...벌써 업데이트 준비한지 나흘이 지났군요. 헉..-_- ;; 공부도 해야 되는디....... 공부 이야기가 나왔으니간 하는 말인데......요즘 대학에서의 학문의 의미는 단지 직업을 갖기 위한 하나의 수단으로 밖에 보여지질 않네요..... 진정한 학문으로서 탐구는 없고..... 조금이라도 좋은 먹고 살 자리를 갖기 위한 도구(?)라고 할 수 있을 까요? -_- ;;; 가끔씩은 대학에 가기위해 발버둥(?)을 치고 있는 고3생들을 보면 안타깝다는 생각이 들기도 하구........ 왜 그렇게 대학에 올려고 하는지.....--;;; 하긴 나도 그땐 그랬으니깐..... 오잉? o.0 ! 근뎅 무슨 이야기 하다가 옆길로 빠졌는지....핫핫^^> 스타일 시트 네번째 특강 시작하도록 하죠 ^^
☞ word-spacing , letter-spacing
word-spacing 속성은 단어사이의 여백을 조절해주는 기능을 하고, letter-spacing 속성은 글자사이의 여백을 조절해주는 기능을 합니다. 넘 간단한 거라 더 이상 말이 필요 없습니다. 예제 하나 보고 담으로 넘어가겠습니다.
<style type="text/css">
<!--
h1 { word-spacing:5px; }
h2 { letter-spacing:7px; }
-->
</style>
<body>
태그매니아 스타일 시트
<h1>word-spacing 속성은 단어사이의 여백 조정</h1>
<h2>letter-spacing 속성은 글자사이의 여백 조정 </h2>
</body>
|
여기서 속성값의 수치단위는 픽셀, 포인트, 센치, 인치 등을 사용할 수 있습니다.
☞ line-height
직역해보면....선-높이가 되죠. 말 그대로 줄과 줄 사이의 수직 간격을 조절해주는 속성입니다. 이걸 뭐라그러더라???? 자간이라고 하나? 줄간? -_-;;; 갑자기 생각이 나지 않네....... 하여간 줄 간격 조절해주는 것이라고만 알고 있으면 됩니다. 역시 예제하나 보고 설명 드리겠습니다.
<style type="text/css">
<!--
p { font-size:13px; line-height:2; }
h3 { font-size:20px; line-height:200%; }
.love { font-size:12px; line-height:10px; }
-->
</style>
<body>
<h3> LCD와 PDP의 인기</h3><br>
<p> 디스플레이의 경우 보다 부피가 적은 모니터와 선명하고 안정적인 화면이 동시에 요구되고 있어 LCD와 PDP제품의 개발 및 줄시가 증가하고 있다. LCD모니터는 일본시장에서 이미 테스크탑 모니터의 50%이상을 차지하는 등 빠른 성장세를 나타내고 있으며 가격도 지속적으로 하락하고 있어 국내에서도 올 하반기를 기점으로 시장점유율이 큰 폭으로 상승할 것으로 전망된다.</p>
<p class=love>PDP는 현재까지 40인치 이상의 대형화면을 표현하는 데 가장 적합한 매체로 알려져 대형화면을 요구하는 소비자를 대상으로 판매가 확대되고 있다. PDP는 기존 모니터와 비교해 처박형이면서 완전평면으로 대형화면표시가 가능하며, 시야각이 160도 이상으로 넓어 차세대 디스플레이로 각광받고 있다....</p>
</body>
|
자~ 위에 예제를 태그연습장에서 실행시켜 보면 재미있는 결과가 나타날 것이다. <h3>태그에 적용된 스타일 시트의 경우 글자크기가 20px임에도 불구하고 line-height를 200%로 잡아주었기 때문에 그 두배인 40px 크기로 브라우져에 표현된죠. 또한 <p>태그에 적용된 스타일 시트의 경우 글자크기13px에 line-height를 수치단위 없이 2로만 적어 주었을 경우 마찬가지고 앞의 글자크기에 2배가 곱해지기 때문에 line-height의 값은 26px이 되는 것입니다. 또한 love class를 적용시킨 부분의 경우 오히려 앞의 글자크기12px보다 line-height의 값이 작기 때문에 예제에서 보시다 시피 줄끼리 겹쳐지는 상황이 나타나게 됩니다. 어때요? 이해되십니까? ^^ 아마 이 부분에서 막 헤갈릴려고 하시는 분들이 계실지도 모르나.....모를 경우에는 예제의 수치를 바꿔가면서 연습해보세요. 그럼 언젠가는 이해가 되실 겁니다. ^^ (헉..넘 무책임한 운영자 -_-;;;) 다음 페이지로 넘어가져^^
☞ text-align , text-indent
text-align 속성은 뭘 까요? 그냥 척 보면 알겠죠.... 정렬해주는 기능이죠. 뭘 정렬해주냐고요? 글자뿐만 아니라 이 속성에 포함된 요소의 정렬방식을 결정해주는 기능을 합니다. text-indent속성은 들여쓰기의 길이를 정해주는 기능을 합니다. 들여쓰기가 뭔지는 아시겠죠? 문단의 첫 부분을 다른 행에 비해 조금씩 넣어주는 것을 말하죠. 자...그럼 예제를 보겠습니다.
<style type="text/css">
<!--
p { font-size:13px; color:blue; text-align:right; }
.love { text-indent:5%; text-align:left; }
-->
</style>
<body>
<p> 디스플레이의 경우 보다 부피가 적은 모니터와 선명하고 안정적인 화면이 동시에 요구되고 있어 LCD와 PDP제품의 개발 및 줄시가 증가하고 있다. LCD모니터는 일본시장에서 이미 테스크탑 모니터의 50%이상을 차지하는 등 빠른 성장세를 나타내고 있으며 가격도 지속적으로 하락하고 있어 국내에서도 올 하반기를 기점으로 시장점유율이 큰 폭으로 상승할 것으로 전망된다.</p>
<p class=love>PDP는 현재까지 40인치 이상의 대형화면을 표현하는 데 가장 적합한 매체로 알려져 대형화면을 요구하는 소비자를 대상으로 판매가 확대되고 있다. PDP는 기존 모니터와 비교해 처박형이면서 완전평면으로 대형화면표시가 가능하며, 시야각이 160도 이상으로 넓어 차세대 디스플레이로 각광받고 있다....</p>
</body>
|
어때요? 첫번째 문단의 경우 우측정렬이 되져...그리고 두번째 문단은 좌측정렬이 되면서 문단 첫머리가 지정해준 만큼 들여쓰기가 되구요.....
☞ margin-top , margin-left , margin-bottom , margin-right
마진(margin).....이란..? 설명하자면 여백을 조절하는 속성이라고 할 까요? 제가 말솜씨가 없어서 그런지 ... 아님 원래 우리말로 표현이 어려운 건지.....더 이상 어떻게 설명 드리는 게 좀 힘 드네요..^^ 이건 예제를 보면서 익히면 금방 이해하실 수 있을 겁니다. 예제를 보기 전에 참고적으로 , margin속성의 수치단위는 px , pt , in ,cm를 사용할 수 있고요... 마이너스(-)값도 사용할 수 있습니다. 퍼센트 값을 사용할 수 도 있는데 그러면 브라우져에 따라 유동적이기 때문에 원래 원하던 표현이 안될 수도 있답니다. margin 속성은 잘 만 사용하면 정말 멋진 웹페이지를 만들 수 있답니다. 이제 예제를 볼까요?
<style type="text/css">
<!--
body { font-family: 돋움체; }
.love { font-size : 130px; color:red; font-weight:bold; margin-bottom:0px; }
.story { margin-top:-110px; margin-left:87px; margin-bottom:0px; font-size:30px; color: blue; }
.kiss { font-size:15px; margin-left:50px; margin-right:50px; text-align:justify; }
-->
</style>
<body>
<p class=love>태그매니아</p>
<p class=story>태그를 좋아하는 사람들의 배움터</p>
<p class=kiss>태그를 좋아하는 사람들의 모임입니다. 태그를 좋아하는 사람들의 홈페이지입니다. 태그를 좋아하는 사람들의 장소입니다. 태그를 좋아하는 사람들의 터입니다. 태그를 좋아하는 사람들의 공간입니다. 태그를 좋아하는 사람들의 클럽입니다. 태그를 좋아하는 사람들의 지대입니다. </p>
</body>
|
어때요? HTML로는 도저히 표현할 수 없는 효과를 낼 수 있죠? margin-top은 상단여백을 조정해주고 , left는 왼쪽여백 , right 는 오른쪽여백 , bottom은 당연 아래쪽 여백을 조절해주는 속성이죠. 멋지죠? 예제에서 봤듯이 margin속성을 이용하면 글자끼리도 겹치게 할 수 도 있고 해당 요소를 부라우져의 경계선에서 반쯤 걸쳐있게 할 수 도 있습니다. 엄청난 기능이죠.^^ 연습 많이 해서 완전히 자기 것으로 만들면 더욱 더 좋겠죠?
margin속성에 대해선 이 정도에서 마치도록 하고 다음 페이지로 넘어가도록 하겠습니다.
☞ padding-top , padding-left , paddding-bottom , padding-right
앞페이지에서 배운 margin하곤 비슷한 기능인데요...역시 여백조정 속성입니다. 그러나 padding속성은 margin속성에 비해 글자나 요소간에 겹치게 할 수가 없답니다. margin보다는 그리 많이 사용되지 않는 듯 하네요..^^
☞ border-width , border-color , border-style
border속성은 해당요소의 테두리의 스타일을 지정하는 기능을 합니다. margin보다는 좁은 영역을 가지는 데요.....(이 말을 이해하실지....ㅜ.- ) border-width 속성은 테두리의 굵기를 지정해주고, border-color 속성은 색상을 , border-style 속성은 스타일을 지정해주는 기능을 합니다. 예제 하나 볼까요? ^^
<style type="text/css">
<!--
body { margin-left:10%; color:red; font-size:13px; font-weight:bold; font-family:arial; }
h1 { font-size:30px; }
.love { border-width:10px; border-style: inset; border-color:yellow; }
.story { border-width:20px; border-style: double; border-color:skyblue; }
.kiss { border-width:30px; border-style: outset; border-color:black; }
-->
</style>
<body>
<h1>태그매니아</h1>
<p class=love> i love you</p>
<p class=story> i love you</p>
<p class=kiss> i love you</p>
</body>
|
border-width 의 값이 커질 수록 테두리의 두께가 두꺼워지고 border-style의 경우 예제에서 보여진 inset , double , outset 뿐만 아니라 solid , dotted , dashed , ridge 등이 있습니다. 또한 border-color의 경우 그 border-style에 따라 그 색상이 잘 나타날 때도 있고 그렇지 않는 때도 있다는 것을 유의하시길 바랍니다.
현재 시각 새벽 02시 20분이네요.....잠도 오고.....피곤도 하고.....낼 학교도 일찍 가봐야 되는데..... 이 말은 즉...." 여기서 네번째 특강 마치도록 하겠습니다." ☜이 말을 하고 싶다는 말이져....^^>핫핫~ 여기서 마치도록 하겠습니다. 마지막으로 한 마디...『 연습 많이 하세요 』
이번 강좌에서는 컬러와 관련된 스타일 시트에 대해서 알아보도록 하겠습니다. 컬러와 관련된 스타일 시트 속성으로는 color, background-color, background-image, background-repeat, background-attachment, background-position, background 등이 있습니다. 모두 다 색상, 배경색과 배경이미지에 대한 것들인데요....그렇게 어려운 것은 없을 테니 설명 잘 들으시기 바라겠습니다. ^^
☞ color , background-color
말 그대로 색상과 배경색을 지정해주는 속성입니다. 사용방법은 아래와 같습니다.
body { color:red; background-color:#FFFFF; }
더 이상 설명이 필요 없겠죠? ^^ 아...그리고 색상을 지정해줄 때 위에 예제에서와 같이 두 가지 방법이 있는데요..첫째는 영문색상명(red , blud , yellow , black ...등등)을 적어주는 것이고 두 번째는 RGB색상코드를 적어주는 방법입니다. RGB색상코드에 대해서 알고싶으신 분은 ☞여기를 클릭해보시면 알 수 있습니다. 간단한 예제 하나 보고 넘어가도록 하죠 ^^
<style type="text/css">
<!--
body { color : darkblue ; background-color : #CC99FF ; font-weight:bold; }
-->
</style>
<body>
<p>내가 당신을 얼마만큼 사랑하는지 당신은 알지 못합니다.
이른 아침, 감은 눈을 억지스레 떠야하는 피곤한 마음 속에도
나른함 속에 파묻힌 체 허덕이는 오후의 앳된 심정속에도
당신의 그 사랑스러운 모습은 담겨 있습니다. </p>
</body>
|
☞ background-image , background-repeat
background-image 속성은 말 안 해도 알고 계시겠죠? ^^ 그쵸. 배경이미지를 지정해주는 속성이죠. background-repeat 속성은, 일반적으로 우리가 HTML를 사용해서 배경이미지를 넣으면 웹페이지의 화면보다 배경이미지가 작은 경우 배경이미지가 화면에 좌우로 반복이 되어서 채워지게 됩니다. 이걸 전문용어로 패턴이라고 하는데요..이러한 패턴을 조절해주는 속성입니다. 조절하기에 따라 한 방향으로만 패턴 되도록 하게 할 수 도 있으며 아예 패턴없이 표현할 수도 있습니다.
background-image 속성의 사용방법은 다음과 같습니다.
b { background-image: url(http://tagmania.net/img/filter1.gif) ;}
background-repeat 속성은 네가지의 값을 정해줄 수 있는데요.....다음과 같습니다.
no-repeat : 배경이미지가 반복이 안되게 합니다.
repeat : 모든 방향으로 반복되게 합니다.
repeat-x : x방향(가로)으로만 반복되게 합니다.
repeat-y : y방향(세로)으로만 반복되게 합니다.
즉 , background-repeat : repeat-x ☜이런 식으로 값을 넣어줄 수 있습니다.
지면 관계상 예제는 다음페이지에서 보도록 하겠습니다. 넘어 가죠? ^^
background-images 와 background-repeat 에 대한 예제를 보도록 하겠습니다.
<style type="text/css">
<!--
body { background-image : url(http://tagmania.net/img/jang.jpg) ; background-repeat : repeat-y ; }
.love { font-size : 13px; color : green; font-family : 돋움체; }
-->
</style>
<body>
<p class=love>배경이미지가 세로방향(y방향)으로만 반복이 되죠. ^^ background-repeat의 속성값을 바꿔가면서 연습을 많이 해보세요. ^^ 그럼 이해가 더욱 더 빠를 겁니다. </p>
</body>
|
☞ background-attachment
이 속성은 HTML에서의 bgproperties="fixed" 와 같은 기능을 하는 속성을 합니다. 즉, 여러분들이 웹서핑을 하다보면 어떤 곳에서는 스크롤바를 내려도 배경이미지는 고정되어 있고 안에 내용만 스크롤바에 따라 움직이는 것을 보셨을 겁니다. 그건 대부분 HTML을 이용한 건데요....스타일 시트를 이용해서도 같은 효과를 낼 수 있습니다.
<style>
body { color : green ; font-size : 13px; background-image : url(http://tagmania.net/img/jjh.jpg); background-attachment : fixed; }
</style>
<body>
<p>내가 당신을 얼마만큼 사랑하는지 <br>당신은 알지 못합니다. <br>
이른 아침, <br>감은 눈을 억지스레 떠야하는 <br>피곤한 마음 속에도 <br>
나른함 속에 파묻힌 체 <br>허덕이는 <br>오후의 앳된 심정속에도 <br>
당신의 <br>그 사랑스러운 <br>모습은 담겨 있습니다. </p>
<p>내가 당신을 <br>얼마만큼 사랑하는지<br> 당신은 알지 못합니다. <br>
층층 계단을 오르내리며 <br>느껴지는<br> 정리할 수 없는 <br>
감정의 물결속에도 <br>십년이 훨씬 넘은 <br>
그래서 이제는<br> 삐걱대기까지 하는 <br>낡은 피아노 <br>
그 앞에서 지친 <br>목소리로 <br>노래를 하는 내눈 속에도 <br>
당신의 그 <br>사랑스러운 마음은 <br>담겨 있습니다. </p>
</body>
|
어때요? HTML을 사용한 경우와 같은 효과가 나올 겁니다. 직접 HTML을 사용하지 못하는 경우 스타일 시트를 사용하면 되겠죠? ^^
☞ background-position
배경 이미지의 위치를 조절해주는 속성입니다. 속성값은 키워드식 , 픽셀방식 , 퍼센트(%) 방식이 있습니다.
키워드 방식 body { background-position: top left; }
픽셀방식 body { background-position: 40px 50px }
퍼센트 방식 body { background-position: 40% 50% }
키워드 방식의 경우 top , bottom , left , right , center 등을 사용할 수 있다. 위에 보기처럼 top left 를 사용한 경우 브라우져 상단 왼쪽에 배경이미지를 위치시키는 것을 의미한다. 가운데 쉼표(,)가 없다는 것에 주의 하자. 픽셀과 퍼센트방식은 브라우저의 왼쪽 상단 원점으로부터 해당 수치만큼 x측 y측으로 위치를 지정해주는 것이다.
<style type="text/css">
<!--
body { background-image: url(http://tagmania.net/img/gil2.gif); background-repeat: no-repeat; background-position: bottom right ; }
-->
</style>
<body>
어때요? 길동이 아저씨네요^^<br>
지금 사용한 방식은 키워드 방식입니다.<br>
여러분들이 픽셀방식과 퍼센트 방식으로 <br>
바꿔가면서 연습해보세요.
</body>
|
위의 예제의 경우 배경이미지를 no-repeat 로 설정해준 다음 background-poition을 키워드 방식으로 해준 것입니다. 여러분들이 픽셀방식과 퍼센트 방식으로 바꿔 가면서 연습을 해보세요. 제가 백번을 말해도 한번 직접 해보는 것이 더 이해가 빠르답니다.
☞ background
지금까지 background 에 대한 속성들을 배워왔습니다.. color , image , repeat , position 을 배웠는데....각각의 속성을 적어줄때 background ☜이 단어를 여러번 써야 하는 불편함이 있습니다.(타수도 잘 안 나오는데..영타로 꼬박꼬박 칠려고 하니 짜증나죠^^) 다음과 같이 하면 단 한번만 쓰고 각각의 속성을 표현해 줄 수 있습니다.
body { background : url (이미지주소) 30% 50% repeat-x fixed white }
background 를 맨 처음에 한번 적어준 다음 각각의 속성값을 적어주면 되죠.^^ 위에 속성들의 순서를 보면 처음에 이미지주소 , 이미지 위치 , 이미지 반복 , 배경이미지고정 , 배경색 이 되겠죠?^^
어때요? 쉽죠? ^^
이번 장에서는 스타일 시트 위치지정과 레이어에 대해서 알아보겠다.
☞ position , left , top
스타일 시트의 요소의 위치를 조절해주는 속성이다.
h2 { left: 100px; top:40px; }
대충 이렇게 사용됩니다. position 속성의 경우 absolute(절대적위치)와 relative(상대적위치)로 값을 지정해줄 수 있습니다. 어떤 말인지 대충 감이 오죠? ^^ 브라우저에서 해당 요소를 표현해줄때 위치를 브라우저의 크기에 따라 상대적으로 해줄 것인가 아니면 브라우저의 크기에 상관없이 항상 고정된 부분에 위치시켜 줄 것인가를 결정해주는 거죠.
left , top의 경우 직접적으로 위치를 적어 주는 속성입니다. left : 50px의 경우 브라우저의 왼쪽으로부터 우측으로 50px 떨어진 곳에... top : 60px의 경우 브라우저 상단에서부터 아래쪽으로 60px 부분에 위치시키란 의미죠. 아시겠죠? ^^
<style type="text/css">
<!--
body { font-family : 돋움체; }
h1 { color : yellow; font-size : 70px; }
.love { left : 100px; top : 43px; }
.story { positon : relative; left : 40px; top : 10px; color : red; }
-->
</style>
<body>
<h1> 태그매니아 스타일 시트 특강</h1>
<div class=love> 태그매니아 홈페이지 제 4차 전면 사이트 개편과 더불어 <span class=story>스타일 시트 특강을 마련 하게 되었다. </span>많은 도움이 됬으면 한다.</div>
</body>
|
☞ width , height
position 과 같이 사용되며 요소의 넓이와 높이를 조절해서 전체적인 레이아웃을 조절하는 역할을 합니다. width와 height 속성은 다른 크기 지정 속성과 같은 단위(px , pt , cm ,in)를 사용합니다.
☞ z-index
레이어 효과를 사용할 때 레이어의 층의 순서를 결정해주는 속성입니다. z-index 값이 작을수록 아래 층을 의미합니다. 간단한 예제를 볼까요?
<style type="text/css">
<!--
body { font-size : 23px; }
.love { font-color : green; z-index : 1; left : 100px; top : 150px; }
.story { font-color : orange; z-index : 3; positon : absoluet; left : 150px; top : 100px; }
-->
</style>
<body>
<div class=love> 아래층 래이어죠</div>
<div class=story>위층 레이어 입니다.</div>
</body>
|
기본적인 스타일 시트 강좌는 여기서 마치도록 하겠습니다.
특강6장 까지는 스타일 시트의 원리 및 사용방법 , 각 속성에 대해서 알아보았습니다. 지금부터는 웹에서 주로 사용되는 스타일 시트에 대해서 알아보도록 하겠습니다.
☞ 밑줄 없애기 & 앵커 가상 클래스 효과
먼저 우리가 글자에 하이퍼링크를 설정해주면 글자가 파란색으로 변하면서 밑줄이 쫙~ 생기죠... 이걸 없에는 방법이 있습니다. 물론 스타일시트를 이용해서 없앨 수 있습니다. 게다가 앵커 가상 클래스까지 첨부시키면 더욱 멋져 보이죠. 이걸 스타일 시트라인에 넣어보세요 a { text-decoration : none; color : black; } 그럼 밑줄이 없어 질겁니다. 자~~ 보세요.....
<style type='text/css'>
<!--
body { font-family: "돋움", "돋움체", "Arial";}
A:link { text-decoration:none; color: 00448B;}
A:visited { text-decoration:none; color: green;}
A:active { text-decoration:underline; color:red ;}
A:hover {color: black; text-decoration:underline;}
-->
</style>
<body>
<a href="3"><h2>밑줄 없애는 것과 앵커 가상 클래스 효과</h2></a>
어때요? 잘 되죠? ^^
</body>
|
설명을 드리자면 text-decoration 속성을 이용해서 처음 link 부분에서는 none 값을 주어서 밑줄을 없애는 거죠. 다른 visited 부분에서도 밑줄을 없애주고 active와 hover 부분에서는 underline 를 주어서 마우스가 링크 위에 가면 밑줄이 생기게 하는 거죠. 또한 색상도 마찬가지로 각각 다른 게 설정을 해주면 마우스를 대면 색상이 변하게 됩니다. 좋은 틱이죠? ^^ 여러분들 홈페이지에 맞게 고쳐서 사용해보세요. ^^
☞ 배경이미지를 하나만 나타나게 하기 (패턴 없애기)
HTML을 이용해서 배경이미지를 넣으면 배경이미지가 반복이 되어 화면에 가득차게 됩니다. 원래 패턴을 위한 배경이미지라면 몰라도 그렇지 않은 배경이미지는 보기에 별로 좋지 않을 겁니다. 이럴 경우를 해결하기 위해 배경이미지를 자신이 원하는 위치에 딱 하나만 넣을 수 있는 방법에 대해서 알아보겠습니다.
<style type="text/css">
<!--
BODY {background: url(http://tagmania.net/images/5.jpg); background-repeat:no-repeat;
background-position:50% 50%}
-->
</style>
<body>
<font color="green" size="2" face="돋움">
어때요? 근사하죠? ^^ 브라우저의 크기를 변하게 해도 <br>퍼센트를 지정이 되었기 때문에 <br>항상 정 가운데 배경이미지가 놓이게 되죠 ^^
</font>
</body>
|
위에 예제는 스타일 시트의 background-repeat 와 background-position 속성을 이용해서 표현을 한 거죠. 지금까지 특강을 잘 들어 오신 분이라면 충분히 이해하실 수 있을 겁니다.
이번 강좌에서는 실제로 스타일 시트가 어떻게 사용되는 가에 대해서 간단하게나마 알아볼 수 있도록 하겠습니다.개인 홈페이지의 경우 그렇게 자주 스타일 시트가 사용되지는 않습니다. 그러나 포털 사이트나 커뮤니티 등 개인이 아닌 회사가 직접 운영하는 사이트의 경우 여러 웹 전문가들이 만들기 때문에 스타일 시트가 많이 사용되죠. 스타일 시트만 해도 한 페이지 분량정도 되는 사이트도 있답니다.(그렇지 않은 사이트도 많음) 이럴 경우 따로 css 파일을 만들어서 링크를 시켜야 겠죠. ^^ 예제로 하나 볼까요? ^^
<style type="text/css">
<!--
.base {font-family: "굴림"; font-size: 9pt;}
.baseup {font-family: "굴림"; font-size: 9pt;line-height:100%;}
.header {font-family: "굴림"; font-size: 10pt; font-weight: bold}
.header1 {font-family: "굴림"; font-size: 10pt; color:#4770AD; font-weight: bold;}
body {margin-top: 0px; margin-left: 16px}
a {font-family: "굴림"; font-size: 9pt; color:#333399; text-decoration: none}
.base1 {font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 8pt; }
.text1 {font-family: "굴림", "굴림체", "돋움", "돋움체"; font-size: 9pt; text-decoration: none; color: #A4C7EA}
.text2 {font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 8pt; text-decoration: none; color: #A4C7EA }
.text3 {font-family: "Arial", "Helvetica", "sans-serif"; font-size: 8pt; text-decoration: none; color: #A4C7EA; font-weight: bold}
a:hover {font-family: "굴림"; font-size: 9pt; background-color:none; color:DarkBlue; text-decoration:underline;}
a.header1:hover {font-family: "굴림"; font-size: 10pt; background-color:none; color:DarkBlue; text-decoration:underline; font-weight: bold;}
a.text1:hover {font-family: "굴림", "굴림체", "돋움", "돋움체"; font-size: 9pt; text-decoration: underline; color: #A4C7EA}
a.text2:hover {font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 8pt; text-decoration: underline; color: #A4C7EA }
//-->
</style>
|
사이버 방송영상 정보센타 홈페이지의 메인페이지 스타일 시트인데요....여기의 경우 주로 글자에 대한 색상과 글꼴 , 가상앵커클래스 효과를 사용한 것이죠. 흠...-_-;; 굉장히 복잡하게 보여도.... 자세히 보면 간단하죠. ^^
예제를 하나 더 본다면....
<style TYPE="text/css">
<!--
A:active {text-decoration:none;color:black}
TD, TH {font-size:9pt}
font {font-size:9pt}
.black {text-decoration:none;color:black}
.none {text-decoration:none}
.blue {color:blue}
.red {color:red}
.line {line-height:140%}
.line1 {text-decoration:none;color:black}
-->
</style>
|
위의 예제의 경우 어느 pc통신업체 홈페이지 스타일 시트입니다. 앵커가상클래스효과와 글자색상 등에 대해서 정의한 것이네요. ^^ 처음 것보단 간단하지만 내용은 거의 비슷하다고 할 수 있겠네요.
이렇듯 스타일 시트는 웹의 여러 부분에서 사용되고 있습니다. 여러분들도 이제 스타일 시트를 배웠으니 홈페이지 제작하는데 반드시 사용해보시기 바랍니다. 아마 홈페이지 제작하는데 많은 도움이 될겁니다.
지금까지 스타일 시트 강좌 들어 주신 거 감사 드리고요.... 시간에 쫒겨 강좌를 쓰다 보니 자세히 설명 못드리고 대충 넘어가는 부분이 많이 있을 겁니다.. 언제나 홈페이지만 잡고 살수 있는 것이 아니기 땜시.... 열심히 써볼려고 했었는데...잘 안된거 같아...좀 그렇네요. ^^> 하여간 지금까지 봐주신거 감사드리고 앞으로도 열심히 하는 태그매니아 될 수 있도록 노력하겠습니다.
한다. 
