[CSS] 선택자(selector)

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

'Web > CSS' 카테고리의 다른 글

[CSS] 상자(box) (0)	2021.12.12
[CSS] 배경(background) (0)	2021.12.11
[CSS] 단락(paragraph) (0)	2021.12.10
[CSS] 폰트(font) (0)	2021.12.09
[CSS] HTML문서에 CSS 적용 방법 (0)	2021.12.07

'Web > CSS' 카테고리의 다른 글

티스토리툴바