Selector

CSS 선택자 종류 아래 코드를 보고 어느 선택자인지 설명할 수 있다면 이 포스트는 읽지 않아도 됩니다. 이번 포스트는 CSS 셀렉터! selector 선택자와 관련된 기본 개념을 다룹니다. h1 { color: red;} * { color: blue;} [disabled]{color:red;} .my-class{color:blue;} #my-id{color:red;} CSS를 따로 공부하지 않고 클론 코딩을 들으면 정말 헷갈립니다. "use id selector, write const myBtn = document.getElementById" '잠시만 셀렉터가 뭐지?' "use class selector, write const myClass = document.querySelector" '아까는 id였..

CSS 자식 형제 자손 자식 선택자, 형제 선택자, 자손 선택자 조합 선택자 (combinator)를 알아보는 포스팅입니다! + ~ > " "(스페이스)는 보통 한 번에 배우는 개념인데, 헷갈리기 쉬운 + ~ > " "을 예시와 함께 정리했습니다. 우선 Combinator 조합 선택자는 무슨 의미인지 알아보고 넘어가겠습니다. 조합 선택자는 기본 선택자 2개 이상을 한 번에 사용하는 선택자입니다. 인접 형제 adjacent Sibling (+) : 바로 뒤 자식 Child Combinator (>) : 직속 자식 일반 형제 General sibling combinator (~) : 같은 부모 자손 Descendant combinator (" " 스페이스) : 직속 부모 아니어도 ok 그림은 아래 코드의 예..