• Q&A
  • 회원가입
  • 로그인

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

목차
  1. id/class 예제 
  2. id/class 기호
  3. id/class 우선순위 
  4. 선택자 우선 순위 ★ (= 선택자 명시도 = 선택자 중요도)
  5. CSS 적용 우선순위 ★
  6. id 특징
  7. class 특징
  8. id/class 작성 시 주의사항
  9. id 사용 필요성
  10. 핵심/그외 선택자 
  11. id・class 바른 사용법

 
※ 아이디나 클래스는 (내부/외부스타일) CSS 방식에서 사용.
 
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 우선순위 
 
# (아이디)는 . (클래스)보다 상위 선택자임.
즉, 동일요소에 대한 스타일이 class와 id 중복 정의된 경우, id 스타일이 우선 적용됨.
 

선택자 우선 순위 ★ (= 선택자 명시도 = 선택자 중요도)

 

 id  >  class  >  요소

 


(우선 순위 :아이디 > 클래스 > 요소) 적용되는 예제.


<style>

#id {color:green;}

.class {color:blue;}

div {color:red;}
</style>

 

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

  홈짱닷컴 (Homzzang.com)

</div>


결과 보기


(우선 순위: 인라인 스타일 > 아이디 > 클래스 > 요소) 적용 예제.


<style>

#id {color:green;}

.class {color:blue;}

div {color:red;}

</style>


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

  홈짱닷컴 (Homzzang.com)

</div>


결과 보기


인라인스타일 방식 경우, 위치 상관없이 우선적용.

 

<style>

#id {color:green;}

.class {color:blue;}

div {color:red;}

</style>


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

  홈짱닷컴 (Homzzang.com)

</div>


결과보기


※ 위쪽에 있는 선택자일수록 명시도가 높아 우선 적용되는 예제.

 

<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>

 

결과보기

 
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 : 브라우저

 

 
id 특징


해당 스타일  적용영역 지정 역할. (선택한 영역 첫 머리에서 한 번만 사용. 유일해야 함.)
(예: id="memo")

 


 사용 불가 예제 1 - 아이디 a만 적용됨. (b는 적용 안 됨)


<style>

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

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

  

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

결과보기


사용 불가 예제 2 - 둘 다 적용 안됨. (∵ 유일해야 하므로)


<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. 대소문자 구별
 
(예)
class="content" 와 class="CONTENT"는 다르게 취급.

 


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

id/class 작성 시 주의사항

 

1. 숫자로 시작 금지.

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


자세히 보기


id 사용 필요성


ID로 지정한 영역 밖에서 동일한 class명 (예: class="title")으로 명명되어 있더라도,
위처럼 별도의 id를 줘서 지정하면 
다른 영역에서 정의한 스타일 영향을 받지 않고 여기서 지정한 스타일대로 표현 됨.
즉, 스타일이 깨지는 일이 발생하지 않음.

 


 

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

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

결과 보기
 
핵심/그외 선택자 

선택자엔 id 선택자나 class 선택자 외에도,
공통 선택자(Universal Selector), 타입 선택자(Type Selector)가 있음.

하지만, 
실제 스타일시트에서 가장 널리 사용되는 건 id 선택자와 class 선택자임.

따라서, 
여기선 id 선택자와 class 선택자만 설명하고, 공통 선택자와 타입 선택자는 따로 설명. 
 
또, CSS엔 상속의 개념이란 게 있는데, 이 역시 개별 속성 강의에서 별도로 다룸.
 
 
 
id・class 바른 사용법
 
예제1
 
<style>
#title{color:red; font-size: 20pt;}
#content{color:blue; font-size: 11pt;}
</style>
 
<p id="title">글 제목</p>
<p id="content">여기는 글 내용입니다.</p>
 

 
위 처럼, id만을 이용해 표현할 수도 있음. 
다만, 관리적인 측면에서
id는 스타일 영역 지정할 때 한번만 사용하는 게 좋은 점에서, 
위처럼 줄 마다 다른 id로 표현하는 건 좋지 않음.
첫 번째 상자 예처럼, css가 적용될 영역을 id로 지정 후, 
그 영역 내 구체적인 스타일은 class를 이용 권장.

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

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

 
또, 위처럼 id없이 class만을 이용해 표현도 가능한데, 이 역시 바람직하지 않음.
id없이 class만 이용해 선언 시, 
다른 영역의 같은 class에 영향을 미칠 수도, 또 영향을 받을 수도 있기 때문임.
정렬이 틀어지는 원인 중 가장 흔한 경우 임..
 

 

오늘도 즐겁게 열심히 .....

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