CSS란?

728x90

728x170

* CSS란?

- CSS(Cascading Style Sheets)는 웹 페이지에서 디자인이나 레이아웃과 같은 문서의 모양(스타일)에 관한 부분을 지정하기 위한 장치를 의미함.

- 현재 웹 페이지에서는 문서의 내용이나 의미 부여에 관해서는 HTML에서, 장식에 관해서는 CSS에서 한다는 개념이 일반적임.

* CSS를 작성하는 장소

- CSS를 작성하는 방법에는 크게 세 가지의 종류가 있음.

1) style 속성으로 지정하는 방법

- HTML 태그 안에 style 속성을 지정하여 요소에 스타일을 적용함.

<div style="color:red;">CSS를 적용했습니다.</div>

2) style 요소를 사용하여 동일한 파일 안에서 지정하는 방법

- HTML 파일의 head 요소 안에 style 요소를 넣어 스타일을 지정할 수 있음.

- 여러 개의 속성에 스타일을 적용할 수 있다는 장점이 있음.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
    <title>유미나의 홈페이지</title>
    <style type="text/css">
    #a1 {       /*셀렉터*/
        color: #55ffff;
        background-color: #9988bb;
    }
    </style>
</head>
<body>
    <p id="a1">
    css
    </p>
</body>
</html>
 
Colored by Color Scripter
cs

3) 외부 파일로부터 읽어 들이는 방법

- 스타일시트를 .css라는 확장자로 된 파일에 모아 두고, HTML 파일에서 읽어 들이는 방법.

- 여러 개의 HTML 파일에 동일한 스타일을 적용할 수 있음.

- 스타일시트 작성 시는 이 방법을 권장함.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// global.css
#a1 {       /*셀렉터*/
    color: #55ffff;
    background-color: #9988bb;
}
 
// a.html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="global.css">
    <title>유미나의 홈페이지 A</title>
</head>
<body>
    <p id="a1">
    CSS를 적용했습니다.
    </p>
</body>
</html>
 
// b.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    @import urll("global.css");
</style>
<title>유미나의 홈페이지 B</title>
</head>
<body>
    <p id="a1">
    CSS를 적용했습니다.
    </p>
</body>
</html>
Colored by Color Scripter
cs

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)

728x90

그리드형(광고전용)

저작자표시

'Programming > CSS3' 카테고리의 다른 글

CSS3의 새로운 스타일 2 (0)	2017.05.19
CSS3의 새로운 스타일 1 (0)	2017.05.19
벤더 프리픽스(Vendor Prefix) (0)	2017.05.19
CSS3란? (0)	2017.05.19
표시/배치 (Display/Placement) (0)	2017.05.17
배경/리스트 (Background/List) (0)	2017.05.17
박스 (Box) (0)	2017.05.17
색/텍스트 (Color/Text) (0)	2017.05.17