* 참고 자료 : 코드잇 HTML/CSS 강의
1. 클래스
예를 들어, 아래와 같은 코드가 있다.
<p>의 글자 크기를 64px, 색을 블루로 입히는 코드이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html>
<head>
<title>id/class example</title>
<meta charset="utf-8">
<style>
p {
font-size: 64px;
color: blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>첫 번째 문단</p>
<p>두 번째 문단</p>
<p>세 번째 문단</p>
<p>네 번째 문단</p>
</body>
</html>
|
cs |
웹 페이지를 열어보면
이와 같이 나온다.
만약, 세번째 문단만 64px로 색을 블루로 입히고 싶다면 어떻게 해야 할까?
각각의 <p> 태그 4개를 구분할 방법이 없기 때문에 "클래스"를 사용해야 한다.
세 번째 문단의 코드와 스타일 코드를 다음과 같이 수정해 보자.
세 번째 문단 :
<p class="big-blue-text">세 번째 문단</p>
클래스는 이름과 같은 역할을 한다.
스타일 코드 :
.big-blue-text{
font-size: 64px;
color: blue;
}
수정한 뒤 웹사이트를 새로고침해 보면 세 번째 문단에만 스타일링 된 것을 확인할 수 있다.
만약에 다른 곳에도 똑같은 스타일을 입혀주고 싶다면 class="big-blue-text"를 넣어주면 된다.
<h2> 태그에 똑같이 스타일링해주겠다.
<h2> 태그에 class 코드를 넣어주고 웹페이지를 실행해주면,
"Heading 2"도 똑같이 스타일링 된 것을 확인할 수 있다.
또 하나의 클래스를 추가해 보자.
이미 class="big-blue-text"를 가지고 있는 <h2> 태그에 class="centered-text"를 추가해주려면 어떻게 하면 될까?
답은 간단하다. big-blue-text뒤에 띄어쓰기를 한 칸 하고 centered-text를 추가해주면 된다.
<h2 class="big-blue-text centered-text">Heading 2</h2>
코드를 다음과 같이 수정하고,
|
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
|
<!DOCTYPE html>
<html>
<head>
<title>id/class example</title>
<meta charset="utf-8">
<style>
.big-blue-text {
font-size: 64px;
color: blue;
}
.centered-text{
text-align: center;
}
</style>
</head>
<body>
<h1 class="centered-text">Heading 1</h1>
<h2 class="big-blue-text centered-text">Heading 2</h2>
<p>첫 번째 문단</p>
<p>두 번째 문단</p>
<p class="big-blue-text">세 번째 문단</p>
<p>네 번째 문단</p>
</body>
</html>
|
cs |
웹페이지를 실행해보면,
<h2> 태그에 클래스 두 개 모두 적용된 것을 확인할 수 있다.
클래스를 사용하면, 여러 요소들에게 같은 스타일을 입힐 수 있고 한 요소에 다양한 스타일을 입힐 수 있다.
2. 아이디
아이디는 클래스와 굉장히 비슷하다.
예를 들어, 첫 번째 문단에 id="best-text"를 넣어보겠다.
<p id="best-text">첫 번째 문단</p>
이제 스타일 코드에 best-text를 추가해보겠다.
#best-text{
color: orange;
}
* class는 . 을 사용하고 id는 #을 사용한다.
코드를 다음과 같이 수정하고,
|
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
|
<!DOCTYPE html>
<html>
<head>
<title>id/class example</title>
<meta charset="utf-8">
<style>
.big-blue-text {
font-size: 64px;
color: blue;
}
.centered-text{
text-align: center;
}
#best-text{
color: orange;
}
</style>
</head>
<body>
<h1 class="centered-text">Heading 1</h1>
<h2 class="big-blue-text centered-text">Heading 2</h2>
<p id="best-text">첫 번째 문단</p>
<p>두 번째 문단</p>
<p class="big-blue-text">세 번째 문단</p>
<p>네 번째 문단</p>
</body>
</html>
|
cs |
웹 페이지를 새로고침 하면,
id="best-text"를 가진 첫 번째 문단의 글자 색이 오렌지 색으로 입혀진 것을 확인할 수 있다.
여기까지만 보면 아이디와 클래스가 동일한 것처럼 보인다.
그럼 이 두 개의 차이점은 무엇일까?
3. 클래스와 아이디의 차이점
(1) 중복 클래스 가능 & 중복 아이디 불가능
클래스 같은 경우에는
이렇게 중복 클래스가 가능하지만,
아이디 같은 경우에는
이러한 중복 아이디가 불가능하다.
(2) 여러 클래스 가능 & 아이디 하나만 가능
클래스 같은 경우에는
이렇게 클래스 요소 여러 개 (big, blue)가 가능하지만,
아이디 같은 경우에는
이러한 여러 아이디(best, first)가 불가능하다.
4. 클래스를 써야 할까 아이디를 써야 할까?
여러 요소를 스타일링하고 싶다면 class를 사용하고 한 요소만 스타일링 하고 싶다면 id를 사용하자!
'웹 > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] Padding, Margin 패딩, 마진/ 2021.08.25 (1) | 2021.08.25 |
|---|---|
| [HTML/CSS] 텍스트 스타일링 / 2021.08.14 (0) | 2021.08.14 |
| [HTML/CSS] 링크, 이미지 / 2021.08.05 (0) | 2021.08.05 |
| [HTML/CSS] CSS기초, 옵셔널 태그 / 2021.08.04 (0) | 2021.08.04 |
| [HTML/CSS] 첫 번째 웹사이트 만들기 / 2021.07.29 (1) | 2021.07.29 |
