<LINK>CSS2 들어가기 | ../ |
CSS 란? |
HTML 택의 고유 양식과 속성을 대체하고 새로운 양식을 제공하여 기존의 택 하나 또는 모든 택에 각기의 모양이나 색상, 위치 등을 지정할 수 있게 하고 이들을 효율적으로 다룰 수 있는 수단을 제공합니다. 이 새로운 양식으로 고정되고 제한되어 있는 HTML 고유 속성을 넘는, 새로운 양식을 표현할 수 있는 능력을 제공하여 다양한 양식의 문서를 정확한 위치에 배치할 수 있게 합니다.
페이지를 구성을 위해 <TABLE> 택을 사용하고 글꼴과 색상을 지정하기 위해서 <FONT> 택을 사용하여 모든 페이지에 일일이 지정하는 기존의 작성을 <P>, <B> 택 같은 전혀 성격이 다른 택으로 <table>과 <font> 택 양식을 만들 수 있습니다. 그리고 이들 지정을 택하나, 여러 택, 여러 페이지에 일괄적으로 지정할 수 있어 작고 관리하기 편한 페이지를 만들수 있습니다. 뿐만아니라 기존의 웹 페이지 개념을 넘는 DHTML, XML의 기초가 됩니다.
ie3 이상, nn4 이상, Opera3.5 등에서 지원합니다. 이들 브라우저가 CSS1, CSS2를 다 지원하지는 않고
지원하는 것도 브라우저에 따라서 서로 다르게 보이는 것이 있고 여러개 같이 사용시 작동하지 않는
버그도 있습니다.
Style 지정하기 |
<STYLE>, <LINK> 택에는 style 지정과 관계가 있는 "type", "media" 속성이 있습니다.
type는 style 로 사용할 언어를 지정하는 속성입니다. CSS, JavaScript, XSL 등 여러가지의 언어로 style을 사용할 수 있고 앞으로 더 늘어날 수도 있기 때문에 사용할 언어를 지정해야 CSS 구문을 다룰 수 있습니다. type을 지정하지 않으면 기본으로 "text/css"가 지정됩니다.
JavaScript 언어로 사용시는 "text/javascript"로 지정하는데 이 type은 W3C의 권고사항에 들어있지 않고 NN4에서만 작동합니다.
"media" 속성은 CSS를 사용할 매체를 지정합니다. 지정하지 않으면 기본으로 'screen'이 지정
됩니다. 즉, 컴퓨터 모니터입니다. CSS2로는 많은 매체에 문서를 표현할 수 있는데 종류는
screen, tty, tv, projection, handheld, print, braille, aural 그리고 다 지정하는 all 이 있습니다.
쉼표(,)로 여러개도 지정할 수 있습니다. media="screen, aural" 으로 모니터와 오디오 매체에 style을
사용하게 합니다. 각 매체들은 사용하는 software, hardware가 지원을 해야 사용할 수 있습니다.
nn4에서 media="screen" 외의 지정시 듣지 않습니다. media="screen, aural", media="all" 모두
작동하지 않습니다.
<STYLE> |
<HTML>
<HEAD>
<STYLE TYPE="text/css" MEDIA="screen">
<--
H3 { font-size: 12pt; font-family: 굴림; color: green; }
-->
</STYLE>
</HEAD>
<BODY>
<H3> 12pt 크기의 초록색의 굴림글자입니다. </H3>
<H3> 나도 12pt 크기의 초록색의 굴림글자입니다. </H3>
</BODY>
</HTML>
으로 H3 택에게 font-size, font-family, color 3가지를 지정하였습니다. 이렇게 사용할 style을 <style>
택으로 지정하여 <HEAD> 택안에 넣어줍니다. 지정하는 형식은
선택자 { 요소: 값 }
입니다. 선택자는 사용할 택이고 요소는 각 style이고 값은 요소가 사용할 값입니다. 요소와 값은 colon(:)으로
구분합니다. 여기서는 H3가 선택자이고 "font-size", "font-family", "color" 가 요소이고 "12pt", "굴림", "green" 이
값입니다. 두개 이상의 "요소: 값" 을 지정할 때는 각 값에 semicolon(;)을 덧붙여서 각 "요소: 값" 을 분리합니다.
<STYLE> 택의 시작과 끝에 html 주석문(<!-- -->)을 넣어주는 것은 <STYLE> 택을 지원하지 않는 브라우저는 style 내용을 페이지에 출력하는데 이것을 막기 위해서 넣어줍니다.
<STYLE TYPE="text/css"> <!-- --> <STYLE>
<택 STYLE="..."> |
<HTML> <HEAD> </HEAD> <BODY> <H3 STYLE="font-size: 12pt; font-family: 굴림; color: green;" > 12pt 크기의 초록색의 굴림글자입니다. </H3> </BODY> </HTML>로 각 택안에서 STYLE="요소: 값" 으로 직접 지정합니다. <STYLE> 택안에서 지정하는 것은 페이지에 있는 모든 <H3> 택에게 style을 지정하지만 이것은 지정한 택에게만 style을 지정하는 것입니다. 그래서 다음에 <H3> 택이 더 있더라도 그 <H3> 택은 style이 듣지 않습니다.
|
<LINK> |
<HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="my.css"> </HEAD> <BODY> <H3> 12pt 크기의 초록색의 굴림글자입니다. </H3> </BODY> </HTML>"rel" 속성은 현재의 문서와 "href" 속성에 지정한 화일의 관계를 지정합니다. rel="stylesheet" 는 연결한 화일을 페이지에서 style sheet로 사용한다고 지정하는 것입니다. 그러므로 style 을 <LINK> 택으로 사용시 같이 지정해 주어야 합니다.
style로 사용할 외부 화일은 <LINK> 택의 href 속성에 사용할 style을 지정해 놓은 화일의 이름을 지정합니다. 그러면 그 화일에 있는 모든 style을 페이지에 사용할 수 있습니다. my.css 화일안에 있는 내용은 style 구문만 넣어주면 됩니다. <style> 택 같은 어떤 택도 필요없습니다. 위의 예에서는
H3 { font-size: 12pt; font-family: 굴림; color: green; }
로 <STYLE> 택안에 지정한 style과 같은 구문을 넣어주면 됩니다. style 화일을 만드는 방법은 메모장 같은
문서 편집기로 사용할 style을 적고 확장자를 css로 지정하면 됩니다. <LINK> 택에서는 택의 끝을 알리는
</LINK> 택은 지정하지 않습니다.
.backImg { background-image: url(../images/back.jpg) }
로 외부화일에서 지정하면 nn4에서는 html 화일의 경로에서 상위 디렉토리 images 에서 'back.jpg'
이미지를 찾습니다. 그래서 <LINK> 택으로 지정한 외부화일에서 다른 화일을 지정하면
*.css 외부화일과 html 화일의 경로가 다르면 nn4에서 안나옵니다. 이 문제를 해결하는 방법은 아래 3가지 중에서 하나로 해결할 수 있습니다.
<STYLE TYPE="text/css">
.backImg { background-image: url(../images/back.jpg) }
</STYLE>
@import url() |
<STYLE type="text/css">
<!--
@import url("my.css")
-->
</STYLE>
@import url("css화일")는 꼭 <STYLE> 택의 맨 처음에 지정해야 하고 두 개 이상을 지정하면 두번째의 것이 첫번째의 것보다 우선합니다. <LINK>, <STYLE> 택의 'media' 속성처럼 매체를 지정할 수도 있습니다.
<STYLE type="text/css">
<!--
@import url("my.css") screen
@import url("my2.css") print, aural
-->
</STYLE>
로 사용할 매체를 한개나 여러개 지정합니다. 아직 nn4에서는 지원하지 않습니다. <LINK> 택과 같은
작동을 하기 때문에 <LINK> 택을 지정하면 ie4, nn4에서 같이 사용할 수 있습니다.
외부 화일을 연결하는 <LINK> 택이나 @import 화일 안에서 이미지같은 화일을 지정하는 요소를 지정할
때, 이미지의 경로는 CSS 화일 주소에서의 경로입니다. HTML 화일에서의 경로가 아닙니다.
페이지에 Style 지정과 적용 위치 |
<head>
<style type="text/css">
style 구문..
</style>
</head>
<body>
:
:
로 페이지 전체에 style을 지정하기 위해서 <style> 택을 <head> 택 안에서 지정합니다. <head> 택의
내용은 페이지의 본문인 <body> 보다 먼저 수행됩니다. 그래서 페이지 전체의 문서를 다루기 위해서
<style> 택을 <head> 택 안에 지정합니다. 만약 <head>택 안이 아니고 <body> 택의 중간에
<style> 택을 지정하면 지정한 후의 본문의 내용은 ie4에서는 듣지만 nn4에서는 듣지 않습니다.
<head>
</head>
<body>
<H1> H1 입니다. </H1>
<style type="text/css">
H1, H2 { color: red;}
</style>
<H2> H2 입니다. </H2>
ie4는 <H1>, <H2> 택이 둘다 빨간색이고 nn4는 <H2>만 빨간색으로 나옵니다.
보통 페이지 전체에 style을 적용하기 위하여 <style> 택을 <head> 택안에 지정합니다.
이런 동작은 <link> 택도 마찬가지입니다.
일반적이고 효율적인 STYLE 지정은 외부 화일로 여러 페이지에 지정하는 style 양식은 <LINK>택을
사용하고 한 페이지 전체에 지정은 <STYLE> 택으로 <HEAD> 택 안에 지정합니다.
그리고 특정 양식이 필요할 때에는 style 속성으로 택에 직접 지정합니다.
Style 지정과 주석 달기 |
주석을 지정하는 구문은 C, JavaScript와 비슷합니다.
H3 { font-size:12pt; color:aqua; }
/* 이것은 h3 택에 글자 크기를 12pt로 빨간색으로 지정하는 것이다. */
로 backslash(/)와 별표문자 (*)로 지정합니다. /* 주석.. */ 의 형식입니다.
주석안에 다른 주석은 지정할 수 없습니다. 즉, /* 주석1.. /* 주석2.. */ */ 는 안됩니다.