|
스타일 시트를 사용하려면 스타일 시트 정의에 대한 기본 형식을 명확히 숙지 하여야 한다. 이에 스타일 시트를 정의 하는 형식과 이때 주의할 사항 등에 대해 살펴보기로 한다. |
1. 스타일 시트(CSS)의 정의 형식 및 구성 요소
|
[Form] |
|
<html>
<head>
<style type="text/css" >
<!--
Selector 1 {Property 1: Value 1; Property 2: Value 2; …… Property N: Value N;}
Selector 2 {Property 1: Value 1; Property 2: Value 2; …… Property N: Value N;}
Selector 3 {Property 1: Value 1; Property 2: Value 2; …… Property N: Value N;}
-->
</style>
</head>
<body>
<Selector 1>Selector 1의 속성값 적용</Selector 1>
<Selector 2>Selector 2의 속성값 적용</Selector 2>
<Selector 3>Selector 3의 속성값 적용</Selector 3>
</body>
</html> |
|
[CSS 정의시 사용되어지는 구성 요소] |
|
● Selector(선택자) : 여기서 선택자라 함은 HTML에서 사용하는 태그를 말한다. 선택자를 기존에 없던 태그로 선언하면 스타일이 적용되지 않으므로 유의한다.
● Property(속성) : 속성과 속성값을 구분하기 위해 :(콜론)을 사용하고 선택자는 별도의 개체이므로 선택자1에 정의된 속성과 속성값은 선택자2에 중복되어 사용되어질 수 있다.
● Value(속성값 ) : 속성+속성값을 선언문이라 하고 하나의 선택자에 여러개의 선언문을 추가 할 수 있다. 또한 선언문과 선언문은 ;(세미콜론)으로 구분해 준다. |
2. 실전 예제
|
[Source] |
[Description] |
|
<html>
<head>
<style type="text/css" >
<!--
h1 {
font-family : 굴림;
font-size : 20pt;
color : blue;
}
h2 {
font-family : 궁서;
font-size : 12pt;
color : green;
}
h3 {
font-family : 바탕;
font-size : 30pt;
color : red;
}
-->
</style>
</head>
<body>
<h1>CSS 실전 예제입니다. (굴림,20pt,파랑)</h1>
<h2>지금은 궁서체,12pt,초록색으로 보이져?</h2>
<h3>바탕체,30pt,빨강으로 바뀝니다.</h3>
</body>
</html> |
-><head> 태그내에 스타일 정의
-> CSS의 경우 스타일 타입을 "text/css"로 지정
-> 선택자 이름은 h1
-> 글자체는 굴림
-> 글자크기는 20포인트
-> 글자색은 파랑으로 지정
|
|
[Result] |
CSS 실전 예제입니다. (굴림,20pt,파랑)
지금은 궁서체,12pt,초록색으로 보이져?
바탕체,30pt,빨강으로 바뀝니다. |
▶ 스타일 시트를 정의하고 그 구성요소에 대해 살펴보았다. 약간의 오타로 인해 결과물이 달라지거나 스타일이 적용되지 않을 수 있으므로 철자에 유의하고 직접 한글자씩 쳐서 연습하는 것은 오류 수정능력을 키우는 방법이 될 수 있겠다.
☞ 잠깐만여! 강좌는 푹~ 퍼가지 마시고 링크만 걸어주세요~
작성자 : 웹제작 토탈 커뮤니티 (http://www.webmadang.net) 컴쟁이 | 
컴쟁이