티스토리 뷰

[개발]프로그래밍/css3

[css3] 클래스 선택자 - 특정 부분에만 스타일 적용(.class명)

좋은 블로그 2021. 3. 15. 14:10
1. 개념
클래스 선택자 - 특정 부분에만 스타일 적용
같은 태그로 선언된 요소라고 할지라도 다른 스타일을 적용하고자 할 경우에 사용
즉 태그에 상관없이 특정 부분에 스타일을 적용
class를 선언하기 위해서는 마침표(.)를 먼저 쓰고 다음에 사용하고자 하는 클래스명을 선언
2. 태그
클래스 선택자
html5 코드
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
36
37
38
39
40
41
42
43
44
45
46
47
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
1
.textcolor_blue
{
color : blue ;
}
2
.textcolor_red
{
color : red ;
}
3
.border
{
border : 1px solid #000 ;
background : red ;
}
4
h2
{
font-weight : bold ;
background : yellow ;
}
5
h2.textcolor_red
{
font-size : 20px ;
background : blue ;
}
</style>
</head>
<body>
1번 적용
<p class = "textcolor_blue" >
textcolor_blue 클래스 적용된 요소
</p>
4번만 적용
<h2> 클래스 적용이 없는 순수한 h2 요소 </h2>
2,3,4,5번 적용
<h2 class = "textcolor_red border" > textcolor_red 클래스와 border 클래스가 적용된 h2 요소 </h2>
</body>
</html>
결과 화면
코드 설명
1
.textcolor_blue {.......}
1번은 지금 보시는 것처럼 textcolor_blue 라는 클래스 명 앞에 마침표(.)를 붙여서 클래스를 선언해주었습니다.
글자색을 파란색으로 하라는 스타일 명령어로 1번이 적용된 p태그 요소 안에는 글자 색이 파란색으로 되었음을 알 수 있습니다.
4
h2 { ........... }
4번을 먼저 설명하도록 하겠습니다.
지금 여기는 기존의 방식대로 태그에 스타일을 적용한 것입니다.
이것을 넣은 이유는 태그로 적용되는 스타일은 클래스가 있든 없든 적용이 된다는 것입니다.
(단 , 같은 스타일의 내용을 다른 것으로 선언할 경우 클래스 우선 적용)
그래서 h2로 선언된 모든 글자의 배경색은 노란색이고 글자가 굵게 적용된 것을 알 수 있습니다.
맨 마지막에 있는 배경색이 노란색이 아닌 이유는 아래에 설명하도록 하겠습니다.
2
.textcolor_red { ........... }
textcolor_red는 글자 색을 빨간색으로 스타일을 주는 클래스입니다.
그래서 h2 태그에 textcolor_red로 선언된 요소는 글자가 빨간색임을 확인하실 수 있습니다.
3
.border { ........... }
border 라는 클래스는 테두리를 검은색으로 하고 배경색을 빨간색으로 하는 스타일을 선언하였습니다.
그런데 여기서 border는 textcolor_red 다음에 한 칸 띠어서 border라고 써 있음을 알 수 있습니다.
이 예제를 담은 것은 클래스의 적용되는 순서를 알려드리기 위해서 입니다. 지금 5번에 보시면 h2.textcolor_red에 background가 blue 이고 border 보다 먼저 선언된 클래스임을 알 수 있습니다.
이렇게 되면 앞에 있는 스타일을 적용한 후에 앞에서 없는 스타일을 적용하게 되어서 테두리만 검은색으로 적용되는 것을 확인 하실 수 있습니다.
스타일 적용 순서(특정 부분 → 전체로 반영)
① 인라인 스타일 ( 태그 안에 style='font-size....' 처럼 직접 선언 )
② 클래스 순서로 적용
③ 태그
④ 전체 (*)
5
h2.textcolor_red { ........... }
이렇게 태그 하고 클래스를 선언하게 된다고 하면 해당 태그 안에 클래스에서만 스타일이 적용됩니다.
예를 들어서 <p class="textcolor_red"> 라고 선언된 태그가 있다고 하면 5번은 적용이 되지 않습니다.
위에서 보시는 것처럼 h2에 있는 textcolor_red라는 클래스에만 적용되기 때문입니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] !important - 높은 우선 순위 스타일 적용  (0) 2021.03.17
[css3] ID 선택자 - 한번만 스타일 적용  (0) 2021.03.16
[css3] * , tag - 전체 선택자와 태그 선택자  (0) 2021.03.12
[css3] 내부 스타일과 외부스타일(.css)  (0) 2021.03.10
[css3] /* */ - 스타일에서 주석처리  (0) 2021.03.09
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday