CSS는 HTML 문서의 스타일을 설명하는 언어이다.
HTML 요소가 표시되는 방법을 설명한다.
CSS란?
CSS는 Cascading Style Sheets의 약자
CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어다.
HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌다.
오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있다.
CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로
사이트의 전체 스타일을 손쉽게 제어할 수 있다.
웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 또한 쉬워진다.
css문법
CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성된다.
선택자는 CSS를 적용하고자 하는 HTML 요소를 가리킨다.
선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러싼다.
각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결된다.
이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마친다.
CSS 선택자
스타일을 적용할 HTML 요소를 가리키는 데 사용하는 선택자
- HTML 요소 선택자
- id 선택자
- class 선택자
- ground 선택자
HTML 요소 선택자
CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<style>
h2 {
color: teal;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>HTML 요소 선택자를 이용한 선택</h1>
<h2>이 부분에 스타일을 적용합니다.</h2>
</body>
|
cs |
아이디(id) 선택자
아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다.
웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 준다.
특정 id를 갖는 요소를 선택하기 위해 '#' 문자 사용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<style>
#heading {
color: teal;
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>아이디 선택자를 이용한 선택</h1>
<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>
</body>
|
cs |
클래스(class) 선택자
클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다.
특정 집단 : class
같은 클래스 이름을 가지는 요소들을 모두 선택해 준다.
마침표(.)+클래스 이름 사용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<style>
.headings {
color: lime;
text-decoration: overline;
}
</style>
</head>
<body>
<h1>클래스 선택자를 이용한 선택</h1>
<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>
<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>
</body>
|
cs |
*HTML요소는 한 개 이상의 클래스를 참조할 수 있다.*
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red,
center-aligned,
and in a large font-size.</p>
</body>
</html>
|
cs |
그룹(group) 선택자
그룹 선택자는 여러 선택자를 같이 사용하고자 할 때 사용한다.
어려 선택자를 쉼표(,)로 구분하여 연결
코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만들어 준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<style>
h1 {
color: navy;
}
h1, h2 {
text-align: center;
}
h1, h2, p {
background-color: lightgray;
}
</style>
</head>
<body>
<h1>제목 1 입니다.</h1>
<h2>제목 2 입니다.</h2>
<p>여기는 단락입니다.</p>
</body>
|
cs |
범용 선택 (*)는 페이지의 모든 HTML 요소를 선택한다.
* {
text-align: center;
color: blue;
}
'CSS' 카테고리의 다른 글
| 자주쓰는 속성(width,height,margin,padding,float,text-align,font) (0) | 2020.04.07 |
|---|---|
| CSS 링크 , 리스트 (0) | 2020.04.07 |
| CSS 기본 속성 - 텍스트 , font (0) | 2020.04.07 |
| CSS 기본 속성 - 색 , 배경 (0) | 2020.04.07 |
| CSS 적용 (0) | 2020.04.07 |
