.css 파일을 보면 꺽쇠 > 를 종종 보곤 합니다. 이 친구가 등장했을 때는 어떤 역할을 하는지 간단한 예제를 통해 알아보겠습니다.
우선 다음과 같은 html 코드 블럭이 있다고 가정하겠습니다.
이 상황에서, 다음과 같은 css 코드로 꾸며준다면 어떻게 될까요?
결과는 "안녕1", "안녕2" 모두 빨간색으로 표현됩니다. "아이디가 test인 요소 내 모든 p 요소들의 색상을 빨강으로 해줘"라는 의미가 되기 때문입니다.
반면, 다음과 같은 css 코드로 꾸며주면 "안녕1"만 빨강으로 표현됩니다.
이렇게 되는 이유는 #test와 p 사이의 꺽쇠(>) 때문입니다. 꺽쇠가 추가됨으로 위 css 코드는 #test 요소 내 p 요소들 중에 자식인 p 요소에 대해서 빨강색을 적용하라는 의미가 됩니다. 이 경우는 손주도 안됩니다. 내 자식만 됩니다. 오로지 내 새끼에게만 적용됩니다. ㅋㅋ
"안녕2"를 담고 있는 p 요소는 손주이기 때문에 빨강이 적용이 안 된 것입니다.
이러한 이유로 꺽쇠 > 는 자식 선택자라고 불립니다. 반면 그냥 스페이스(띄어쓰기)는 하위 선택자라고 불립니다. 하위 선택자는 내 자식을 포함해서, 손주, 증손주, 100대, 1000대, 10000대 자손까지 영향을 끼칩니다.
자식 선택자와 하위 선택자 이해 되셨죠?ㅎㅎ
728x90
'코딩 > web' 카테고리의 다른 글
| [css] css 선택자에서 꺽쇠 > 의 의미는? 자식 선택자와 하위 선택자 (1) | 2021.02.16 |
|---|---|
| [css] calc 함수 사용법 (0) | 2021.01.15 |
| [css] box-shadow로 요소 볼록 튀어나온 효과, 오목 들어간 효과 주기 (2) | 2021.01.14 |
| [css] 스크롤바 예쁘게 꾸미기 (0) | 2021.01.06 |
| [css] cursor:pointer의 의미는? (0) | 2020.12.30 |
| [html] a 태그에서 title 속성의 역할은? (0) | 2020.12.29 |
| [css] 리스트 앞 기호 내가 원하는 이미지로 바꾸려면? list-style-image 속성 (0) | 2020.12.18 |
| [html] 비밀번호를 최소 6자, 최대 12자까지만 입력하게 하려면? input 태그 minlength, maxlength 속성 (2) | 2020.12.16 |
| [css] 링크 효과 관련 a:link, a:visited, a:hover, a:active 정리 (5) | 2020.11.21 |
