• 이용 문의
  • 회원가입
  • 로그인

[selector] CSS - ID선택자 (= 아이디선택자) , class선택자(= 클래스선택자) + CSS적용 우선순위 ★★★★★

4,046  
아이디나 클래스는 내부스타일과 외부스타일 방식으로 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 (클래스)

 


 

# (샾) 기호로 선언한 스타일: 태그에서 id (아이디) 속성으로 연결.
. (마침표) 기호로 선언한 스타일:  태그에서 class (클래스) 속성으로 연결.

 

※ 선택자 (Selector) : 스타일적용영역을 선택하는 것을 말함. 
 
 
id・class 선택자우선순위 
 
# (아이디)는 . (클래스)보다 상위 선택자임.
즉, 동일요소에 대한 스타일이 class와 id 중복 정의된 경우, id 스타일이 우선 적용됨.
 


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

 

 id  >  class  >  요소

 


 

[예제]
아래 예제 경우, 가장 마지막에 정의한 div 선택자가 적용되는 것이 아니라,
가장 우선 순위 선택자인 아디디가 적용되고, 아이디가 없으면 클래스 적용.

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


결과 보기


 

인라인스타일 방식이 id나 class 속성 앞에 오더라도, 인라인스타일 우선적용.

 

<style>

#id {color:green;}

.class {color:blue;}

div {color:red;}

</style>


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

  홈짱닷컴 (Homzzang.com)

</div>


결과보기

 
 
CSS 선택자 명시도  - 스타일 적용 우선순위 판별

 

https://homzzang.com/b/css-278

 

 
 
CSS 적용 우선순위  ★

 

1. 중요도 (!important  >  인라인 > 아이디 > 클래스 > 요소)
2. 명시도 - 숫자가 높은 게 우선 적용
3. 순서 - 명시도 동일 시 나중에 정의한 게 우선 저용

 

 
 
 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>
 


※ 아이디나 클래스 이름 작성 시 주의사항

 

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에 영향을 미칠 수도, 또 영향을 받을 수도 있기 때문임.
정렬이 틀어지는 원인 중 가장 흔한 경우 임..
 


이름
비밀번호
자동등록방지
분류 제목
intro CSS - 정의와 장점 + CSS 기본 문법
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS3)
intro CSS - 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓…
selector CSS - ID선택자 (= 아이디선택자) , class선택자(= 클래스선택자) + CSS적…
selector CSS - * 전체선택자 - 모든요소 (요소선택자)
selector CSS - element 요소선택자 - 지정요소 (요소선택자)
selector CSS - element,element 병렬선택자 ★ - 나열된요소 (= 여러요소, 요소…
1/20
목록

방문자 수

오늘 140
어제 930
최대 2,081
전체 629,772
Since 2012