CSS 선택자
스타일 속성을 적용하는 요소를 선택자라고 한다. 선택자는 태그 하나가 될 수도 있고 각기 다른 태그 여러개를 묶어서 별도의 선택자로 지정할 수도 있다.
<P style="color:red;">Hello</p>
<P style="color:red;">World</p>
<li style="color:red;">
html/css
</li>이런식으로 태그에 하나하나 스타일 속성을 지정해줄 수도 있지만 나중에 속성을 바꿔야 하는 일이 생길 경우, 또 다시 하나하나 바꿔줘야 하는 어려움이 있다.
<html>
<head>
<style type="text/css">
p, li{
color:red;
}
</style>
</head>
<body>
<P>Hello</p>
<P>World</p>
<li>
html/css
</li>
</body>
</html>CSS 선택자를 사용해서 스타일 속성을 적용하고자 하는 태그를 묶어 한번에 지정하면 유지보수도 쉬워지고 코드도 간결해진다. 선택자에는 여러가지 종류가 있으며 사용자의 의도에 맞게 적절히 혼합 사용하는 것이 중요하다.
타입 선택자
- 태그의 이름을 지정한다.
See the Pen mddQzJR by Joy (@Joy-Park) on CodePen.
ID 선택자
- 유일한 id 하나를 선택한다.
See the Pen RwwqerK by Joy (@Joy-Park) on CodePen.
CLASS 선택자
- class 속성으로 묶은 그룹을 선택한다.
See the Pen JjjemRd by Joy (@Joy-Park) on CodePen.
자식 선택자
- 요소의 자식을 선택한다.
See the Pen bGGQmgM by Joy (@Joy-Park) on CodePen.
인접 선택자
- 지정한 요소 다음에 나오는 요소를 선택한다.
See the Pen QWWJZpV by Joy (@Joy-Park) on CodePen.
속성 선택자
- 해당 속성이 정의된 태그만 선택한다.
See the Pen wvvQYdm by Joy (@Joy-Park) on CodePen.
하위 선택자
- 특정 요소의 하위 요소를 선택한다.
- 자식 선택자는 자식만을 선택하지만, 하위 선택자는 자식, 후손 모두를 포함한다.
See the Pen oNNQawz by Joy (@Joy-Park) on CodePen.
그룹 선택자
- 여러 요소를 한번에 선택한다.
See the Pen JjjemyG by Joy (@Joy-Park) on CodePen.
댓글