2021_03_12

TIL - CSS 셀렉터

1. CSS 셀렉터

CSS에는 다양한 셀렉터들이 있다. 그 중에서도 가장 많이 쓰이는 셀렉터를 알아보자.

• 전체 셀렉터: * { }
• ID 셀렉터: #only { }
• class 셀렉터: .center { }
• 후손 셀렉터: header h1 { }
• 자식 셀렉터: header > p { }

  **후손 셀렉터와 자식 셀렉터의 차이는 무엇일까? 말 그대로 후손 셀렉터는 자식의 손자 손자.. 모두 포함한다는 것이고 자식 셀렉터는 바로 아래의 자식만 선택하겠다는 뜻이다.

• 인접 형제 셀렉터: section + p { }
• 형제 셀렉터: section ~ p { }
• 부정 셀렉터: div:not(:nth-of-type(2)) { }
  ** 부모의 2번째 자식이 아닌 요소 선택

오늘은 CSS 셀렉터에 대하여 공부하였다.
내일은 웹 앱 화면을 설계하는 것에 대하여 공부해보자.
오늘은 여기까지!