본문 바로가기
강의실/css

css2 들어가기

star story 2007. 7. 25. 10:14
CSS2 들어가기
 　


　


　

CSS 란?


CSS는 HTML 문서의 양식을 지정합니다.

HTML 택의 고유 양식과 속성을 대체하고 새로운 양식을 제공하여 기존의 택 하나 또는 모든 택에 각기의 모양이나 색상, 위치 등을 지정할 수 있게 하고 이들을 효율적으로 다룰 수 있는 수단을 제공합니다. 이 새로운 양식으로 고정되고 제한되어 있는 HTML 고유 속성을 넘는, 새로운 양식을 표현할 수 있는 능력을 제공하여 다양한 양식의 문서를 정확한 위치에 배치할 수 있게 합니다.

페이지를 구성을 위해 <TABLE> 택을 사용하고 글꼴과 색상을 지정하기 ㎸漫?<FONT> 택을 사용하여 모든 페이지에 일일이 지정하는 기존의 작성을 <P>, <B> 택 같은 전혀 성격이 다른 택으로 <table>과 <font> 택 양식을 만들 수 있습니다. 그리고 이들 지정을 택하나, 여러 택, 여러 페이지에 일괄적으로 지정할 수 있어 작고 관리하기 편한 페이지를 만들수 있습니다. 뿐만아니라 기존의 웹 페이지 개념을 넘는 DHTML, XML의 기초가 됩니다.

ie3 이상, nn4 이상, Opera3.5 등에서 지원합니다. 이들 브라우저가 CSS1, CSS2를 다 지원하지는 않고 지원하는 것도 브라우저에 따라서 서로 다르게 보이는 것이 있고 여러개 같이 사용시 작동하지 않는 버그도 있습니다.

　

Style 지정하기



Style을 사용하는 방법은 몇가지가 있습니다. <LINK>택으로 외부화일로, <STYLE> 택으로 문서전체에 지정, 각 택에 직접 지정 그리고 @import url()로 4가지로 사용할 수 있습니다.

　

  • <STYLE>
  • <LINK>
  • <택>
  • @import url()

<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>



문서 전체에 지정하는 방법은 <HEAD> 택 안에서 <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="...">



<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>



외부 화일을 연결하여 사용하는 <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> 택은 지정하지 않습니다.

　

<LINK> 택의 'href'에 지정한 외부 CSS 화일에서 background-image(이미지.jpg) 같은 것으로 다른 화일을 지정할 때는 CSS 화일의 경로에서 상대적인 경로로 지정됩니다. 하지만 이 경우 nn4에서 화일의 경로는 *.css 화일에서의 경로가 아니고 HTML 화일에서의 경로로 지정하는 버그가 있습니다. 

.backImg { background-image: url(../images/back.jpg) }

로 외부화일에서 지정하면 nn4에서는 html 화일의 경로에서 상위 디렉토리 images 에서 'back.jpg' 이미지를 찾습니다. 그래서 <LINK> 택으로 지정한 외부화일에서 다른 화일을 지정하면 *.css 외부화일과 html 화일의 경로가 다르면 nn4에서 안나옵니다.

이 문제를 해결하는 방법은 아래 3가지 중에서 하나로 해결할 수 있습니다.

　

  • 절대 경로로 지정한다.
  • html 화일과 *.css 화일을 같은 경로에 둔다.
  • <STYLE> 택이나 택에 직접 지정한다. 
<STYLE TYPE="text/css">
    .backImg { background-image: url(../images/back.jpg) }
</STYLE>



　

@import url()



style을 지정하는 방법중에서 위의 <LINK> 택과 비슷하게 외부 화일로 style을 지정하는 @import 가 있습니다. 형식은 @(골뱅이)를 import 지정자 앞에 붙여서 <STYLE> 택안에서 첫번째로 지정하면 됩니다. 형식은 <LINK> 택의 href 속성과 같은 작동을 하는 url(외부화일)로 지정합니다.

　

  • @import "my.css"
  • @import url("my.css")


두 개 중에서 하나를 사용하면 되고 @import "my.css"는 자동으로 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 지정과 주석 달기



주석은 많은 경우에 유용합니다. style을 지정할 때에도 마찬가지입니다. 많은 style을 지정한 것이 있는데, 주석을 달아서 설명을 해놓으면 시간이 지난후에 읽어보면 이해가 잘되기 때문입니다.

주석을 지정하는 구문은 C, JavaScript와 비슷합니다. 

H3 { font-size:12pt; color:aqua; } 
/* 이것은 h3 택에 글자 크기를 12pt로 빨간색으로 지정하는 것이다. */

로 backslash(/)와 별표문자 (*)로 지정합니다. /* 주석.. */ 의 형식입니다. 주석안에 다른 주석은 지정할 수 없습니다. 즉, /* 주석1.. /* 주석2.. */ */ 는 안됩니다.


　


 

'강의실 > css' 카테고리의 다른 글

property와 value 사용하기  (0) 2007.07.25
css2 선택자  (0) 2007.07.25
선택지 사용하기 ID  (0) 2007.07.25
선택자 사용하기-class  (0) 2007.07.25
선택자 사용하기-집합  (0) 2007.07.25

'강의실/css' Related Articles

티스토리툴바