CSS 3가지 선택자;

태그 선택자

HTML의 태그들을 선택자로 하여 여러 효과를 만든다.

🌟 실 행 화 면 🌟

hello world

id 선택자

여러 항목이 아니라 한 항목에 효과를 주고 싶을 때 쓰인다.
효과를 주고 싶은 항목에 id를 부여하고 [head] 부분에 #아이디로 지정한 이름 형식으로 선택자로 만들어
주고 싶은 효과를 입력하면 된다.
웹페이지에서 id로 지정한 단어가 있다면 또 그 id가 등장해서는 안 된다.

🌟 실 행 화 면 🌟

HTML
CSS
JS

class 선택자

여러 항목에 효과를 줄 수 있는 선택자이다.
id 선택자도 여러 항목에 같은 id를 부여해 효과를 줄 수도 있지만 권장하지는 않는다.
CSS와의 약속을 어기는 거라나 뭐라나~
id와 class가 갖는 의미를 생각해보자.
id는 개인이 가지고 있는 고유한 이름의 의미가 강하고, class는 그러한 id가 모인 그룹이라는 의미가 강하다.
뭐... 이렇게 이해하면서 넘어간다.
.class로 지정한 이름의 형식으로 사용한다.
그리고 class 선택자는 같은 태그명에서도 다른 태그명에서도 사용할 수 있다. 여러 번 등장도 가능하다.

🌟 실 행 화 면 🌟

HTML
CSS
JS

부모자식 선택자

위와 같은 문서에서 ul에 속해있는 li들에게만 효과를 주고 싶을 때는 아래를 적용하면 된다.

🌟 실 행 화 면 🌟

html
css
js

html
css
js

부모 자식 { 어쩌구 저쩌구 } 의 형태를 가지고 있다.

<ul> <li> 식물 </li> <li> 동물 <ol> <li> 고양이 </li> <li> 강아지 </li> </ol> </li> <li> 사람 </li> </ul>
이렇게 중첩된 문서에서 ol에 포함되어 있는 li들의 글자는 보라색으로,
ol의 바깥에 있고 ul의 안에 있는 li들의 글자는 빨간색으로 하려면 어떻게 해야 할까?
<style> ol li { color: purple; } ul>li { color: red; } </style> <ul> <li> 식물 </li> <li> 동물 <ol> <li> 고양이 </li> <li> 강아지 </li> </ol> </li> <li> 사람 </li> </ul>

🌟 실 행 화 면 🌟

식물
동물
1. 고양이
2. 강아지
사람

ol에 바로 아래 있는 li 들은 ol li 로 표현 가능하고,
ul 밑 ol 바깥에 있는 li들은 ul>li 로 표현 가능하다.
부모 > 직계자손 의 형태이다.

++ 수도 클래스 선택자 (Pseudo Classes)

a:link는 사용자가 a 태그의 링크를 처음 마주하게 될 때 보여줄 색깔을 지정할 수 있다.
a:visited는 사용자가 a 태그의 링크를 클릭해서 그곳을 방문하고나면 방문했음을 알려주는 색깔을 지정할 수 있다.
a:hover는 사용자가 a 태그의 링크에 커서를 올려놓았을 때 지정한 색깔을 변하게 해 시각적으로 변화를 줄 수 있다.
a:active는 사용자가 a 태그의 링크를 클릭하면 색깔을 변하게 할 수 있다.
수도 클래스 선택자를 쓸 때에는 예제의 순서대로 써야 한다. 그렇지 않으면 작동을 안 하는 것들이,,, 생긴다.

🌟 실 행 화 면 🌟