• 회원가입
  • 로그인

[selector] CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시도) ※ !important

목차
  1. id/class 예제
  2. id/class 기호
  3. id/class 우선순위
  4. 선택자 우선순위 (= CSS 적용 순서) ※ 명시도
  5. id 특징
  6. class 특징
  7. id/class 대소문자 구별 예제
  8. id/class 명명 시 주의사항
  9. id 사용 필요성 (= id 사용 장점)
  10. id・class 바른 사용법

 

※ 아이디나 클래스는 (내부/외부스타일) CSS 방식에서 사용.
※ id / class 선택자는 가장 널리 사용되니, 꼼꼼히 공부 권장.
 

id/class 예제

 
<style>
#hz {text-decoration:underline; color:green;}
.hz {text-decoration:none; color:green;}
#hz .site {color:red;}
#hz .host {color:blue;}
.site {color:yellow}
.host {color:yellow}
</style>

<div id="hz" class='hz'>
  <p class='site'>홈짱닷컴</p>
  <p class='host'>Homzzang.com</p>
</div>
 
 

id/class 기호

 

# (샾)으로 선언한 스타일 : id (아이디) 속성으로 연결됨.

. (마침표)로 선언한 스타일 : class (클래스) 속성으로 연결됨.

  

선택자 (Selector) : 스타일 적용 영역을 선택하는 지시자. 
 

id/class 우선순위

 

 id  >  class  >  요소

 


 
# (아이디)는 . (클래스)보다 상위 선택자임.
즉, 동일 요소에 class와 id 중복 정의 시, id 스타일이 우선 적용됨.
 
 

선택자 우선순위 (= CSS 적용 순서) ※ 명시도


1. 중요도 (!important  >  인라인 > 아이디 > 클래스 > 요소

  • 예제 : span {color:red !important;} 
  • 속성값과 !important는 붙어도 됨. span {color:red!important;}
  • HTML 구조 개선해, !important 키워드는 되도록 사용 않는 게 좋음.

 

2. 명시도 

  • 명시도 다를 시, 숫자가 높은 게 우선 적용.


3. 순서 

  • 명시도 동일 시, 나중에 정의된 것이 우선 적용.

 

4. 주체 - Author 정의  > User 정의 > Browser 정의

  • Author : 홈피 쥔장 정의 CSS
  • User : 사용 회원 정의 CSS
  • Browser : 브라우저 기본 정의 CSS

 


[예제1] - (아이디 > 클래스 > 요소) 우선순위


<style>

#id {color:green;}

.class {color:blue;}

div {color:red;}
</style>

 

<div id='id' class='class'>

  홈짱닷컴 (Homzzang.com)

</div>


결과 보기


[예제2] - (인라인 스타일 > 아이디 > 클래스 > 요소) 우선순위


<style>

#id {color:green;}

.class {color:blue;}

div {color:red;}

</style>


<div id='id' class='class' style='color:magenta'>

  홈짱닷컴 (Homzzang.com)

</div>


결과 보기


[예제3] - 인라인스타일 방식 경우, 위치 상관없이 우선적용.

 

<style>

#id {color:green;}

.class {color:blue;}

div {color:red;}

</style>


<div style='color:magenta' id='id' class='class' >

  홈짱닷컴 (Homzzang.com)

</div>


결과보기


[예제4] - 위쪽에 있는 선택자일수록 명시도가 높아 우선 적용.

 

<style>

h1#hz {color:gray;}

#hz {color:magenta;}

h1.hz {color:green;}

.hz {color:red;}

h1 {color:blue;}

body {color:tomato;}

</style>

 

<h1 id='hz' class="hz">홈짱닷컴 Homzzang.com</h1>

 

결과보기 

 

id 특징

 

1.

선택 영역 첫 머리에서 한 번만 사용해야 함. (즉, 유일해야 함.)

(예: id="memo")

 

2.

대소문자 구별 O

(예) id="HZ"과 id+"hz"은 다름.

 


[사용 불가 예제 1] - 아이디 a만 적용됨. (※ 나중 선언된 b는 적용 X)


<style>

#a {color:red; font-size:30px;}

#b {color:blue; font-size:18px;}
</style>

  

<div id='a' id='b'>홈짱닷컴 (Homzzang.com)</div>

결과보기


[사용 불가 예제 2] - 둘 다 적용 X (∵ ID 속성값은 유일해야 하므로)


<style>

#a {color:red; font-size:30px;}

#b {color:blue; font-size:18px;}
</style>


<div id='a b'>홈짱닷컴 (Homzzang.com)</div>


결과보기

 

class 특징

1. id로 선택한 영역에서 동일 class 여러 번 사용 가능.
 
(예)
<li class='hz'>홈짱닷컴</li>
<li class='hz'>Homzzang.com</li>
...........
 

2. 대소문자 구별 O.
 
(예)
class="content" 와 class="CONTENT"는 다르게 취급.

 


3. 한 요소에 여러 class 사용 가능.
이 경우, class 속성값 위치와 무관하게 나중 정의된 CSS 적용. 
 
<style>
.a {color:red;}
.b {color:blue;}
</style>
 
<p class='a b'>Homzzang.com</p>
<p class='b a'>Homzzang.com</p>
 

4. class는 id와 동일하게 명명해도 됨.

(예제)

<div id="hz" class="hz">....</div> 

 
 

id/class 대소문자 구별 예제

※ id/class 둘 다 대소문자 구별 O. 

 

<!DOCTYPE html>

<html>

<head>

<title>ID/CLASS 대소문자 구분</title>

<style>

#HZ {color:red;}

#Hz {color:blue;}

#hz {color:green;}

.HZ {border:1px solid red;}

.Hz {border:1px solid blue;}

.hz {border:1px solid green;}  

</style>

</head>

<body>

<p id="HZ" class="HZ">#HZ, .HZ</p>

<p id="Hz" class="Hz">#Hz, .Hz</p>

<p id="hz" class="hz">#hz, .hz</p>

</body>

</html>

 

결과보기

 

id/class 명명 시 주의사항

 

1. 

숫자로 시작 금지. ★

 

2.

 _ (언더코어) 및 - (하이픈) 제외한 특수문자 사용 금지. ★


자세히 보기

 

id 사용 필요성 (= id 사용 장점)

 

동일 class명의 다른 선택자 영향으로 인한 스타일 깨짐 방지.

 


[예제]

 

<style>
#memo .title {color:red; font-size: 20pt;}
#memo .content {color:blue; font-size: 11pt;}
</style>

<section id="memo">
<p class="title">글 제목</p>
<p class="content">여기는 글 내용입니다.</p>
</section>

결과 보기
 

id・class 바른 사용법

 

id로 고유 영역 지정 후, 그 안에서 class 사용해 정의 권장.

 


[예제1] - 바람직 X (∵ 각각을 모두 id로 처리해 관리 불편.)


<style>

#title{color:red; font-size: 20pt;}

#content{color:blue; font-size: 11pt;}

</style>

 

<p id="title">글 제목</p>

<p id="content">여기는 글 내용입니다.</p>

 

결과보기


[예제2] 바람직 X (∵ id 미지정으로 인해, 다른 선택자 영향 받을 위험)

 

<style>

.title {color:red; font-size: 20pt;}

.content {color:blue; font-size: 11pt;}

</style>


<p class="title">글 제목</p>

<p class="content">여기는 글 내용입니다.</p>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012