📝 TIL

[TIL] CSS 선택자

오늘 ONEUL 2022. 3. 18. 22:03

✍ Today I Learned

  • CSS의 결합 선택자, 의사 선택자 등 선택자에 대해 자세히 알게 되었다. 매번 감으로 썼었는데..!
사용 기호 명칭 설명
, 그룹 선택자 여러 선택자 같이 사용
(공백) 자손 선택자 해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택
> 자식 선택자 해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택
태그.클래스   특정 class 속성을 가진 요소 중 특정 HTML 요소만 클래스의 영향을 받도록 지정
:nth-child() 의사 선택자 모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택
:not(선택자) 의사 선택자 모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용함
[속성이름="속성값"] 속성 선택자 특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택
  • CSS에서 이미지의 사이즈를 줄인다고 실제 용량이 줄어드는 것은 아니다.
  • background-attachment:fixed 속성을 이용하면 background를 고정시킬 수 있다.
  • :hover 선택자와 display 속성을 이용하면 간단한 툴팁을 만들 수 있다.
  • 선택자와 속성을 잘 이용하면 CSS로 할 수 있는 게 많다는 걸 깨달았다. 공부할수록 재밌는 듯!