CSS 고급 선택자
간단한 웹 문서는 기본 선택자만으로도 스타일을 적용할 수 있지만, 소스가 길어지면 스타일을 지정할 때마다 id와 class가 계속 늘어나므로 그 이름을 모두 기억하기는 쉽지 않음 !!
고급 선택자
연결 선택자와 속성 선택자를 사용하여 소스의 위치나 속성값에 따라 특정 요소를 쉽게 선택하는 방법
▽ 연결 선택자
| 종류 | 형식 | 설명 |
| 하위 선택자 | 상위요소 하위요소 | 상위 요소에 포함된 모든 하위 요소 선택 |
| 자식 선택자 | 부모요소 > 자식요소 | 부모 요소에 포함된 자식 요소만 선택 |
| 인접 형제 선택자 | 요소 1 + 요소 2 | 요소1 이후 맨 먼저 오는 형제 요소 선택 |
| 형제 선택자 | 요소 1 ~ 요소 2 | 요소1과 형제인 모든 요소 선택 |
▽ 속성 선택자
| 종류 | 선택 요소 | 예시 |
| [속성] | 해당 속성이 있는 요소 | [required] |
| [속성 = 값] | 지정한 속성값이 있는 요소 | [target = _blank] |
| [속성 ~= 값] | 지정한 속성값이 포함된 요소 (단어별) |
[class ~= button] |
| [속성 |= 값] | 지정한 속성값이 포함된 요소 (하이픈 포함, 단어별) |
[title |= us] |
| [속성 ^= 값] | 지정한 속성값으로 시작하는 요소 | [title ^= eng] |
| [속성 $= 값] | 지정한 속성값으로 끝나는 요소 | [href $= xls] |
| [속성 *= 값] | 지정한 속성값의 일부가 일치하는 요소 | [href *= w3] |
▽ 가상 클래스
| 종류 | 설명 |
| : link | 방문하지 않은 링크에 스타일을 적용 |
| : visited | 방문했던 링크에 스타일을 적용 |
| : hover | 지정한 요소에 마우스 포인터를 올려놓을 때 스타일을 적용 |
| : active | 지정한 요소를 활성화했을 때 스타일을 적용 |
| : focus | 지정한 요소에 초점이 맞춰졌을 때 스타일을 적용 |
| : target | 앵커 대상에 스타일을 적용 |
| : enabled | 지정한 요소를 사용할 수 있는 상태일 때 스타일을 적용 |
| : disabled | 지정한 요소를 사용할 수 없는 상태일 때 스타일을 적용 |
| : checked | 선택한 요소의 스타일을 적용 |
| : not | 지정한 요소가 아닐 때 선택해서 스타일을 적용 |
▽ 구조 가상 클래스
| 선택자 | 설명 |
| : only-child | 부모 안에 자식요소가 하나뿐일 때 자식요소 선택 |
| A : only-type-of | 부모 안에 A 요소가 하나뿐일 때 선택 |
| : first-child | 부모 안에 있는 모든 요소 중에서 첫번째 자식 요소 선택 |
| : last-child | 부모 안에 있는 모든 요소 중에서 마지막 자식 요소 선택 |
| A : first-of-type | 부모 안에 있는 A 요소 중에서 첫 번째 요소 선택 |
| A : last-of-type | 부모 안에 있는 A 요소 중에서 마지막 요소 선택 |
| : nth-child(n) | 부모 안에 있는 모든 요소 중에서 n 번째 자식 요소 선택 |
| : nth-last-child(n) | 부모 안에 있는 모든 요소 중에서 끝에서 n 번째 자식 요소 선택 |
| A : nth-of -type(n) | 부모 안에 있는 A 요소 중에서 n 번째 요소 선택 |
| A : nth-last-of -type(n) | 부모 안에 있는 A 요소 중에서 끝에서 n 번째 요소 선택 |
▽ 가상 요소
| 선택자 | 설명 |
| ::first-line | 첫 번째 줄을 선택 |
| ::first-letter | 줄에서 첫 번째 글자 선택 |
| ::before | 특정 요소의 앞에 내용이나 스타일 추가 |
| ::after | 특정 요소의 뒤에 내용이나 스타일 추가 |
마무리 문제 ♥♡
1. 다음 조건에 맞게 첫 번째 이미지의 테두리 스타일만 수정하는 코드를 작성하세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
<style>
img {
margin-right:50px;
border:1px solid #ccc;
box-shadow: 2px 2px 5px #ccc;
}
img:first-of-type {
border:2px solid #f00;
/* border 의 색상과 두께를 따로 지정해도 됩니다.
border-color:#f00;
border-width: 2px;
*/
}
</style>
</head>
<body>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
</body>
</html>
2. 다음 조선에 맞는 메뉴 스타일을 추가하세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
* {
box-sizing: border-box;
}
.top-menu {
margin:50px auto;
padding:0;
list-style:none;
width:605px;
height:35px;
box-shadow:0 3px 4px #8b8b8b;
background-color:#dadada;
}
.top-menu li {
float:left;
border-right:1px solid #929292;
}
.top-menu li a:link{
color:black;
text-decoration:none;
text-align:center;
display:block;
width:100px;
height:35px;
line-height: 35px;
}
.top-menu li a:visited {
color:black;
}
.top-menu li:last-child {
border-right:none;
}
.top-menu li:not(:last-child) a:hover {
background-color:#555;
color:#fff;
}
.top-menu li:last-child a:hover {
background-color:#b30000;
color:#fff;
}
</style>
</head>
<body>
<nav>
<ul class="top-menu">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a></li>
<li><a href="#">메뉴6</a></li>
</ul>
</nav>
</body>
</html>'HTML_CSS_JavaScript' 카테고리의 다른 글
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑦ (0) | 2023.03.08 |
|---|---|
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑥ (0) | 2023.03.03 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ④ (0) | 2023.02.28 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ③ (0) | 2023.02.22 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ② (0) | 2023.02.19 |