[3주차] 2. CSS의 복합 선택자, 가상 클래스 선택자, 가상 요소 선택자, 속성 선택자

복합 선택자

- 앞쪽은 조건이고 뒷부분이 선택되는 개념

 

1. 일치 선택자(basic conbinator)

- 기본 선택자 중 하나와 기본 선택자 중 하나를 동시에 만족하는 요소 선택자

- 기본 선택자 하나와 기본 선택자 하나가 붙여서 사용

- 선택자 첫번째와 두번째 선택자의 조건 다 만족하는 것을 찾는다

- 태그.클래스별명 { } -> 태그이면서 클래스 별명값이 있는 것을 찾아야 함

 

2. 자식 선택자(child combinator)

- 부모와 자식요소는 상대적

- 부모를 기준으로 특정한 자식요소를 찾는 선택자

- 기준(부모)선택자 > 자식요소의 선택자

- >는 자식선택자를 지칭

- 기본선택자 > 은 조건

- > 뒤에 있는 기본 선택자는 검색

- 태그 > .클래스별명 ->태그의 자식이면서 클래스별명 값을 가진 부분만 선택

 

3. 후손(자손, 하위) 선택자(descendant combinator)

- 어떤 특정 선택자의 후손(하위) 요소인 다른 선택자를 찾아라

- 선택자와 선택자 사이의 띄어쓰기를 넣음으로써 선택자의 기호로 사용된다.

- 띄어쓰기는 후손선택자 의미

- 태그 .클래스별명 -> 태그 안에 있는 모든 요소들 중 클래스 별명값을 갖고 있는 것을 찾아라

- 띄어쓰기를 기준으로 뒤 선택자를 찾는데 앞 선택자는 조건이다.

 

4. 인접 형제 선택자(adjacent sibling combinator)

- 기본 선택자의 다음 형제 요소를 찾을 건데 조건 선택자가 맞아야 함

- 선택자(조건선택자) + 선택자(찾을 선택자) -> 조건 선택자를 만족하는 요소의 뒤 선택자의 다음의 인접형제를 찾는다.

- + 은 다음에 인접해 있는 형제 요소를 찾음

 

5. 일반 형제 선택자(general sibling combinator)

- 자신의 형제요소 다 찾음

- 선택자(조건)~ 선택자(검색) ->조건을 만족하는 검색선택자의 다음 일반 형제를 찾는다

- ~은 일반 형제를 찾음

---

가상 클래스 선택자(pseudo-classes selectors)

- pseudo(가짜, 가상)의 클래스를 제공하는 개념

- : 는 가상 클래스 선택자

-::는 가상요소 클래스 선택자

- transition을 줘서 애니메이션 시간을 지정할 수 있다. ex) transition : 0.4s

 

1. nth of type

- 요소의 타입(태그이름 ex) div)과 동일한 타입인 형제 요소가 n번째 요소라면 선택하겠다.

- n키워드 사용하여 0부터 시작하는 개념(제로베이스)

- 태그이름을 꼭 명시해야 한다. -> 태그를 찾는 개념으로서만 사용

- 기본선택자:nth-of-type(n)

- xxx-child와 다른 점은 xxx-child는 후손요소의 xxx-child에 해당하는 것이 기본선택자 조건에 맞아야만 한다면 nth-of-type :  후손요소의 기본선택자들 중에서 n번째 요소를 찾는 것이다.

 

2. 부정 선택자(negation selector)

- 기본선택자:not(빼고싶은 선택자)

- 요소를 찾는데 not 뒤 특정 요소만 제외하고 찾겠다

 

[사용자가 어떤 동작을 수행시 변화(event)가 되는 선택자]

- js가 이벤트를 활용한다.

- 선택자는 원래 이벤트를 활용하는 개념이 아니다.

 

1. hover

- 어떠한 요소에 마우스가 올라가 있는 동안 동작하는 요소이며

 동작했을 때 그요소가 선택되어서 그요소에 추가적인 스타일 적용

- 기본선택자:hover {}

- 해당하는 요소에 마우스를 올렸을 때 그 요소가 어떻게 바뀔 것인지 정의할 수 있다.

 

2. active

- 요소에 마우스를 클릭하고 있는 동안에 요소를 어떻게 설정할 지 정의

- 기본선택자:active {}

 

3. focus

- 특정한 요소가 포커스된 동안에만 그 요소가 선택되는 개념

- 일반적인 요소에는 해당하지 않고 대화형 콘텐츠(input 태그, img 태그, tabindex가 부여가능 한요소 등)에서 사용 가능

- 기본선택자:focus{}

- input태그는 outline 속성이 기본적으로 들어가 있고 outline 속성은 제어하기 어려우므로 outline을 none으로 처리하고 border 속성을 추가해서 설정한다.

 

[xxx-child]

- 코딩할 때 상당히 많이 활용

- 오른쪽에서 왼쪽으로 해석하는 것이 더 정확하다.

- 특정 요소 중 후손요소 중의 n번째 형제를 찾는 것

- 일반적으론 후손선택자와 함께 사용하나 원하지 않는 것이 선택될 경우 바로 밑만 적용되는 자식 선택자를 활용하여 같이 쓸 수 있다.

- .box :nth-child ->후손인 요소들 중 모든 n번째 형제 요소들을 선택하는 개념으로 아무런 기본 선택자를 적지 않음으로써 사용 할 수 있다.

 

1. first child

- 특정 요소가 형제 요소 중 첫번째 요소라면 선택

- 기본선택자:first-child

- .fruits p:nth-child(1) -> fruits class의 후손 요소 중 첫번째 형제요소가 p태그여야 함

 

2. last child

- 특정 요소가 형제 요소 중 마지막 요소라면 선택

- 기본선택자:last-child

 

3. nth child

- 몇번째 요소를 선택할 것인가, first-child와 last-child처럼 사용

- n 이라는 키워드 사용할 수 있음(0(0부터 숫자 세는 것은 제로베이스)이라는 개념부터 1,2,3,,늘어나면서 해석할 수 있다)

- 0은 아무것도 선택 안됨

- 기본선택자:nth-child(n) ->n번째 형제요소 찾아라

- 기본선택자:nth-child(2n) -> n은 0부터 123456 숫자가 늘어나는 경우로 생각하면 되고

따라서 2n은 0,2,4,6….이런 식으로 짝수번째 요소들만 선택된다.

- 기본선택자:nth-child(n+3) -> 3번째 요소부터 이후 모든 요소들을 선택(3,4,5,6,7….번째 요소들 선택)

---

가상 요소 선택자(pseudo-elements selectors)

- css을 통해서 html에 가상의 요소를 생성해서 제공

- :: 이 붙음

- 무조건 content 속성을 내용을 적지 않더라도 입력되어야 한다.

- 가상의 요소를 생성하는 것이여서 가상의 요소가 들어가는 것이기 때문에 해당하는 가상요소 부분에 텍스트 뿐만 아니라 img도 삽입 가능 -> content: url(“”);

- 가상 요소 선택자 앞에 : 하나만 붙어도 동작은 되지만 : 하나만 작성하는 것은 추천하지 않음. 가상 클래스와 가상 요소 선택자를 구분하기 위해서이다.

 

1. before

- 특정 요소의 내부 앞쪽에 어떠한 콘텐츠를 가상의 요소로 삽입할 때 사용

- 기본선택자::before

- content 속성 매우 중요!!->content 속성 값에 추가할 내용 입력해야 함.

- 모든 요소의 어떠한 내용(contents)를 추가할 때 사용

- 추가하는 내용의 스타일도 지정 가능

 

2. after

- 요소의 내부의 뒤쪽에 내용(contents) 삽입

- 기본선택자::after

---

속성 선택자(attribute selectors)

- html의 속성은 attribute, css의 속성은 property

- html의 속성을 가지고 뭔가를 선택하는 개념

- class를 부여하는 것을 줄일 수 있다.

 

1. attr

- html의 속성을 의미하는 축약 어휘

- 특정한 속성(attr)을 포함하는 요소 선택

- [포함할 속성] {}

 

2. attr=value

- 속성=값의 형태로 특정 요소에 포함된 내용을 검색해서 찾을 수 있다.

- 특정한 속성을 포함하고 있고 속성의 값이 지정한 뭔가를 찾겠다는 것 그래서 자세하게 찾을 수 있어서 이런 형식을 더 많이 쓰게 됨

- [포함할 속성=속성 값] -> 속성 값 쓸 시 “”을 생략 가능

 

3. attr^=value

- 지정한 특정한 속성을 포함하고 지정한 속성 값을 갖고 있는데 그것으로 시작하는 요소를 찾음

- 특정한 요소로 시작하는 것을 찾기위해 ^(캐럿)를 사용할 수 있다.

- [포함할 속성^=속성 값]

- [class^=”btn-“] -> btn- 으로 클래스가 시작하는 요소를 찾을 수 있음

 

4. attr$=value

- $을 사용함으로써 특정한 값으로 끝나는 개념을 찾는 것

- [class$=”sucess“] -> 클래스가 success로 끝나는 요소를 찾을 수 있음

---

Tips

- 부모의 부모는 조상(상위)요소 한 태그를 감싸고 있는 모든 요소는 모두 다 조상요소(부모요소도 포함된 개념), 자식의 자식은 후손(하위)요소 특정한 요소의 이하에 있는 모든 요소들도 후손요소(자식요소도 포함된 개념), 특정한 요소를 기준으로 같은 부모요소를 공유하는 다른요소가 형제요소, 한 뎁스 바로 이하는 자식요소, 바로 한 뎁스 위에 있는 부모요소

- 선택자는 기본적인 큰틀에서 내가 원하는 것만 찝어내는 개념으로 중요하게 생각해야 한다.

- 0부터 순서 세는 개념인 제로베이스는 js에서 많이 활용

- css는 1부터 순서 세는 것이 대부분이다.

- class 별칭 짓는 것은 개발자의 고충이다.

- ()이 들어가는 개념은 함수 url()은 url 함수

- ul>li{$}*5 을 입력시 ul 태그과 함께 자식요소인 1($)부터 5까지의 내용을 포함한 li태그가 생성됨 -> emmet 문법

<ul>

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

</ul>