[CSS 공부] 부스트코스 '비전공자를 위한 CSS 강의' 수강 기록 #2. 선택자

✔선택자(Selector) : CSS에서 꾸며주는 대상이 되는 부분

1. 선택자의 종류  : 요소선택자, Class선택자, id 선택자, 속성 선택자

 1) 요소 선택자(=태그 선택자) : 선택자 중 가장 기초(라서 한계가 있다), 선택자 부분에 태그 이름이 들어가는 방식.

 -> 그룹화가 가능하므로 위 문법은 쉼표를 이용하거나, 전체 선택을 의미하는 별표(*)를 사용하여 아래와 같이 표현할 수 있다.

 => h1, h2, h3, h4, h5, h6 { color=yellow; }

 => * { color=yellow; } 

 2) Class 선택자 : 스타일 규칙을 다양하게 적용하기 위해 사용하는 가장 일반적인 방법. 

 (1) class 속성에 값(자유롭게 설정)을 넣고 ex) <p class="값"> 내용 </p>  or <dt class="a">내용</dt>

 (2) '.값'을 적고 선언을 입력 ex)  .값 { font-size: 30px; }) or .a { font-color:green; }

  [TIP] 다중으로도 사용할 수 있다.

3) id 선택자 : Class 속성과 유사한데 . 대신 #을 class 대신 id를 사용하는 방식. class와의 차이점은 id선택자는 문서 내에서 단 한번만 사용해야 한다는 점. 

 4) 속성 선택자 : 태그의 속성을 이용하여 요소를 선택하는 방식

 (1) 단순 속성으로 선택 : 해당 이름의 속성이 포함되어 있으면 해당 사항이 적용됨.

 (2) 정확한 속성값으로 선택 : 해당 이름과 정확하게 일치하는 속성이 있으면 해당 사항이 적용됨.

 (3) 부분 속성값으로 선택 : 특정 단어가 포함되는 / 시작하는 / 끝나는 요소를 선택하게 하며, 각각 아래와 같은 기호를 사용

 - ~=사용 : 공백으로 구분한 특정 단어가 포함되는 요소 선택 

 - ^=사용 : 특정 단어로 시작하는 요소 선택

 - $=사용 : 특정 단어로 끝나는 요소 선택

 - *= 사용 : 특정 단어가 포함되는 요소 선택

 

2. 선택자의 조합 

 1) 요소 + class의 조합 : 위 예시에서 <p>면서 class 속성에 bar가 있어야 적용.

 2) 다중 클래스 : 위 예시에서 class 속성에 foo와 bar가 모두 있어야 적용

 3) id + class의 조합 : 위 예시에서 id는 foo이고 class 속성에 bar가 있어야 적용

 

3. 문서 구조 관련 선택자

 1) 문서 구조의 이해 : 부모와 자식, 조상과 자손, 형제

  (1)부모와 자식 : 부모는 그 요소를 포함하는 가장 가까운 상위 요소로 단 하나뿐. 자식 요소는 여러개일 수 있음.

  (2) 조상과 자손 : 부모-자식의 확장된 관계로, 조상 요소는 부모 요소를 포함하여 여러개일 수 있음. 

  (3) 형제 : 같은 부모를 가지고 있는 요소. (인접 형제 : 바로 뒤에 나오는 요소)

2) 문서 구조 관련 선택자 : 자손 선택자, 자식 선택자, 인접 선택자

 (1) 자손 선택자 : 아무 기호 없이 공백으로 구분

div와 span 자손 부분 글자가 빨간색으로 바뀜

 (2) 자식 선택자 : 꺽쇠 기호(>)로 구분

div의 자식인 h1 부분의 글자가 빨간색으로 바뀜

 (3) 인접 형제 선택자 : +기호로 구분

div와 인접한 p 부분의 글자가 빨간색으로 바뀜