728x90
반응형
SMALL
안녕하세요.
#yeoneeblog 여니입니다 :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>기타선택자</title>
<link href="resources/css/2_stylesheet.css" rel="stylesheet">
<!--
외부 스타일 방식 : 스타일 정보만을 따로 관리하는 .css외부문서를 만들고 link를 통해 연결시켜주는 방법
-->
</head>
<body>
<h2>1. 속성 선택자</h2>
<p>
스타일을 부여하고자 하는 요소 내에 작성되어 있는 속성을 이용해서 선택하는 방법
선택자 뒤에 []를 이용해서 속성과 속성값을 제시해서 선택하는 방법
</p>
<pre class="div-class" name="name3">
선택자[속성=속성값]{
css속성 : 값;
}
선택자[속성~=속성값]{
css속성 : 값;
}
선택자[속성|=속성값]{
css속성 : 값;
}
선택자[속성^=속성값]{
css속성 : 값;
}
선택자[속성$=속성값]{
css속성 : 값;
}
선택자[속성*=속성값]{
css속성 : 값;
}
</pre>
div.div-class[name=name$]{div$}*4
<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>2. 자손선택자와 후손선택자</h2>
<p>
자손 : 바로 하위인 요소들
후손 : 하위 요소들 전부
</p>
<pre>
* 자손선택자(>)
a>b {
스타일속성 : 값;
}
* 후손선택자( )
a b{
스타일속성 : 값;
}
</pre>
<div id="test1">
<h4>나는 div의 자손이면서 후손입니다</h4>
<h4>나는 div의 자손이면서 후손입니다</h4>
<li>ㅇㅇ</li>
<ul>나는 div의 자손이면서 후손입니다
<li>나는 ul의 자손이면서 div 후손입니다</li>
<li>나는 ul의 자손이면서 div 후손입니다</li>
</ul>
</div>
<hr>
<h2>3. 동위레벨 선택자</h2>
<p>
동위관계(같은 레벨)에 있는 뒤에 위치한 특정 요소를 선택할 때 사용
</p>
<pre>
* a 요소 뒤에 있는 b요소 "하나만"을선택
a+b {
스타일속성: 값;
}
* a 요소 뒤에 있는 모든 b요소를 다선택할때
a~b {
스타일속성: 값;
}
</pre>
<div id="test2">div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<ul>ul요소</ul>
<div>안녕</div>
<h2>4. 반응 선택자</h2>
<p>
사용자의 움직임에 따라 선택이 되거나 안되는 선택자
</p>
<pre>
* 해당 요소에 클릭이 되었을경우 스타일 부여
선택자:active{
스타일속성 : 값;
}
* 해당 요소에 마우스가 올라가는 순간 스타일 부여
선택자:hover{
스타일속성 : 값;
}
</pre>
<div id="active-test" class="area">active 테스트</div>
<br>
<div id="hover-test" class="area">hover 테스트</div>
<hr>
<h2>5. 상태선택자</h2>
<p>
요소의 상태에 따라서 선택되는 선택자
</p>
<pre>
1) checked(체크된) 상태의 요소
선택자:checked{
스타일속성:값;
}
</pre>
<input type="checkbox" id="apple1"><label for="apple1">사과1</label>
<input type="checkbox" id="apple2"><label for="apple2">사과2</label>
<input type="checkbox" id="apple3"><label for="apple3">사과3</label>
<br>
<pre>
2) 초점(focus)이 맞춰진 상태의 input 요소 선택
선택자:focus{
스타일속성:값;
}
</pre>
아이디 :
<input type="text" name="userId" placeholder="아이디를입력해주세요">
<br>
비밀번호 :
<input type="password" name="userPwd">
<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>
728x90
반응형
LIST
'VsCode(HTML)' 카테고리의 다른 글
| 목록관련스타일 HTML (0) | 2023.05.12 |
|---|---|
| 텍스트관련스타일 HTML (0) | 2023.05.12 |
| 글꼴관련스타일 HTML (0) | 2023.05.11 |
| 선택자우선순위 HTML (0) | 2023.05.11 |
| 기본선택자 HTML (0) | 2023.05.09 |