CSS (Cascading Style Sheet) - 기본
앎/web 2014. 2. 14. 00:52 |CSS (Cascading Style Sheet)
자주 사용하는 스타일을 미리 정해두고 특정 이름으로 스타일을 호출하여 사용한다.
문서와 디자인이 분리되므로 소스의 관리와 수정이 쉬워지며, 웹 페이지 로딩 속도가 빨라진다. 또한 웹 페이지 코드 작성 시간도 줄어드는 장점이 있다.
스타일 시트는 인라인 스타일, 내부 스타일, 외부 스타일로 크게 3가지로 나눈다.
1. 인라인 스타일 시트
태그의 속성 값으로 스타일을 정의한다.
<태그 style="color:red; font-size:30px;"> 태그 내용 </태그>
style 이라는 속성값으로 스타일을 지정한다. 각 속성간 구분은 ; 으로 한다.
2. 내부 스타일 시트
head 태그 사이에 스타일을 정의한다.
관리가 편하다.
종류에는 태그 스타일, 클래스 스타일, 네임드 스타일이 있다.
태그 스타일
태그를 지정하여 해당 태그에 대해 동일한 속성을 설정할 수 있다.
다음과 같이 정의한다.
태그이름 { 속성: 속성값;
속성: 속성값;
....
}
예를 들어, p라는 태그의 속성을 지정해보면 다음과 같다.
<head>
<style type="text/css">
<!--
p {
color : #0000ff;
font-weight : bold;
}
-->
</head>
<body>
<p align="center"> 테스트 </p>
</body>
이 때, body 내의 '테스트' 라는 문자열은 파란색에 두꺼운 속성으로 바뀐다.
특정 태그 안에 있는 태그의 속성을 지정하고자 하면, 아래와 같이 한다.
태그명 태그명 { 속성 : 속성값;
속성 : 속성값;
.....
}
예를 들어, div 태그 안에 h1 태그가 있을 때 h1 태그의 속성을 변경하려면 아래와 같이 사용한다.
div h1 { color : red;}
동시에 여러 종류의 태그 속성을 정의하려면 스타일 정의 시 여러 태그를 콤마(,)로 구분한다.
h1, h2, h3 { 속성 : 속성값;}
클래스 스타일
태그 중 특정한 태그에만 다른 속성을 지정하거나 속성을 추가할 때 사용한다.
다음과 같이 정의한다.
.스타일이름 { 속성 : 속성값;
속성 : 속성값;
....
}
스타일 이름 앞에 .은 정의할 때는 붙이지만 사용할 때는 붙이면 안된다.
<태그명 class="스타일이름" ...>
네임드 스타일
특정 범위를 지정하여 속성을 적용하고 싶을 때 사용한다.
다음과 같이 정의한다.
#스타일이름 { 속성 : 속성값;
속성 : 속성값;
....
}
스타일 이름 앞에 #은 정의할 때는 붙이지만 사용할 때는 붙이면 안된다.
<태그명 id="스타일이름" ...>
3. 외부 스타일 시트
외부에 css 파일을 만들고 링크는 거는 형태로 사용한다.
<link rel="stylesheet" type="text/css" href="스타일파일.css" />
'앎 > web' 카테고리의 다른 글
| CSS (Cascading Style Sheet) - 레이어 (0) | 2014.02.17 |
|---|---|
| CSS (Cascading Style Sheet) - 속성 (0) | 2014.02.17 |
| HTML 기본 태그 - 폼 관련 (0) | 2014.02.13 |
| HTML 기본 태그 - 페이지 관련 (0) | 2014.02.13 |
| HTML 기본 태그 - 표 관련 (0) | 2014.02.13 |