CSS 선택자 정리 - 기본 선택자, 복합 선택자

CSS 기본 용어 정리

용어
선택자(Selector)	HTML 의 Style을 지정하기 위하여 HTML 테그를 선택하기 위한 수단.
속성(Property)	HTML 요소를 선택하고 {} 내에 속성 값을 지정하여 다양한 style을 정의함. 여러 개의 프로퍼티를 연속해서 지정할 수 있으며, 세미콜론(;)으로 구분함 속성은 이미 지정되어 있는 용어이며, 사용자가 임의로 정의하지 못함.
값(value)	해당 속성에 대하여, 키워드나 크기 단위, 또는 색상 단위로 표시되어 있는 실제 값

 

CSS의 기본 선택자

 

용어	의미	사용법
전체 선택자(Universal Selector)	모든 요소를 선택함	* {     color : red; } = 전체 태그에 대해서 빨간색 글씨로 써라.
태그 선택자(Type Selector)	태그의 이름에 대해서 선택	li {     color : red; } = li 태그에 대해서 빨간색 글씨로 써라.
클래스 선택자(class Selector)	HTML class 속성 값에 대하여 선택	.orange {     color : orange; } <li class = "orange"> 오렌지 </li>
아이디 선택자(ID Selector)	HTML id 속성 값에 대하여 선택	#orange {     color : orange; } <li id = "orange"> 오렌지 </li>

 

CSS의 복합 선택자 

#. 특수한 요소를 호출하고 싶을 때, 기본 선택자 만으론 선택이 힘든  경우에 사용

용어	의미	사용법
일치 선택자(Basic Combinator)	선택자 조건을 모두 만족하는 녀석 선택	span.orange {     color : red; } = Tag의 이름이 span이고,class 속성이 orange인 값을 말함.
자식 선택자(Child Combinator)	선택자의 자식 요소를 선택하는 선택자	ul > .orange {     color : red; } = ul의 자식이면서, class 속성이 orange인 녀석을 선택함.
하위(후손) 선택자 (Descendant Combinator)	선택자의 후손 중에서 특정 조건을 만족하는 녀석을 선택하는 선택자	div .orange {         color : red; } div 태그 내부의 태그 중에서 class 속성이 orange인 녀석 선택
인접 형제 선택자 (Adjacent Sibling Combinator)	선택자의 다음에 붙어서 오는 형제 선택	.orange + li {     color : red; }
일반 형제 선택자 (General Sibling Combinator)	선택자의 다음 형제 요소를 모두 선택	.orange ~ li {     color : red; }

 

 

※ 이미지 출저 : KDT 국비교육 PPT에서 발췌하였습니다