지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
Combinators 중
자손 선택자
descendant Selector
에 대해 알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 (Combinators 에 대해) - 1편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 조금 다른 선택법 Pseudo Selectors를 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해
tm-csc.tistory.com
이번 글에서는 나머지
Combinators에 대해
알려드리겠습니다.
지난 글에 이어서
설명드리기 위해
일단 VSC를 실행해주세요.
이렇게 적혀있던
절대 좋은 해결방법은
아닙니다.
그렇기 때문에
div 밑의 자식에서
span을 찾아서
text-decoration:underline
을 주는 방법이 더 낫습니다.
하지만 div 안에는
span과 p안에 들어있는
span 두 가지가 있는데요.
이때 바로 직계 자식에게만
즉 div바로 밑에 있는
span만을 선택할 수 있습니다.
바로 이렇게
div> span {
text-decoration: underline;
}
>를 적어줌으로써
바로 밑의 span만을
선택할 수 있게 됩니다.
크롬으로 확인해보면
이렇게 원하는 span만
밑줄이 그어지도록
스타일이 변경된 것을
확인할 수 있습니다.
또한 이렇게
p와 span의 위치가
변경된다고 하더라도
위치만 이동됐을 뿐
스타일의 그대로라는 것 또한
확인할 수 있습니다.
이러한 combinators를
자식 선택자
(child selector) ( > )
라고 얘기합니다.
하지만 이런 식으로
div 안에도 span이 여러 개
있다면 하나의 span만을
선택하기 어려울 텐데요.
이럴 때는 p 다음에 오는
span을 선택하게 할 수 있습니다.
바로 이렇게
p + span {
text-decoration: underline;
}
+ 를 적어줌으로써
다음에 오는 span만을
선택할 수 있게 됩니다.
크롬으로 확인해보면
이렇게 P 다음에 오는
span만이 스타일이
변경된 것을 확인할 수 있죠.
이러한 combinators를
인접 형제 선택자
(adjacent sibling selector) ( + )
라고 얘기합니다.
하지만 이렇게 P와
span사이에 무언가
생기게 된다면
해당 태그는 정상 작동하지
않습니다.
하지만 그럴 때는
바로 이렇게
p ~ span {
text-decoration: underline;
}
~ 를 적어줌으로써
이후에 오는 모든 span을
선택할 수 있게 됩니다.
크롬으로 확인해보면
전과 같이 잘 작동하는
것을 확인할 수 있습니다.
이러한 combinators를
일반 형제 선택자
(general sibling selector) ( ~ )
라고 얘기합니다.
이렇게 CSS 존재하는
네 가지의 combinators
에 대해 알려드렸습니다.
물론 ID를 주고 CLASS를
부여하여 스타일을 변경해도 되지만
굳이 HTML과 CSS를
왔다 갔다 하지 않으면서도
CSS만으로도 특정 태그를
선택하여 스타일은 변경할 수
있다는 점 꼭 알아두셨으면 좋겠습니다.
생각보다 상당히 자주 쓰는
태그이기도 하고요.
여기까지 궁금하신 점이 있다면
댓글에 남겨주시고
공감과 구독도 부탁드립니다.
