CSS(Cascading Style Sheet)
- HTML이 가진 디자인의 한계를 보완하기 위해서 만들어진 언어로,
웹페이지에 자주 적용하는 디자인을 하나의 규칙으로 정의한 뒤 호출하여 사용할 수 있다.
스타일 시트의 구성
- 스타일시트는 <head></head>사이에 위치하며, <style>로 시작하여 </style>로 끝난다.
- <style type="text/css">중 text/css는 스타일시트의 종류를 정의하는 부분이다.
예를 들어 접근하고자 하는 유형이 텍스트이고, 파일 형식이 css이라 한다면 text/css로
정의하는 것이다.(정의할 수 있는 종류로는 "text/css"와 "text/javascript"가 있다.)
- 정의 방법은 그 외에도 "inline style sheet"나 "Embeded style sheet", "External style sheet"가 있다.
스타일시트의 정의방법 - 스타일 정의
Embeded style sheet(head에 삽입하여 문서전체 관리)
이 방식은 <head>와 </head> 사이에 <style></style>로 사용하는 보편적인 방식이다.
[사용형식]
<html>
<head>
<style type="text/css">
<!--
규칙정의 부분
-->
</style>
</head>
<body>
</body>
</html>
Inline style sheet(각각의 태그에 적용하는 방법)
이 방식은 스타일 시트의 정의 없이 태그내에 직접 삽입하는 방식이다.
[사용형식]
<태그 style="속성정의부분;"></태그>
External style sheet(외부문서를 불러와 적용하는 방식)
<head>와 </head>사이에 <link>태그로 스타일시트 파일을 연결하여 사용하는 방식으로,
하나의 스타일시트를 여러 문서에 적용하는 방식이다.
[사용형식]
<head>
<link rel="stylesheet" type="text/css" href="파일명.css">
</head>
rel : 연결할 파일과 적용할 html 파일의 관계를 정의하는 속성
type : 연결할 파일의 형식( 이 형식은 meta 태그에도 적용할 수 있다.)
(= <meta http-equiv="content-style-type" content="text/css"/> ← 단 이 방법보단 <link>태그를 이용한 방식을 추천하는 바이다.)
href : 연결할 파일의 위치
Import style sheet(외부스타일 시트를 불러와 적용하는 방식)
- External style sheet와 동일한 용도로 사용되며 @improt 기호를 사용하여 외부 스타일시트를 불러와 사용한다.
[사용형식]
<head>
<style type="text/css">
<!--
@import url("파일명.css");
-->
</style>
</head>
스타일시트의 정의방법 - 속성
- 스타일시트의 규칙들은 선택자, 속성, 값으로 구성되며, 중괄호 안에 속성을 선언한다.
각각의 속성들은 세미콜론(;)으로 구별된다.
[기본 예제]
①선택자{②속성:③값;}
예)div{font-size:15; color:black;}
↑ 모든 div 태그에 글자크기 15px, 글자색깔이 검정색인 속성이 적용된다.
① 선택자(selector) : 지정할 스타일규칙, 태그의 이름으로 class 선택자, id 선택자, 태그 선택자, 전체 선택자가 있다.
② 속성 : 특정 디자인에 대한 속성(예:font-size(글자크기))
③ 값 : 그 속성에 대응하는 값.(예:font-size:15px;)
전체 선택자(All selector)
- 모든 html 태그에 속성을 지정하는 선택자로 (*)를 사용하여 선언한다.
[기본예제]
<style type="text/css">
<!--
*{font-size:15px;}
-->
</style>
<body>
<p>이것은 전체선택자를 지정한 것</p>
<div>이것 역시 전체선택자를 지정한 것</div>
<span>이것 역시 전체선택자를 지정한 것</span>
</body>
↑전체 선택자는 모든 태그에 속성을 지정하는 것이므로 별다른 규칙의 지정없이 사용한다.
태그 선택자(Tag selector)
- 태그 선택자는 지정한 html 태그에 속성을 부여하는 선택자로
- html문서 내의 지정한 모든 태그에 적용이 된다.
예제) <p>내용</p>
[기본예제]
<style type="text/css">
<!--
p{font-size:15px;}
-->
</style>
<body>
<p>이것은 태그선택자 p를 지정한것</p>
</body>
↑ 모든 p 태그에 글자크기 15px 속성이 적용된다.
* 참고1 : 태그 선택자는 한번에 여러 태그에 속성지정이 가능하며 쉼표로 구분한다.
예제) p, i, b{color:yellow;}
↑ p, i, b 태그에 노란색의 글자 색깔이 지정된다.
* 참고2 : 태그 선택자는 세부적인 선택이 가능하다.
예제) p b{color:red;}
↑ div 태그내에서 b태그를 사용하면 b태그의 글자색이 붉은 색으로 나타난다.
포인트 : 참고1과 2를 같이 사용해 보면 차이점을 더 쉽게 확인 할 수 있다.
[참고예제]
<head>
<style type="text/css">
<!--
p, i, b{color:yellow}
p b{color:red}
-->
</style>
</head>
<body>
<b>b태그 적용시</b>
<p><b>p 태그 내에서 b태그 적용시</b></p>
</body>
Class 선택자(Class selector)
- class 선택자는 이름 앞에 콤마(.)로 구별 할 수 있다.
- 클래스 선택자를 사용하기 위해서는 태그 내에 class 속성을 사용하면 된다.
예제) <p class="selector_name">내용</p>
[기본예제]
<style type="text/css">
<!--
.p{font-size:15px;}
-->
</style>
<body>
<p class="p">이것은 클래스 선택자 p를 지정한 것</p>
</body>
↑ 선택한 p 태그에 글자크기 15px 속성이 적용된다.
ID 선택자(ID selector)
- ID선택자는 class 선택자와 비슷하게 이름 앞에 샵(#)으로 구별 할 수 있다.
- ID선택자를 사용하기 위해서는 태그 내에 ID 속성을 사용하면 된다.
- ID선택자는 Class선택자와 달리 문서내에서 한군데에만 지정 가능하다
(주로 페이지 레이아웃에 사용)
예제) <div id="selector_name">내용</div>
[기본예제]
<style type="text/css">
<!--
#test{width:1000px; height:250px;}
-->
</style>
<body>
<div id="test"></div>
</body>
↑ 선택한 div 태그에 넓이 1000px, 높이 250px의 속성이 적용된다.
가상클래스(pseudo classes)
- 가상클래스는 실제로 존재하지 않지만 필요에 의해 임의로 붙여서 사용하는 클래스를 말함
- <a>(하이퍼링크)태그 관련 스타일이 대표적인 예이다.
[기본예제]
<style type="text/css">
<!--
a:link{color:black;}
a:visited{color:red;}
a:hover{color:yellow;}
a:active{color:blue;}
-->
</style>
<body>
<a href="#">하이퍼링크</a>
</body>
↑ a태그에 위의 스타일이 지정되며 각각 클릭해보면 쉽게 알 수 있다.
a:link : 클릭하지 않은 링크
a:visited : 한번 방문했던 페이지의 링크
a:hover : 링크에 마우스를 올렸을때,
a:active : 현재 활성화 되어있는 페이지의 링크
스타일의 상속
- 태그는 상위 태그로부터 스타일을 상속받는다
(상속은 부모로부터 자식이 유산을 상속받는다는 맥락으로 보면 편할 것이다.)
[기본예제]
<style type="text/css">
<!--
p{color:blue; font-size:9pt; font-family:돋움,돋움체}
-->
</style>
<body>
<p>스타일 시트는 <b>상속성</b>을 가지고 있습니다.</p>
</body>
↑ p태그 내의 <b>태그는 상위태그인 p태그의 글자색과 크기를 상속받는다.
-----------------------------------------------------------------------------
출처 http://blog.naver.com/nzoer/80107906532
