/* body{
background-color: aqua;
} 속성 선택자 */
/*div 요소 중 name 속성 값이 "name1"과 일치하는 요소 */
div[name=name1]{
background-color: crimson;
}
/* div 요소 중 name 속성 값에 "name1"이 포함되어 있는 요소(키워드 x) */
div[name~="name1"]{
background-color: blue;
}
/* div 요소 중 class 속성 값이 "class"로 시작하는 요소(단어, -로 구분) */
div[class|=class]{
background-color: plum;
}
/* div 요소 중 name 속성 값이 "na"로 시작하는 요소 */
div[name^=na]{
background-color: beige;
}
/* div 요소 중 class 속성 값이 "ss"로 끝나는 요소 */
div[class$=ss]{
background-color: aliceblue;
}
/* div 요소 중 class 속성 값에 "i"가 포함된 요소 */
div[class*=i]{
background-color: darkred;
color: hotpink;
}
/* Q. class 속성 값이 div-class인 요소 중에 name 속성 값에 name3이 포함되어 있는 요소
배경을 pink로 */
.div-class[name~=name3]{
background-color: pink;
}
/*
자손 선택자와 후손 선택자
a > b a 요소의 자손 요소 중 b 요소만 전부 선택
아이디가 parent인 요소의 자손들 중 h4 요소만 선택*/
#parent > h4{
background-color: brown;
}
/* 아이디가 parent인 요소의 모든 자손 선택 */
#parent > *{color: hotpink; }
/* 아이디가 parent인 요소의 자손 중 ul 요소의 자손 중 li 요소 선택 */
#parent > ul > li {color: chocolate;}
/* 아이디가 parent인 요소의 후손들의 배경색을 변경 */
#parent * {background-color: chartreuse; color: aquamarine;}
/* 아이디가 parent인 요소의 후손 중 li 요소만 선택 */
#parent li{color: blue;}
/*----------------------동위 선택자------------------------ */
/* a + b : a 요소 바로 뒤에 오는 b 요소 하나 */
#sibling + div {background-color: dimgray;}
/* a ~ b : a 요소와 같은 레벨에 있는 모든 b 요소 */
#sibling ~ ul {background-color: tomato;}
div + ul{
background-color: blue;
}
/* --- 반응 선택자------------------------------------------------ */
.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: white;
}
/* --- 상태 선택자----- */
/* 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: olive;
color: white;
}
button:enabled{
background-color: coral;
}
button:disabled{
background-color: darkred;
opacity: 0.1;
color:white;
/* 불투명도 설정. (1: 불투명-> 선명하게 표현, 0~1 :0으로 갈수록 투명해짐 ) 0: 없어짐 */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS - 기타 선택자</title>
</head>
<body>
<!--외부 스타일 방식 : 스타일 정보만을 따로 작성하는 css.외부문서를 만들고
link 태그를 통해서 연결시키는 방식
-->
<link rel="stylesheet" href="resources/css/02_style.css">
<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>
<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{
스타일 속성 : 값;
}
아이디 : <input type="text" name="userId">
<br>
비밀번호 : <input type="password" name="userPwd">
</pre>
<p>(3)활성(enabled), 비활성(disabled)되어 있는 요소 선택</p>
<pre>
선택자:enabled{
스타일 속성: 값;
}
선택자:disabled{
스타일 속성: 값;
}
</pre>
<button>활성 버튼(클릭 가능)</button>
<button disabled>비활성 버튼(클릭 불가)</button>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 메뉴바 만들기 (0) | 2024.08.12 |
|---|---|
| 자바스크립트 요소에 접근하기 (0) | 2024.08.11 |
| 자바스크립트 데이터 입출력 (0) | 2024.08.10 |
| 자바스크립트 개요 (0) | 2024.08.09 |
| HTML 입력 양식 작성하기 (0) | 2024.08.08 |