##CSS
기타선택자 수업내용 복습
운중동토토로
2024. 10. 16. 22:07
1. 비쥬얼스튜디오코드 프로그램으로 수업내용 복붙
2. 미리보기로 활용 복습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS - 기타 선택자</title>
<!--
외부 스타일 방식 : 스타일 정보만을 따로 작성하는 .css 외부문서를 만들고
link 태그를 통해서 연결시키는 방식
-->
<link rel="stylesheet" href="resources/css/02_style.css">
</head>
<body>
<h2>속성 선택자</h2>
<ul>
<li>선택하고자 하는 요소에서 작성되어 있는 속성을 이용해서 선택하는 방법</li>
<li>선택자 뒤에 []를 이용해서 속성과 속성값을 제시하여 선택</li>
</ul>
<pre>
* 키워드 => 속성값
키워드가 일치하는 경우 : 선택자[속성명=키워드]
키워드가 포함되어 있는 경우 (전체단어) : 선택자[속성명~=키워드]
키워드가 포함되어 있는 경우 : 선택자[속성명*=키워드]
키워드로 시작하는 경우 (전체단어 또는 단어 다음에 -가 있는 경우) : 선택자[속성명|=키워드]
키워드로 시작하는 경우 : 선택자[속성명^=키워드]
키워드로 끝나는 경우 : 선택자[속성명$=키워드]
</pre>
<div class="div-class" name="name1">DIV1</div>
<div class="div-class" name="name2">DIV2</div>
<div class="div-class" name="name3 name1">DIV3</div>
<div class="class-div" name="name3">DIV4</div>
<hr>
<h2>자손선택자와 후손선택자</h2>
<ul>
<li>요소들이 중첩되어 작성 가능</li>
<li>자손 : 바로 하위에 있는 요소들</li>
<li>후손 : 하위 요소 전부</li>
</ul>
<pre>
* 자손 선택자 : >
a > b {
스타일속성 : 값;
} /* a 요소의 자손 요소 b */
* 후손 선택자 : 공백
a b {
스타일속성 : 값;
} /* a 요소의 후손 요소 b */
</pre>
<div id="parent">
<h4>div 요소의 자손이면서 후손</h4>
<h4>div 요소의 자손이면서 후손</h4>
<ul>div 요소의 자손이면서 후손
<li>ul 요소의 자손이고, div 요소의 후손</li>
<li>ul 요소의 자손이고, div 요소의 후손</li>
</ul>
</div>
<hr>
<h2>동위(같은 레벨) 선택자</h2>
<ul>
<li>동위관계(같은 레벨)에 있는 특정 요소를 선택할 때 사용</li>
<li>선택되는 요소가 뒤에 위치하는 요소</li>
</ul>
<pre>
* a 요소 바로 뒤에 있는 b 요소 하나만 선택
a + b {
스타일속성: 값;
}
* a 요소 뒤에 모든 b 요소 선택
a ~ b {
스타일속성: 값;
}
</pre>
<!-- div*4+ul+div -->
<div id="sibling">A 영역</div>
<div>B 영역</div>
<div>C 영역</div>
<div>D 영역</div>
<ul>E 영역</ul>
<div>F 영역</div>
<hr>
<h2>반응 선택자</h2>
<p>사용자의 움직임에 따라 선택되는 선택자</p>
<pre>
* 해당 요소에 클릭이 되었을 경우 스타일 적용
선택자:active {
스타일 속성: 값;
}
* 해당 요소에 마우스가 올라가는 순간 스타일 적용
선택자:hover {
스타일 속성: 값;
}
</pre>
<div id="active-test" class="area">activeTest</div>
<br><br>
<div id="hover-test" class="area">hoverTest</div>
<br><br>
<hr>
<h2>상태 선택자</h2>
<h4>요소의 상태에 따라서 선택되는 선택자</h4>
<p>(1) 체크된(checked) 상태의 요소</p>
<pre>
선택자:checked {
스타일 속성: 값;
}
</pre>
<input type="checkbox" id="apple">
<label for="apple">사과</label>
<input type="checkbox" id="banana">
<label for="banana">바나나</label>
<p>(2) 초점(focus)이 맞춰진 input 요소</p>
<pre>
선택자:focus {
스타일 속성: 값;
}
</pre>
아이디 : <input type="text" name="userId">
<br>
비밀번호 : <input type="password" name="userPwd">
<p>(3) 활성(enabled), 비활성(disabled)되어 있는 요소 선택</p>
<pre>
선택자:enabled {
스타일 속성: 값;
}
선택자:disabled {
스타일 속성: 값;
}
</pre>
<button>활성 버튼(클릭 가능)</button>
<button disabled>비활성 버튼(클릭 불가)</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
위 코드에 링크 걸어주었던 css파일 코드 ▼
/* body { background-color: aqua; } */
/* --- 속성 선택자 ------------------------*/
/* div 요소 중 name 속성 값이 "name1"과 일치하는 요소 */
div[name=name1] {
background-color: tomato;
}
/* div 요소 중 name 속성 값에 "name1"이 포함되어 있는 요소 (키워드 x) */
div[name~=name1] {
background-color: blueviolet;
}
/* div 요소 중 class 속성 값이 "class"로 시작하는 요소 (단어, -로 구분) */
div[class|=class] {
background-color: plum;
}
/* div 요소 중 name 속성 값이 "na"로 시작하는 요소 */
div[name^=na] {
background-color: orange;
}
/* div 요소 중 class 속성 값이 "ss"로 끝나는 요소 */
div[class$=ss] {
color: white;
}
/* div 요소 중 class 속성 값에 "i"가 포함된 요소 */
div[class*=i] {
background-color: coral;
color:black;
}
/* Q. class 속성 값이 div-class인 요소 중에 name 속성 값에 name3이 포함되어 있는 요소 (배경색 pink) */
.div-class[name~=name3] {
background-color: pink;
}
/* --- 자손 선택자와 후손 선택자 ----------------------*/
/* a > b : a 요소의 자손 요소 중 b 요소만 전부 선택 */
/* 아이디가 parent인 요소의 자손들 중 h4 요소만 선택 */
#parent > h4 { background-color: darkslategray; }
/* 아이디가 parent인 요소의 모든 자손 선택 */
#parent > * { background-color: hotpink; }
/* 아이디가 parent인 요소의 자손 중 ul 요소의 자손 중 li 요소 선택 */
#parent > ul > li { background-color: cornflowerblue; }
/* 아이디가 parent인 요소의 후손들의 글자색을 변경 */
#parent * { color: yellow; }
/* 아이디가 parent인 요소의 후손 중 li 요소만 선택 */
#parent li { color: blue; }
/* --- 동위 선택자 -----------------------------*/
/* a + b : a 요소 바로 뒤에 오는 b 요소 하나 */
#sibling + div { background-color: gray; }
#sibling + ul { background-color: tomato; } /* 바로 뒤에 오는 ul 요소가 아니기 때문에 선택 안됨! */
/* a ~ b : a 요소와 같은 레벨에 있는 모든 b 요소 */
#sibling ~ ul { background-color: tomato;}
/* --- 반응 선택자 -----------------------------*/
.area {
background-color: yellowgreen;
width: 100px;
height: 100px;
cursor: pointer;
}
#active-test:active {
background-color: red;
color: white;
}
#hover-test:hover {
background-color: royalblue;
color:brown;
}
/* --- 상태 선택자 ----------------------------*/
/* input 요소의 type 속성의 값이 checkbox인 요소 중 체크된 상태의 요소 */
input[type=checkbox]:checked {
width: 30px;
height: 30px;
}
input[type=checkbox]:checked+label {
font-size: 30px;
}
/* input 요소 중 name 속성의 값이 user로 시작하는 요소 */
input[name^=user]:focus {
background-color: navy;
color: white;
}
button:enabled {
background-color: deepskyblue;
}
button:disabled {
background-color: deepskyblue;
opacity: 0.5; /* 불투명도 설정. ( 1: 불투명-> 선명하게 표현, 0 ~ 1: 0으로갈수록투명해짐, 0: 투명->안보임 ) */
}