CSS Selector - 등위선택자, 상태 선택자, 반응선택자(1)
comments
css 공부한 내용을 정리하려다가 우연히 발견한 @teo님의 글! 무려 css에 대해 얼마나 알고 있는지 자가진단할 수 있는 체크리스트였다.https://velog.io/@teo/css-self-checklist
마른 하늘에 단비같은 이 가이드 덕분에 배운 내용을 어떻게 정리할지 가닥이 잡힌 듯 하다.
🔰 selector가 뭔지 알고 있다.
🔰 id selector가 뭔지 알고 있다.
🔥 class selector가 뭔지 알고 있다.
🔥 Universal selector가 뭔지 알고 있다.
🔰 하위 요소를 선택할 수 있다.
🔰 a의 target attribute가 "_target"인 노드만 스타일을 적용할 수 있다.
🔰 자식 노드를 선택할 수 있다.
😎 인접 노드 선택자를 알고 있다.
😎 범위 지정 선택자를 알고 있다.
🔥 마우스 hover시 색상을 바꿀 수 있다.
🔰 Pseudo class를 알고 있다.
😎 드래그 했을때 선택영역의 색상을 바꿀 수 있다.
😎 input의 placeholder 색상을 바꿀 수 있다.
🔰 Pseudo element를 알고 있다.
🔰 ::after나 ::before 그리고 content를 알고 있다.
😎 ::after나 ::before 그리고 content에서 실전에서 사용되는 팁을 알고 있다.
🔥 :root를 알고 있다.
1. 등위선택자(형제선택자)
| 유형 | 해석 |
|---|---|
| A~B | A에 해당하는 태그와 동등한 위치에 있는 B 선택 |
| A+B | A에 해당하는 태그와 동등한 위치에 있는 바로 인접한 태그 |
<style>
h2~ul {
color: blue;
list-style: none;
h2+ul {
background: pink;
}
</style><html>
<body>
<h2>장바구니</h2>
<ul>
<li>사과</li>
<li>당근</li>
<li>두부</li>
<ul>
<h3>생필품</h3>
<ul>
<li>칫솔</li>
<li>휴지</li>
<li>도마</li>
<ul>
<h2>저녁메뉴</h2>
<ul>
<li>김치찌개</li>
<li>장조림</li>
<ul>
</body>
</html>👉🏻 출력물
2. 상태선택자
:상태 선택자는 보통 form 태그에서 input 태그의 특정한 상태에 대해 CSS 속성을 지정 할 때 사용| 유형 | 해석 |
|---|---|
| input:focus | focus가 된 input 태그를 선택 |
| input:enabled | 입력이 가능한 input 태그를 선택 |
| input:disable | 입력이 불가능한 input 태그를 선택 |
3. 반응선택자
: 반응 선택자는 웹 페이지를 보는 사용자가 마우스로 특정한 행동을 취했을 때 CSS 속성을 지정 할 수 있는 선택자를 의미| 유형 | 해석 |
|---|---|
| h1:hover | h1태그에 마우스를 올려놓으면 선택 |
| a:active | a태그에 마우스를 클릭하면 선택 |
| a:visited | link를 클릭하여 방문하였을 때 선택 |
| a:link | 한 번도 안 가본 링크일 때 선택 |
프론트엔드 개발자로 자라나는 중 입니다만..