클래스 선택자 같은 경우에는 여러 태그에 적용이 가능하지만 ID 선택자는 한번만 적용이 가능함
ID를 여러 군데에 쓰면 똑같이 class 처럼 적용이 되지만 ID는 중복해서 사용할 수가 없는 것이기에 한 ID 에서는 한 스타일만 적용
ID에 스타일을 주고자 할 경우에는 샵(#)을 붙여서 스타일을 선언
티스토리 뷰
1. 개념
ID 선택자 - 특정 부분에 한번만 스타일 적용
2. 태그
ID 선택자
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
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
<style>
1
#p_style
{
color
:
blue
;
}
2
.p_style_class
{
color
:
red
;
}
</style>
</head>
<body>
1번 적용
<p id
=
"p_style"
class
=
"p_style_class"
>
ID가 p_style인 P 태그의 요소에 스타일 적용
</p>
2번 적용
<p id
=
"p_style_two"
class
=
"p_style_class"
>
class가 p_style_class인 P 태그의 요소에 스타일 적용
</p>
</body>
</html>
|
결과 화면
코드 설명
1
#p_style {.......}
p 태그에 id를 p_style라고 지정해 주고 style에서 #을 붙여서 id 선택자로 스타일을 선언하였습니다.
그랬더니 글자색이 파란색으로 바뀐 것을 확인하실 수 있습니다.
혹시나 해서 비교를 하기 위해서 class 를 선언하고 동시에 ID와 class를 줘서 테스트를 진행해 보았습니다.
그랬더니 클래스 선택자보다 ID로 선택된 스타일이 먼저 적용되는 것을 확인할 수 있습니다.
만약 id에 선언된 중복된 스타일이 없을 경우에는 클래스에 있는 스타일도 적용됩니다.
그랬더니 글자색이 파란색으로 바뀐 것을 확인하실 수 있습니다.
혹시나 해서 비교를 하기 위해서 class 를 선언하고 동시에 ID와 class를 줘서 테스트를 진행해 보았습니다.
그랬더니 클래스 선택자보다 ID로 선택된 스타일이 먼저 적용되는 것을 확인할 수 있습니다.
만약 id에 선언된 중복된 스타일이 없을 경우에는 클래스에 있는 스타일도 적용됩니다.
2
.p_style_class { ........... }
2번은 id에 p_style_two라고 선언을 하였고 class를 p_style_class로 주었습니다.
스타일 쪽에서 p_style_two로 선언된 스타일이 없기 때문에 class로 주어진 p_style_class로 선언된 스타일이 적용되었습니다.
스타일 쪽에서 p_style_two로 선언된 스타일이 없기 때문에 class로 주어진 p_style_class로 선언된 스타일이 적용되었습니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] prefixfree.min.js - 브라우저 접두사 편하게 사용 (0) | 2021.03.18 |
|---|---|
| [css3] !important - 높은 우선 순위 스타일 적용 (0) | 2021.03.17 |
| [css3] 클래스 선택자 - 특정 부분에만 스타일 적용(.class명) (0) | 2021.03.15 |
| [css3] * , tag - 전체 선택자와 태그 선택자 (0) | 2021.03.12 |
| [css3] 내부 스타일과 외부스타일(.css) (0) | 2021.03.10 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday