37일차 - [CSS] pseudo, selector

안녕하세요. pitang입니다.

CSS의 pseudo와 더 자세한 selector 그리고 html에 대해 알아보겠습니다.

 

pseudo

pseudo-class는 요소의 특수 상태를 정의하는 데 사용된다.

예를 들어, 요소 위에 마우스를 놓았을 때의 스타일 지정, 방문한 링크와 방문하지 않은 링크의 스타일 등을 설정할 수 있다.

 

ex1)

27pseudo-class.html

마우스 포인터를 올리지 않았을 때 - 마우스 포인터를 덕덕고에 올렸을 때

 

ex2)

28pseudo-class.html - console

 

selector

35일 차에서도 CSS-selector를 살펴본 적이 있다. 그때는 단순 선택자만 알아보았다.

 

CSS selector는 5가지 범주로 나눌 수 있다.

총 Simple, Combinator, Pseudo-class, Pseudo-elements, Attribute이다.

Simple - 이름, ID, 클래스를 기준으로 요소 선택

Combinator - 특정 관계에 따라 요소 선택

Pseudo-class - 특정 상태를 기준으로 요소 선택

Pseudo-elements - 요소의 일부를 선택하고 스타일링

Attribute - 속성 또는 속성 값에 따라 요소 선택

 

css selector game을 검색하면 아래의 사이트가 거의 첫 번째로 뜰 것이다.

이 사이트를 이용하면 selector에 대해 연습할 수 있을 것이다.

https://flukeout.github.io/

CSS Diner

 

ex1)

a>b 의 > 기호는 b 요소 중 a 요소의 자식만을 선택한다.

29selector-child.html

console

-> p 요소들은 파란색, p 요소 중 div의 자식들은 밑줄, p 요소 중 body의 자식들은 32px이다.

 

ex2)

Pseudo-class, Pseudo-elements selector를 사용한 것을 볼 수 있다.

30selector-child.html

console

-> p 요소 중 div의 자식들은 마우스가 올라가지 않으면 내용이 보이지 않고, 마우스가 올라가면 내용이 보이게 된다.

 

ex3)

a b 의 띄어쓰기 기호는 b 요소 중 a를 조상으로 두고 있는 것 즉, a의 자손인 b들을 선택한다.

31selector-descendant.html

console

-> div의 자손인 p들은 파란색, body의 자손인 p들은 밑줄, p 요소 중 body의 자식들은 32px가 된다.

 

ex4)

a + b 의 + 기호는 b 중 a 바로 다음 형제들을 선택한다.

32selector-adjacent-sibling.html

console

-> #div1의 바로 다음 p 형제는 파란색, #div2의 바로 다음 p 형제는 빨간색, div의 바로 다음 p 형제는 32px가 된다.

 

ex5)

Pseudo-class, Pseudo-elements selector를 사용한 것을 볼 수 있다.

33selector-adjacent-sibling.html

console

-> div의 바로 다음 p 형제는 마우스가 올라가지 않으면 내용이 보이지 않다가, 마우스가 올라가면 내용이 보이게 된다.

 

 

 

 

감사합니다.

 

*m1 맥북을 사용 중입니다.*