Web/CSS
[CSS] 선택자(selector)
씨네
2021. 12. 8. 10:27
728x90
선택자(selector) : 스타일을 적용시킬 범위를 선택하기 위한 표현식
( CSS에서의 주석은 자바에서 여러줄 주석과 마찬가지로 /* ... */를 사용합니다)
1. 전체 선택자
- *를 사용.( 자주 사용하지는 않으며 주로 CSS적용 전 모든 값 초기화에 주로 사용됩니다. )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자</title>
<style type=“text/css”>
/* 전체 선택자 */
*{
font-size:10px;
}
</style>
</head>
<body>
<h1>선택자</h1>
<article>
<h3>전체 선택자</h3>
</article>
</body>
</html>
2. 타입 선택자
- 태그 이름을 지정하여 선언
- 동일한 속성에 대한 여러 요소를 콤마(,) 로 구분하여 선언 가능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자</title>
<style type="text/css">
/* 타입 선택자 */
pre {
text-align: center;
}
h1{
color: purple;
}
</style>
</head>
<body>
<h1>선택자</h1>
<article>
<h3>타입 선택자</h3>
<pre>태그 이름을 지정하여 선언</pre>
</article>
</body>
</html>
3. 그룹 선택자
- 여러 요소로 각각 같은 속석 적용
- ,(콤마)로 구분
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자</title>
<style type="text/css">
/* 그룹 선택자 */
p, pre, string{
background-color: green;
color: yellow;
}
</style>
</head>
<body>
<h1>선택자</h1>
<article id="my">
<h3>그룹 선택자</h3>
<p>여러 요소에</p>
<pre>각각 같은 속성을</pre>
<strong>적용한다</strong>
</article>
</body>
</html>
4. id 선택자
- 요소에 id를 지정하고, style에서 지정된 id값으로 사용
- #으로 구분
- '유일한 하나' 인경우에 사용하는 것이 좋음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자</title>
<style type="text/css">
#sid01 {
color: red;
}
#sid02{
color:green;
}
#sid03{
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>선택자</h1>
<article>
<h3>id 선택자</h3> <!-- id는 유일한 하나 -->
<ul>
<li id="sid01">요소에 id를 지정하고</li>
<li id="sid02">style에서 지정된 id값으로 사용</li>
<li id="sid03">#으로 구분</li>
</ul>
</article>
</body>
</html>
5. class 선택자
- 요소에 class를 지정하고, style에서 지정된 class 값으로 사용
- .(dot)으로 구분
- 한번에 여러 개를 바꿀 때 사용하는 것이 좋다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자</title>
<style type="text/css">
/* class 선택자 */
.scls{
color:lightgray;
}
</style>
</head>
<body>
<h1>선택자</h1>
<article>
<h3>class 선택자</h3> <!-- class는 여러개 동시 적용 -->
<ol>
<li class="scls">요소에 class를 지정하고</li>
<li class="scls">style에서 지정된 class값으로 사용</li>
<li class="scls">.(dot) 으로 구분</li>
</ol>
</article>
</body>
</html>
6. 종속 선택자
- 타입, id, class 선택자가 결합된 형태
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자</title>
<style type="text/css">
/* 종속 선택자 */
li.scls01{
background-color: red;
}
li.scls02#sidul{
font-size: 40px;
}
</style>
</head>
<body>
<h1>선택자</h1>
<article>
<h3 class="scls01">종속 선택자</h3>
<ul>
<li class="scls01">타입 선택자와</li>
<li class="scls02">id 선택자(#)</li>
<li class="scls01">class 선택자(.)</li>
<li class="scls02" id="sidul">가 혼합된 형태</li>
</ul>
</article>
</body>
</html>
7. 자식 선택자
- 부모/자식 관계에서 자식 요소를 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자</title>
<style type="text/css">
/* 자식 선택자 */
#at > p{
color: #2CE0BC;
}
#at > div > p{
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>선택자</h1>
<article id="at">
<h3>자식 선택자</h3>
<div>
<p>자식1</p>
</div>
<p>자식2</p>
</article>
</body>
</html>
8. 하위 선택자
- 특정 요소 하위의 요소를 지정할 떄 사용
- 공백으로 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자</title>
<style type="text/css">
/* 하위 선택자 */
div span{
background-color: fuchsia;
}
</style>
</head>
<body>
<h1>선택자</h1>
<article>
<h3>하위 선택자</h3>
<div>
<span>특정 요소 하위의</span>
<p>
<span>요소를 지정할 때 사용</span>
</p>
</div>
</article>
</body>
</html>
9. 인접 선택자
- 지정한 요소 다음에 나오는 요소를 선택
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자</title>
<style type="text/css">
/* 인접 선택자 */
h3 + b{
color: silver;
}
b + span{
color: gold;
}
</style>
</head>
<body>
<h1>선택자</h1>
<article>
<h3>인접 선택자</h3>
<b>지정한 요소 다음</b>
<span>에 나오는요소 선택</span>
<b>인접 ?</b>
</article>
</body>
</html>
10. 속성 선택자
- 속성이 정의된 태그만 선택
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자</title>
<style type="text/css">
/* 속성 선택자 */
p[title]{
color: lime;
}
p[title="b"] {
background-color: yellow;
}
</style>
</head>
<body>
<h1>선택자</h1>
<article>
<h3>속성 선택자</h3>
<p title="a">속성이 정의된</p>
<p title="b">태그만 선택하는</p>
<p>선택자!</p>
</article>
</body>
</html>
11. 가상 클래스 선택자
- 요소의 상태에 따라 선택자 지정
- 상태가 html 문서에 표현되는 것은 아님
- css에서만 구별
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자</title>
<style type="text/css">
/* 가상 클래스 선택자 */
/* 방문하지 않은 링크 */
a:link{
color: hotpink;
font-size: 20pt;
}
/* 방문한 링크 */
a:visited{
color: skyblue;
font-size: 50pt;
}
/* 마우스커서가 올려져 있을때 */
a:hover{
background-color: maroon;
font-size: 35pt;
}
/* 클릭하는순간 */
a:active{
color: red;
}
/* 체크박스가 체크 되었을때 */
input:checked{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>선택자</h1>
<article>
<h3>가상 클래스 선택자</h3>
<ul>
<li>특정 이벤트가 발생한 태그 선택!</li>
<li><a href="http://www.naver.com">네이버</a></li>
<li><a href="http://qclass.iptime.org:8686/kh/hangul.html">시계</a></li>
<li><input type="checkbox">체크하면 효과 적용</li>
</ul>
</article>
</body>
</html>
728x90