f. 속성명|="속성값"으로 찾기 ( 정확히 속성값이 일치하거나 속성값뒤에 하이픈( - ) 붙은 요소 반환 )
- [속성명|="속성값"] 표현식, 태그명[속성명|="속성값"]
a[href|="naver"] { <== naver 또는 naver- 요소반환.
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자6-속성6-속성값또는속성값하이픈요소반환</title>
<style>
div[class|="en"] {
color: red;
}
</style>
</head>
<body>
<div id="one">id="one"</div>
<div class="en">class="en"(선택)</div>
<div class="kr en">class="kr en"</div>
<div class="kr">class="kr"</div>
<div id="two" class="en-UK">class="en-UK"(선택)</div>
</body>
</html>
g. 속성명~="속성값"으로 찾기 ( 정확히 속성값이 일치하거나 앞뒤로 공백이 포함된 값 목록에 존재하는 요소 반환 )
- [속성명~="속성값"] 표현식, 태그명[속성명~="속성값"]
a[href~="naver"] { <== naver 또는 ko naver 요소반환.
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자6-속성7-속성값또는공백이포함된목록</title>
<style>
div[class~="en"] {
color: red;
}
</style>
</head>
<body>
<div id="one">id="one"</div>
<div class="en">class="en"(선택)</div>
<div class="kr en">class="kr en"(선택)</div>
<div class="kr">class="kr"</div>
<div id="two" class="en-UK">class="en-UK"</div>
</body>
</html>
* BEM 패턴( Block, Element, Modifier )
- https://nykim.work/15 참고
BEM은 Block, Element, Modifier를 뜻합니다. 저 세 가지로 구성된 이름을 짓는 거죠! 그리고 각각 __와 --로 구분합니다.
.header__navigation--navi-text { color: red; }
6. 의사 클래스 ( pseudo class ) 와 의사 요소 ( pseudo elements )
1) 개념
- 이름안에 어떤 기능인지를 내포하고 있음.
2) 의사 클래스 ( pseudo class )
- 문법:
:클래스명
- 기능: 스타일을 지정하거나 마우스오버 및 a 태그의 3가지 상태(state) 인
방문전( blue ), 방문후( purple ), 활성화( red, 누르고 있을 때 ) 링크 색상을 변경할 수 있음.
가. a 태그의 link 의사 클래스
a:link{ color:red; } /* 방문전 */
a:visited{ color:green; } /* 방문후 */
a:hover{ color:yellow; } /* 마우스 오버 */
a:active{ color:blue; } /* 누르고 있을 때 */
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자7-의사클래스1_a태그</title>
<style>
/* 방문전 */
a:link {
color: red;
}
/* 방문후 */
a:visited {
color: green;
}
/* 마우스 오버 */
a:hover {
color: yellow;
}
/* 누르고 있을 때 */
a:active {
color: blue;
}
/* input 태그에 focus 할시 */
input:focus {
background-color: yellow;
}
</style>
</head>
<body>
<a href="#" target="_blank">This is a link1</a><br>
<a href="http://daum.net" target="_blank">This is a link2</a><br>
<br>
아이디:<input /><br>
비번:<input /><br>
</body>
</html>
나. input 태그 focus 클래스 <---> blur: focus 잃어버렸을때
input:focus {
background-color:yellow;
}
# DOM 트리에서 자식선택하는 의사 클래스 ( 기준은 지정된 태그의 부모가 기준 ( ****** ) )
다. 지정된 태그의 부모기준인 첫번째 자식
- 문법:
선택자:first-child {
}
ex)
p 태그를 찾고 찾은 p 태그의 첫 번째 자식을 반환. ( x )
p 태그의 부모를 찾고 그 부모의 첫번째 자식인 p태그 반환. ( o )
p:first-child {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자7-의사클래스2_first-child</title>
<style>
/* i 태그의 부모를 찾고 찾은 i 태그의 첫번째 자식인 i 태그 반환 */
i:first-child {
color: red;
}
</style>
</head>
<body>
<p>I am a
<i>strong</i> man. I am a
<i>strong</i> man.
</p>
<p>I am a
<i>strong</i> man. I am a
<i>strong</i> man.
</p>
</body>
</html>
라. 지정된 태그의 부모기준인 마지막 자식
- 문법:
선택자:last-child {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자7-의사클래스3_last-child</title>
<style>
/* i 태그의 부모를 찾고 찾은 i 태그의 마지막 자식인 i 태그 반환 */
i:last-child {
color: blue;
}
</style>
</head>
<body>
<p>I am a
<i>strong</i> man. I am a
<i>strong</i> man.
</p>
<p>I am a
<i>strong</i> man. I am a
<i>strong</i> man.
</p>
</body>
</html>
마. 지정된 태그의 부모기준인 유일한 자식
- 문법:
선택자:only-child {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자7-의사클래스4_only-child</title>
<style>
/* 유일한 자식으로 된 모든 p 태그 반환 */
p:only-child {
color: skyblue;
}
</style>
</head>
<body>
<div>
<p>1</p>
</div>
<div>
<p>2</p>
<p>3</p>
</div>
</body>
</html>
바. 지정된 태그의 부모기준인 n 번째 자식 ( 1부터 시작 )
- 문법:
선택자:nth-child(n) { <== n번째 위치
}
선택자:nth-child(2n) { <== 짝수번째, n에 1부터 시작해서 2,3,4 치환됨.
}
선택자:nth-child(2n+1) { <== 홀수번째.
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자7-의사클래스5_nth-child(n)</title>
<style>
p:nth-child(2) {
color: red;
}
p:nth-child(2n) {
/* 짝수번째 */
background-color: yellow;
}
p:nth-child(2n+1) {
/* 홀수번째 */
font-size: 25px;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</body>
</html>
사. 지정된 태그의 부모기준인 짝수번째/홀수번재 자식
- 문법:
선택자:nth-child(even) { <== 짝수번째
}
선택자:nth-child(odd) { <== 홀수번째
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자7-의사클래스5_nth-child(n)</title>
<style>
tr:nth-child(even) {
background-color: yellow;
}
tr:nth-child(odd) {
background-color: aqua;
}
</style>
</head>
<body>
<table>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
</tr>
</table>
</body>
</html>
##########################################################################################
아. 부정선택자
- 문법:
:not(선택문법) {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자7-의사클래스6_부정선택자</title>
<style>
tr:not(tr:nth-child(even)) {
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
</tr>
</table>
</body>
</html>
자. input 태그에서 check 된 요소 반환 ( **** )
- 문법:
input:checked {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자7-의사클래스7_checked</title>
<style>
input:checked {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
사과 <input type="checkbox" />
배 <input type="checkbox" />
바나나 <input type="checkbox" />
</body>
</html>
차. input 태그에서 enable/disable 된 요소 반환
- 문법:
input:enabled {
}
input:disabled {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자7-의사클래스8_enabled_disabled</title>
<style>
input:enabled {
background-color: yellow;
}
input:disabled {
background-color: aqua;
}
</style>
</head>
<body>
<!-- 값 고정 -->
<input type="text" value="xxxx7777" disabled> <!-- disabled="disabled" 동일 -->
pw <input type="text">
</body>
</html>
카. 지정된 선택자에서 자식이 없는 요소 반환
- 문법:
선택자:empty{
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자7-의사클래스9_empty</title>
<style>
p:empty {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<p></p>
<p>홍길동</p>
<p>이순신</p>
</body>
</html>
3) 의사 요소 ( pseudo elements )
- 문법:
::요소
- 의사클래스와 다르게 요소의 특정부분의 스타일을 지정할 수 있다.
의사클래스는 전체(whole) 스타일 적용되고
의사요소는 부분(part)스타일이 적용됨.
가. 문단의 첫줄 선택
- 문법:
p::first-line {
}
ex)
<p>
hello1<br>
hello2<br>
hello3<br>
</p>
나. 텍스트의 첫 글자
- 문법:
p::first-letter {
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자8-의사요소1_first-line_first-letter</title>
<style>
p::first-line {
color: red;
}
p::first-letter {
font-size: 40px;
color: blue;
}
</style>
</head>
<body>
<div>
<p>
AAA1<br>
AAA2<br>
AAA3<br>
</p>
<p>
BBB1<br>
BBB2<br>
BBB3<br>
</p>
<p>
CCC1<br>
CCC2<br>
CCC3<br>
</p>
</div>
</body>
</html>
다. 특정요소 컨텐츠( content, body ) 앞에 삽입 or 뒤에 삽입
- 문법:
p::before {
content:'값'
}
p::after {
content:'값'
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자8-의사요소2_before & after</title>
<style>
p::before {
content: '안녕하세요.';
color: blue;
}
p::after {
content: '감사합니다.';
color: blueviolet;
}
</style>
</head>
<body>
<p>Hello</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>선택자8-의사요소2_before & after2 img</title>
<style>
p::before {
content: url('images/001.png');
}
p::after {
content: url('images/favicon.png');
}
</style>
</head>
<body>
<p>Hello</p>
</body>
</html>
'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글
CSS 3일차 - 2일차 정리 및 수정 (0) | 2024.04.24 |
---|---|
CSS 2일차 - Box Model, box-sizing, margin, padding, border (1) | 2024.04.23 |
CSS 1일차 - 선택자 (0) | 2024.04.22 |
CSS 1일차 - 적용방법3가지, 캐스캐이딩 & 명시도 (0) | 2024.04.22 |
HTML 2일차 - 시멘틱 태그, 사용자 입력, form, img, iframe, 특수문자 (0) | 2024.04.22 |