오늘은 CSS selector가 무엇인지와 종류들에 대해서 알아보는 시간을 갖겠습니다!
원하는 요소에 스타일을 적용하기 위해서는 해당 요소들을 잘 찾아야 합니다. 특정 요소뿐 아니라 여러 개의 요소일 수도 있는데요, 이 요소들을 쉽고 빠르게 찾을 수 있는 CSS selector에 대해서 알아보겠습니다.
<style>
span {
color : red;
}
</style>
<style>
#spantag {
color : red;
}
</style>
<body>
<span id="spantag"> HELLO World! </span>
</body>
<style>
.spanClass {
color : red
}
</style>
<body>
<span class="spanClass"> HELLO World! </span>
</body>
id를 이용할 때는 #으로, class를 이용할때는 . 으로 이용한다는 것을 기억하시고, 그룹 선택 (여러 개의 요소들에게 같은 style을 적용해야 할 때,
h1, span, div { color : red }
h1, span, div#id { color : red }
h1.span, div.classname { color : red }
이처럼 활용하실 수 있습니다.
그 외에도 여러가지의 활용을 통해 스타일을 적용시키고 싶은 요소에게만 스타일을 적용할 수 있습니다. 매우 자주 사용되는 기술이기 때문에 꼭 기억해주세요.
#jisu span { color : red }
// jisu라는 id 값을 가진 자손 요소들 중 span 태그에 스타일을 적용
#jisu > span { color : red }
// 자식 선택(>) 바로 하위 앨리먼트에 스타일을 적용
#jisu > p:nth-child(2) { color : red }
// n번째 자식 요소를 선택하여 스타일을 적용
이번 포스팅에서는 css selector의 종류와 활용법에 대해서 살펴보았는데요, 다음 포스팅에서는 css 기본 style을 변경하는 것에 대해서 알아보겠습니다 감사합니다 !