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

[selector] CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)

2,681  

Selector 종류 


1. id 선택자 ★  : CSS1 
2. class 선택자 ★  : CSS1
3. 전체선택자 (=공통선택자) : CSS2
4. 요소선택자 (=태그선택자)  : CSS1
5. 자손선택자 (=후손선택자)  : CSS1
6. 자식선택자 : CSS2
7. 인접선택자 : CSS2
8. 속성선택자 : CSS2
9. 링크선택자 (=반응선택자)  : CSS1,  CSS2 혼합
10 가상선택자 (=일반구조선택자)   : CSS1,  CSS2 혼합

CSS를 코쟁이들이 만들어서, 이를 한국어로 번역하면서 용어 상 혼선 존재. ㅡㅡ;
따라서, 각각의 선택자 강의를 통해 정확한 사용법 익히기 바람.
추천 : http://www.nextree.co.kr/p8468/
 
 

선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)

 

1.

모든 자연어를 선택자 이름으로 사용 가능.

 

2.

영문대소문자숫자 조합 권장. 단, 숫자로 시작 불가.

 

3.

언더스코어(_)와 하이픈(-) 제외한 특수문자 사용 불가.



 

<style>

 /* 작동 O */

#홈짱 {color:red;}

#ホムチャン {color:blue;}

#homzzang {color:green;}

#homzzang-com {color:magenta;}

#homzzang_com {color:pink;}

#homzzang_2012 {color:tomato;}


 /* 작동 X */

#homzzang.com {color:tomato;}

#2012_homzzang {color:tomato;}

</style>


※ 작동 O

<p id="홈짱">#홈짱 : 홈짱닷컴 Homzzang.com</p>

<p id="ホムチャン">#ホムチャン : 홈짱닷컴 Homzzang.com</p>

<p id="homzzang">#homzzang : 홈짱닷컴 Homzzang.com</p>

<p id="homzzang-com">#homzzang-com : 홈짱닷컴 Homzzang.com</p>

<p id="homzzang_com">#homzzang_com : 홈짱닷컴 Homzzang.com</p>

<p id="homzzang_2012">#homzzang2012 : 홈짱닷컴 Homzzang.com</p>

<hr>

※ 작동 X

<p id="homzzang.com">#homzzang.com : 홈짱닷컴 Homzzang.com</p>

<p id="2012homzzang">#2012homzzang.com : 홈짱닷컴 Homzzang.com</p>


결과보기



이름
비밀번호
자동등록방지
분류 제목
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