[1] 스타일 시트의 특징과 구성요소
1. 스타일시트
2. 구성요소
1) 선택자: 스타일을 정희할 대상, 하나 또는 그 이상의 선택자지정
2) 선언: 속성과 속성값으로 구성, 콜론(:)으로 구분되며 선언은 반드시 세미콜론(;)으로 끝나야 한다.
ex) P {font-size: 8pt ; color:purple}
[2] 스타일 시트의 선언 방법
1. 스타일 시트의 선언 방법에 따른 분류
1) 내부 스타일 시트
<head></head>사이에 <style></style>태그를 선언하여 지정
<head>
<style type="text/css">
<!--
P {font-size: 8pt ; color:purple}
-->
</style>
</head>
. type속성 : text/css, text/JavaScript
. 주석 : <!-- --> : 스타일시트를 지원하지 않는 브라우져에서 스타일시트가 선언된
부분이 웹 브라우저에 나타나지 않도록 해준다.
2) 외부 스타일 시트
별도의 파일에 스타일을 정의한 다음, 이 파일을 불러와서 웹 페이지에 스타일을 적용한다.
. <LINK>태그 이용
- rel 속성: 링크가 설정된 문서와 현재 문서와의 관계지정
- type속성: text/css, text/JavaScript(JSSS)
- href속성: 파일의 경로지정
ex)
<head>
<LINK rel="stylesheet" type="text/css" href="sheet.css">
</head>
. @import 명령어 사용
<STYLE>태그 내에서 사용하여야 하고 다른 선언들보다 앞에 존재해야 한다.
ex)
<head>
<STYLE type="text/css">
<!--
@import url("sheet1.css");
-->
</STYLE>
<LINK rel="stylesheet" type="text/css" href="sheet.css">
</head>
. inline style sheet
HTML태그에 style이라는 속성을 지정하여 해당 태그가 적용되는 범위 내에서 스타일을 지정 하고자 할 때 사용, <HEAD>, <TITLE>태그를 제외한 모든 태그에 사용가능.
<H1 style="color:blue ;font-weight:bold">
[3] 스타일 시트의 정의 방법
1. 기본적인 선택자(HTML 태그)를 이용하여 정의하는 경우(여러 개의 속성지정가능)
ex) H1 {color:red ; font-weight:bold}
2. 동일 속성을 여러 개의 선택자에게 정의하는 경우
ex) H1, H2, H3{color:red ;font-weight:bold ;font-family:"궁서"}
3. CLASS속성을 이용하여 스타일을 정의하는 경우
스타일을 지정하려는 대상의 종류에 제한받지 않고 스타일을 지정할 수 있는 방법이다.
1) 선택자.클래스명:특정 선택자(HTML태그)에만 적용되는 스타일 지정.
ex)
<head>
<STYLE type="text/css">
P.color{color:"blue"};
</STYLE>
</head>
<body>
<P class="color">..........</P>
</body>
2) 클래스명: 모든 태그에 적용되는 스타일을 지정하고자 할 때 선언.
ex)
<head>
<STYLE type="text/css">
<!--
.weight-family{font-weight:bold ;font-family:서울노이즈M};
-->
</STYLE>
</head>
<body>
<P class="color">..........</P>
<I class="weight-family">아이태그</I>
<H1 class="color">폰트태그</H1>
</body>
4. ID 속성을 이용하여 스타일을 정의하는 경우
마침표가 아닌 해시기호로 시작, 동일한 태그에 여러번 선언될 수 없음.
ID속성을 이용하여 지정된 스타일이 CLASS속성을 이용하여 지정된 스타일보다 우선적용.
ex)
<head>
<STYLE type="text/css">
<!--
#bold{font-weight:bold};
#color {color:blue};
-->
</STYLE>
</head>
<body>
<P class="color">..........</P>
<I class="bold">아이태그</I>
<H1 class="color">폰트태그</H1>
</body>
5. 문맥 선택자를 이용하여 스타일을 정의하는 경우
선택자에 포함된 특정 요소에 다른 스타일을 적용시키고자 할 때 사용하는 것이 바로 문맥 선택자.
ex)
<head>
<STYLE type="text/css">
<!--
P I HR{font-size:30pt ;color:red ;font-family:HY얕은샘물M};
-->
</STYLE>
</head>
<body>
<HR>
텍스트는 <P>줄바꿈이되어<I>글자의 크기가 30pt</I>우하</P>
</HR>
<I class="bold">아이태그</I>
<H1 class="color">폰트태그</H1>
</body>
6. 가상 클래스 선택자를 이용하여 스타일지정.
가상클래스, 가상요소(HTML4.0에 실재하는것으로 생각되는데 이름이 영...)
. 가상클래스
:link - 방문한 적이 없는 하이퍼링크를 나타내는 클래스
:visited - 이미 방문한 적이 있는 하이퍼링크
:hover - 마우스가 이동된 하이퍼링크
:active - 클릭되고 있는 하이퍼링크
. 가상속성 : color, text-decoration, font-family
ex)
<head>
<STYLE type="text/css">
<!--
A:link {color:색상명; text-decoration:밑줄지정여부; font-family:글꼴};
A:visited{color:색상명; text-decoration:밑줄지정여부; font-family:글꼴};
A:hover{color:색상명; text-decoration:밑줄지정여부; font-family:글꼴};
A:active{color:색상명; text-decoration:밑줄지정여부; font-family:글꼴};
-->
</STYLE>
</head>
<body>
<A href="http://www.kangnam.co.kr"><P>강남구홈테핑</P></A>
</body>
7. 가상 요소를 이용하여 스타일을 지정
<A>태그에 특정한 스타일을 지정하기 위해 가상 클래스를 생성한 것처럼 특정한 효과를 부여하기 위한 것임.
ex)
<head>
<STYLE type="text/css">
<!--
P:first-letter{font-size:30pt ;color:red; font-family:궁서}
P {font-size:30pt ;color:blue}
-->
</STYLE>
</head>
<body>
<A href="http://www.kangnam.co.kr"><P>강남구홈테핑</P></A>
<P>첫 글자에 스타일을 지정해주는 속성으로 아직까지 브라우저가 완벽히 지원하지 못함</P>
</body>
[4] 스타일 시트의 상속성
지정된 스타일이 특정 요소뿐만 아니라 그 요소의 자식에게도 적용됨을 의미.
P {font-size:15pt ; color:red};로 스타일이 지정되었을 경우 <P>태그사이에 있는
모든요소의 글자색은 빨강색이며 글자의 크기는 15pt, 만약 중간에 <b>태그가 있으면
<P>태그에 지정된 스타일이 먼저 적용된 후 <B>태그가 적용되어 굵은 글자체로 표현
된다.
(margin, padding, background, border등과 같이 박스에 관련된 스타일 속성들은 스타일
시트의 상속에 적용되지 않는다.)
[5] 스타일 시트의 우선 순위
(1) 일반 선택자와 클래스 선택자, ID선택자---> ID선택자 우선
(2) 상속된 스타일은 우선순위가 가장 낮음. 즉 별도의 스타일이 지정되어 있으면 지정우선
(3) 한 문서에 여러 개의 스타일시트가 선언되어 있으면 가장 마지막 스타일시트가 최우선
(4) !important를 스타일 선언시 지정하면 위치와 상관없이 모든 스타일시트보다 높은
우선 순위를 부여, 그러나 상속이 된다면 기본적으로 우선 순위가 낮아짐.
출처 : http://blog.naver.com/secretguy/130000263303
오렌지
