CSS요약 정리
작성: 카이 thruthesky@yahoo.co.kr
홈페이지: http://jangnans.com
기타: 퍼 가실때는 출처를, 질문은 http://jangnans.com/?qna 에 해주세요.
이전 강좌들을 통해서 HTML 에 대한 간략하면서도 실천적인 지식을 소개했었습니다.
본 강좌에서는 스타일 시트에 대해서 설명을 하겠습니다.
HTML 은 하나의 프로그램 언어입니다. CSS 엮시 마찬가지로 하나의 프로그램 언어입니다.
프로그램 언어라고 해서 무지 어려울거란 생각은 버립시다. HTML 은 비교적 쉬우면서도 만만한 프로그래밍 언어입니다. CSS 는 HTML 보다 약간 어렵지만, 엮시나 만만합니다.
도대체 왜 CSS 를 배워야하는 걸까요? HTML, FTP, 홈페이지 계정, 등등... 골치아픈게 한두가지가 아닌데, 꼭 이 만만하면서도 만만하지 않은 CSS 까지 해야하는걸까요?
CSS 를 익혀야 제대로된 디자인을 할 수 있습니다. 라고 여러분께 사상 주입을 하지 않겠습니다. 뿐만아니라 CSS 익히라고 여러분께 권하지도 않습니다. 다만 CSS 의 학습이 필요한 경우, 본 문서를 통해서 적은 시간투자로 많은 것을 얻을 수 있기를 바랍니다.
자 어디 한번 해 볼까요?
본 문서에서 스타일 시트에 대한 완벽한 내용을 담지는 않습니다. 그러나 스타일 시트를 이해하기 위한 기본 적인 지식을 전달하고 이를 바탕으로 응용하며 실전에 사용할 수 있는 기법들을 충분히 설명을 할 것입니다.
본 문서를 숙지하지고 필요할 때마다 반복해서 학습하시면 많은 도움이 되리라 확신합니다.
Cascading Style Sheets 언어는 CSS 로 표현을 하며 W3C 에서 제정하고 있습니다. HTML 과 함께 어떻게 CSS 를 사용하는지에 대해서 여러분께 보여드리겠습니다.
HTML 은 대충 아무렇게나 작성해도 웹브라우저에서는 대충 보입니다. 그러나 CSS 는 틀립니다. CSS 에서는 에러의 발생 빈도가 높으며 또 에러가 있으면 웹브라우저에 잘 표현되지 않습니다.
에러를 체크하는 프로그램으로 대표적인 HTML Tidy 가 있습니다. 관심이 있으시면 살펴보시기 바랍니다.
[*] 시작
우선 글자의 색깔과 배경의 색깔을 변경하는 것으로 부터 시작을 해 볼까요?
이를 위해서 STYLE 태그를 사용할 수 있습니다. 아래와 같습니다.
<style type="text/css">
body { color: black; background: white; }
</style>
style 태그는 시작태그와 끝태그가 있으며 그 사이에 스타일을 지정하는 문장이 들어갑니다.
그래고 대부분의 경우 style 태그는 HTML 문서의 HEAD 부분에 기록을 합니다. 가능한한 HEAD 부분에 기록을 해야합니다. 그것이 표준입니다. 어쩔 수 없는 경우, BODY 안에 넣어도 대부분의 경우 잘 동작합니다.
따라서 다음과 같이 할 수 있습니다.
<html>
<head>
<title> replace with your document's title </title>
<style type="text/css"> body { color: black; background: white; } </style>
</head>
<body>
replace with your document's content
</body>
</html>
위 HTML 문장을 보시면 style 태그의 시작태그와 끝태그 사이에 스타일 문장이 기록되었습니다.
위 예제에서 <style type="text/css"> 에서 type="text/css" 는 없어도 됩니다 따라서 <style> 로 줄여서 쓸 수 있습니다.
<style> 과 </style> 사이에는 스타일 문장이 들어갑니다. 이 스타일 문장은 스타일 규격에 맞도록 기록이 되어야합니다. 그렇지 않으면 에러가 발생하여서 웹브라우저에 어떻게 보여질지 예측할 수가 없습니다.
규칙은 태그 이름으로 시작을 하며 { 와 } 사이에 속성이 기록됩니다.
위 예에서는 body 태그가 바로 스타일 문장에서 사용된 태그입니다. body 태그는 웹페이지의 전체적인 표현을 담당합니다.
body { ...속성값 ... }
위 와 같이 기록을 하는 것이죠.
속성을 지정할 때에는 속성 이름을 먼저 기록하고 콜론을 기록하며 그 다음에 속성의 값을 적어주면 됩니다.
예를 들면 "color: white" 와 같을 경우 color 가 속성이며 그 다음에 콜론이 왔습니다. 그리고 속성의 값인 white (칼라 값) 가 기록되었습니다. 이 것이 하나의 속성을 지정하는 것입니다.
속성을 지정하였으면 마무리는 세미콜론으로 합니다. 즉, "color: white;" 와 같이 끝에 세미콜론을 적어주는 것이죠.
하나의 태그에 속성은 여러개 지정할 수 있습니다.
body { color: white; }
이렇게 body 태그에 color 라는 하나의 속성을 지정한 다음 또 속성을 지정할 수 있습니다. 예를 들면 아래와 같습니다.
body { color:white; background: black; }
위 처럼 태그 이름을 적고 그 다음에 { 를 쓰고, 속성 이름 color 를 쓰고, 콜론을 쓰고, 속성 값 white 를 쓰고 속성의 끝을 나타내는 ; 를 쓰고, 다시 새로운 속성 이름 backgournd 를 쓰고 콜론을 찍고 속성값을 지정하고 세미콜론을 찌고... 속성을 다 지정했으면 } 를 쓰고.... 이와 같이 하나의 문장(규칙)을 만들 수가 있습니다.
[*] CSS 링크 연결
좋은 스타일 시트가 만들어졌다면 여러분을 이 스타일 시트를 다른 여러 페이지에서 쓰고자 할 것입니다. 이때 가장 좋은 방법이 바로 CSS 링크를 거는 것입니다.
아래의 코드를 보십시오.
<link type="text/css" rel="stylesheet" href="style.css">
위 링크와 같이 쉽게 사용할 수 있습니다. link 태그는 HEAD 부분(<head> 와 </head> 사이)에 기록되는 것이 좋습니다.
다음은 HTML 문서 예제입니다.
<html>
<head>
<title> replace with your document's title </title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
replace with your document's content
</body>
</html>
위 예제를 보면 알 수 있듯이 link 태그는 HEAD 부분에 기록이 되어 있습니다.
link 태그의 rel 속성은 반드시 "stylesheet" 라고 표기되어야합니다. 그래야 웹브라우저가 올바로 인식을 합니다.
href 속성에는 스타일 시트 파일의 URL 주소를 기록합니다.
스타일 시트 파일은 다음과 같습니다.
/* style.css - a simple style sheet */
body {
margin-left: 10%; margin-right: 10%;
color: black; background: white;
}
스타일 시트 파일은 다음과 같습니다.
[*] 페이지 여백
margin-left, margin-right 속성을 통해서 왼쪽 오른쪽 여백을 줄 수 있습니다.
다음과 같습니다.
<style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
</style>
위 구문은 왼쪽, 오른쪽으로 10% 씩 여백을 주고 있습니다.
[*] 들여쓰기
제목과 헤더를 좀 더 잘 보이게 하려면 어떤식으로든 표현을 해야합니다. BODY 태그 뿐만 아니라 H1, H2 등에도 여백을 주어서 들여쓰기를 할 수 있습니다.
다음과 같습니다.
<style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
h1 { margin-left: -8%;}
h2,h3,h4,h5,h6 { margin-left: -4%; }
</style>
위 예제는 body 와 h1, 그리고 h2 부터 h6 까지 총 3가지 규칙이 있습니다.
웹 페이지에서 body 부분은 10% 의 여백이 있습니다. 여기에 h1 태그에 음수로 여백 값을 지정하면 들여 쓰기 형태로 표현이 됩니다.
[*] 상, 하 여백
margin-top 속성은 위쪽 여백을 나타내며 margin-bottom 은 아래쪽 여백을 나타냅니다. H2 태그에 기본적인 여백을 지정하기 위해서는 아래와 같이 하면됩니다.
h2 { margin-top: 8em; margin-bottom: 3em; }
위 구문에서 em 은 font 의 크기를 지정하는데 사용됩니다. 1 em 은 폰트의 높이를 나타냅니다. 웹브라우저마다 pixels 이나 points 의 수치 계산이 틀립니다. 가장 안전한 방법은 em 의 사용입니다.
위 예제 처럼 규칙을 만들면 모든 H2 태그에 여백이 지정됩니다. 특정 H2 태그에만 여백이 지정되게 하려면 규칙에 이름을 지어야합니다. 다음과 같이 할 수 있습니다.
h2.subsection { margin-top: 8em; margin-bottom: 3em; }
규칙에 이름을 짓는 것은 먼저 태그 이름으로 시작을 합니다. 그리고 점을 찍고 규칙의 이름을 기록합니다.
위 처럼 규칙을 만들면 h2 태그에 subsection 이라는 규칙을 만든 것입니다. 그리고 이의 사용은 다음과 같이 합니다.
<h2 class="subsection">Getting started</h2>
[*] 칼라 지정
칼라를 지정하는 예제는 처음의 body 태그에 나타나 있습니다.
다음과 같습니다.
body {
color: black;
background: white;
}
strong { color: red }
위 예제를 보시면 검색 글씨에 흰 바탕을 표현하는 규칙을 정한 것입니다. strong 태그는 붉은 색으로 글씨를 표현합니다.
[*] 보더와 백그라운드 지정
위 보더를 지정하는 것은 쉽습니다. H1~H6, P 태그 뿐만아니라 DIV 등 각종 태그에 보더를 나타낼 수 있습니다. 다음의 예를 보십시오.
div.box { border: solid; border-width: thin; width: 100% }
위 예제는 div 태그에 사용할 box 라는 이름의 규칙을 만든 것입니다. 다음과 같이 사용될 수 있습니다.
<div class="box">
The content within this DIV element will be enclosed
in a box with a thin line around it.
</div>
보더의 타입에는 dotted, dashed, solid, groove, ridge, insert, outset 등이 있습니다. border-width 속성은 보더를 그릴 너비를 나타냅니다. 두깨는 thin, medium, thick 등이 있으며 0.1em 과 같이 직접 지정할 수 있습니다.
백그라운드 지정에 대해서는 많은 예제를 보여드렸습니다.'
다음과 같이 background 속성을 지정하기만 하면됩니다.
div.box { border: solid; border-width: thin; width: 100%; background: white; }
[*] 링크에 칼라 표현
URL 링크에 여러분이 원하는 칼라를 지정하는 것으로 CSS 설명을 마치고자 합니다.
하이퍼 텍스트 링크(hypertext links)를 만들때 각 동작별로 색깔을 다르게 지정할 수 있습니다. 이미 방문한 링크의 경우 색깔, 또는 마우스가 링크를 가르킬때의 색깔 등을 표현할 수 있습니다. 다음을 보십시오.
:link { color: rgb(0, 0, 153) } /* for unvisited links */
:visited { color: rgb(153, 0, 153) } /* for visited links */
a:active { color: rgb(255, 0, 102) } /* when link is clicked */
a:hover { color: rgb(0, 96, 255) } /* when mouse is over link */
링크에 나타나는 언더라(밑줄)인을 없애고 싶다면 아래와 같이 하시면됩니다.
a.plain { text-decoration: none }
다음과 같이 사용하시면됩니다.
This is <a class="plain" href="what.html">not underlined</a>
이상으로 CSS 에 대한 설명을 마칠까합니다.
초보자가 처음에 익혀야할 것 중 중요한 것은 CSS 를 규칙을 작성하는 문법과 LINK 를 거는 방법 그리고 실제로 태그에 응용을 하는 것입니다.
CSS 와 함께 더욱 뛰어난 웹페이지를 작성하기를 바랍니다.
'WebPrograming관련' 카테고리의 다른 글
| IFRAME (0) | 2007.03.23 |
|---|---|
| css Peoperties (0) | 2007.03.18 |
| css 적용하기 (0) | 2007.03.18 |
