[CSS 1-2] 선택자

임승현·2022년 11월 10일

CSS

목록 보기
2/14

🐧기본 선택자

◈ 전체 선택자 : 모든 엘리먼트(Element - 태그)를 선택 - 비권장

* {
	margin: 0;
	padding: 0;
}

🎨태그 선택자

📌태그 선택자 : 태그명을 이용하여 엘리먼트 선택

→ 태그명이 같은 다수의 엘리먼트가 선택되어 동일한 스타일 적용

h2 {
	color: green;
}
p {
	color: blue;
}

🎨클래스 선택자

📌클래스 선택자 : 태그의 class 속성값을 이용하여 엘리먼트 선택

→ 태그 선택자와 구분하기 위해 클래스 선택자는 [.]으로 시작되도록 표현
→ class 속성값이 같은 다수의 엘리먼트에 동일한 스타일 적용

.text1 {
	color: maroon;
}
.text2 {
	color: lime;
}
.text3 {
	text-align: center;
}

🌠class 속성 : css 스타일 적용하기 위한 태그의 클래스명을 속성값으로 설정

→ 태그에는 동일한 class 속성값 설정 가능 - 같은 class 속성값을 사용하는 태그에 동일한 css 스타일 적용
→ class 속성에는 다수의 속성값을 설정 가능 - 공백으로 속성값 구분

<p class="text1">브라우저에 출력될 아주 중요한 내용입니다.</p>
<p class="text1 text3">브라우저에 출력될 아주 중요한 내용입니다.</p>
<p class="text2">브라우저에 출력될 아주 중요한 내용입니다.</p>

🎨아이디 선택자

📌아이디 선택자 : 태그의 id 속성값을 이용하여 엘리먼트 선택

→ 태그 선택자와 구분하기 위해 아이디 선택자는 [#]으로 시작되도록 표현
→ id 속성값을 사용하는 하나의 엘리먼트에만 스타일 적용
◈ 선택자는 [,] 기호를 이용하여 여러개를 나열하여 엘리먼트 선택 가능

#text4 {
	color: olive;
}
#text5, #text6 {
	color: silver;
}

🌠id 속성 : 태그를 구분하기 위한 식별자(고유값)를 속성값으로 설정

→ id 속성은 태그를 구분하기 위해 사용하므로 동일한 속성값 설정 불가능

<p id="text4">브라우저에 출력될 아주 중요한 내용입니다.</p>
<p id="text5">브라우저에 출력될 아주 중요한 내용입니다.</p>
<p id="text6">브라우저에 출력될 아주 중요한 내용입니다.</p>

📃05_basic_selector.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
/* 전체 선택자 : 모든 엘리먼트(Element - 태그)를 선택 - 비권장 */	
/*
* {
	margin: 0;
	padding: 0;
}
*/
/* 태그 선택자 : 태그명을 이용하여 엘리먼트 선택 */
/* → 태그명이 같은 다수의 엘리먼트가 선택되어 동일한 스타일 적용 */
h2 {
	color: green;
}
p {
	color: blue;
}
/* 클래스 선택자 : 태그의 class 속성값을 이용하여 엘리먼트 선택 */
/* → 태그 선택자와 구분하기 위해 클래스 선택자는 [.]으로 시작되도록 표현 */
/* → class 속성값이 같은 다수의 엘리먼트에 동일한 스타일 적용 */
.text1 {
	color: maroon;
}
.text2 {
	color: lime;
}
.text3 {
	text-align: center;
}
/* 아이디 선택자 : 태그의 id 속성값을 이용하여 엘리먼트 선택 */
/* → 태그 선택자와 구분하기 위해 아이디 선택자는 [#]으로 시작되도록 표현 */
/* → id 속성값을 사용하는 하나의 엘리먼트에만 스타일 적용 */
#text4 {
	color: olive;
}
/* 선택자는 [,] 기호를 이용하여 여러개를 나열하여 엘리먼트 선택 가능  */
#text5, #text6 {
	color: silver;
}
</style>
</head>
<body>
	<h1>기본 선택자</h1>
	<hr>
	<p>기본 선택자 - 태그 선택자, 클래스 선택자, 아이디 선택자</p>
	<h2>태그 선택자</h2>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<hr>
	<h2>클래스 선택자</h2>
	<!-- class 속성 : css 스타일 적용하기 위한 태그의 클래스명을 속성값으로 설정 -->
	<!-- → 태그에는 동일한 class 속성값 설정 가능 - 같은 class 속성값을 사용하는 태그에 동일한 css 스타일 적용 -->
	<!-- → class 속성에는 다수의 속성값을 설정 가능 - 공백으로 속성값 구분 -->
	<p class="text1">브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p class="text1 text3">브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p class="text2">브라우저에 출력될 아주 중요한 내용입니다.</p>
	<hr>
	<h2>아이디 선택자</h2>
	<!-- id 속성 : 태그를 구분하기 위한 식별자(고유값)를 속성값으로 설정 -->
	<!-- → id 속성은 태그를 구분하기 위해 사용하므로 동일한 속성값 설정 불가능 -->
	<p id="text4">브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p id="text5">브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p id="text6">브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>

🐧파생 선택자

◈ 파생 선택자 - 후손 선택자, 자식 선택자, 필터 선택자, 형제 선택자 등

🎨후손 선택자

📌후손 선택자 : 부모 엘리먼트를 기준으로 모든 깊이의 엘리먼트(후손 엘리먼트) 선택

형식) 선택자(부모) 선택자(후손)

#super1 div {
	color: purple;
}

─────────────────────────────────────

<h2>후손 선택자</h2>
	<div id="super1">
		<div>사원이름</div>
		<ul>
			<li><div>홍길동</div></li>
			<li><div>임꺽정</div></li>
			<li><div>전우치</div></li>
		</ul>
	</div>

🎨자식 선택자

📌자식 선택자 : 부모 엘리먼트를 기준으로 첫번째 깊이의 엘리먼트(자식 엘리먼트) 선택

형식) 선택자(부모) > 선택자(자식)

#super2 > div {
	color: gold;
}

─────────────────────────────────────

<h2>자식 선택자</h2>
	<div id="super2">
		<div>사원이름</div>
		<ul>
			<li><div>홍길동</div></li>
			<li><div>임꺽정</div></li>
			<li><div>전우치</div></li>
		</ul>
	</div>

🎨필터 선택자

📌필터 선택자 : 선택된 다수의 엘리먼트 중 특정 엘리먼트 선택

→ 필터 선택자는 클래스 선택자를 이용해야만 구현 가능
형식) 선택자.클래스선택자

#super3 div {
	color: orange;
}
#super3 div.choice {
	color: lime;
}

─────────────────────────────────────

	<h2>필터 선택자</h2>
	<div id="super3">
		<div>사원이름</div>
		<ul>
			<li><div>홍길동</div></li>
			<li><div class="choice">임꺽정</div></li>
			<li><div>전우치</div></li>
		</ul>
	</div>

🎨형제 선택자

📌형제 선택자 : 선택된 하나의 엘리먼트 다음에 위치한 같은 깊이의 모든 엘리먼트 선택

형식) 선택자 ~ 선택자

#p1 ~ p {
	color: fuchsia;
}

📌인접 형제 선택자 : 선택된 하나의 엘리먼트 다음에 위치한 같은 깊이의 첫번째 엘리먼트 선택

형식) 선택자 + 선택자

#p1 + p {
	color: red;
}

─────────────────────────────────────

<h2>형제 선택자</h2>
	<p id="p1">브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>

📃06_derive_select.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
/* 후손 선택자 : 부모 엘리먼트를 기준으로 모든 깊이의 엘리먼트(후손 엘리먼트) 선택 */
/* 형식) 선택자(부모) 선택자(후손) */
#super1 div {
	color: purple;
}
/* 자식 선택자 : 부모 엘리먼트를 기준으로 첫번째 깊이의 엘리먼트(자식 엘리먼트) 선택 */
/* 형식) 선택자(부모) > 선택자(자식) */
#super2 > div {
	color: gold;
}
/* 필터 선택자 : 선택된 다수의 엘리먼트 중 특정 엘리먼트 선택 */
/* → 필터 선택자는 클래스 선택자를 이용해야만 구현 가능 */
/* 형식) 선택자.클래스선택자 */
#super3 div {
	color: orange;
}
#super3 div.choice {
	color: lime;
}
/* 형제 선택자 : 선택된 하나의 엘리먼트 다음에 위치한 같은 깊이의 모든 엘리먼트 선택 */
/* 형식) 선택자 ~ 선택자 */
#p1 ~ p {
	color: fuchsia;
}
/* 인접 형제 선택자 : 선택된 하나의 엘리먼트 다음에 위치한 같은 깊이의 첫번째 엘리먼트 선택 */
/* 형식) 선택자 + 선택자 */
#p1 + p {
	color: red;
}
</style>
</head>
<body>
	<h1>선택자(Selector)</h1>
	<hr>
	<p>파생 선택자 - 후손 선택자, 자식 선택자, 필터 선택자, 형제 선택자 등</p>
	<hr>
	<h2>후손 선택자</h2>
	<div id="super1">
		<div>사원이름</div>
		<ul>
			<li><div>홍길동</div></li>
			<li><div>임꺽정</div></li>
			<li><div>전우치</div></li>
		</ul>
	</div>
	<hr>
	<h2>자식 선택자</h2>
	<div id="super2">
		<div>사원이름</div>
		<ul>
			<li><div>홍길동</div></li>
			<li><div>임꺽정</div></li>
			<li><div>전우치</div></li>
		</ul>
	</div>
	<hr>
	<h2>필터 선택자</h2>
	<div id="super3">
		<div>사원이름</div>
		<ul>
			<li><div>홍길동</div></li>
			<li><div class="choice">임꺽정</div></li>
			<li><div>전우치</div></li>
		</ul>
	</div>
	<hr>
	<h2>형제 선택자</h2>
	<p id="p1">브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
	<p>브라우저에 출력될 아주 중요한 내용입니다.</p>
</body>
</html>

🐧속성 선택자

📌속성 선택자 : 태그의 속성이나 속성값을 이용하여 엘리먼트 선택

형식) 선택자[속성]
→ 태그 속성값이 존재하는 엘리먼트 선택

a[href] {
	color: green;
}

─────────────────────────────────────

<div><a href="#">하이퍼 링크 기능을 제공하는 태그-2</a></div>

형식) 선택자[속성="비교값"]
→ 태그 속성값이 비교값과 같은 엘리먼트 선택

a[href="#abc"]{
	color: blue;
}

─────────────────────────────────────

<div><a href="#abc">하이퍼 링크 기능을 제공하는 태그-3</a></div>

형식) 선택자[속성*="비교값"]
→ 태그 속성값에 비교값이 포함된 엘리먼트 선택/

div[title*="여성"] {
	color: gold; /* 1 3 4 */

─────────────────────────────────────

	<hr>
	<div title="여성">화장품-1</div>
	<div title="화장품">화장품-2</div>
	<div title="여성화장품">화장품-3</div>
	<div title="여성 화장품">화장품-4</div>
	<div title="남성화장품">화장품-5</div>
	<div title="화장품남성">화장품-6</div>

형식) 선택자[속성~="비교값"]
→ 태그 속성값에 비교값이 하나의 단어로 포함된 엘리먼트 선택

div[title*="화장품"] {
	color: silver; /* 2 4 */
}

─────────────────────────────────────

	<hr>
	<div title="여성">화장품-1</div>
	<div title="화장품">화장품-2</div>
	<div title="여성화장품">화장품-3</div>
	<div title="여성 화장품">화장품-4</div>
	<div title="남성화장품">화장품-5</div>
	<div title="화장품남성">화장품-6</div>

형식) 선택자[속성^="비교값"]
→ 태그 속성값에 비교값으로 시작되는 엘리먼트 선택

div[title^="남성"] {
	color: orange; /* 5 */
}

─────────────────────────────────────

	<hr>
	<div title="여성">화장품-1</div>
	<div title="화장품">화장품-2</div>
	<div title="여성화장품">화장품-3</div>
	<div title="여성 화장품">화장품-4</div>
	<div title="남성화장품">화장품-5</div>
	<div title="화장품남성">화장품-6</div>

형식) 선택자[속성$="비교값"]
→ 태그 속성값에 비교값으로 종료되는 엘리먼트 선택

div[title$="남성"] {
	color: maroon; /* 6 */
}

─────────────────────────────────────

	<hr>
	<div title="여성">화장품-1</div>
	<div title="화장품">화장품-2</div>
	<div title="여성화장품">화장품-3</div>
	<div title="여성 화장품">화장품-4</div>
	<div title="남성화장품">화장품-5</div>
	<div title="화장품남성">화장품-6</div>

📃07_attribute_select

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div {
	font-size: 20px;
	line-height: 35px
}
a {
	color: red;
	text-decoration: none;
}
/* 속성 선택자 : 태그의 속성이나 속성값을 이용하여 엘리먼트 선택 */
/* 형식) 선택자[속성] */
/* → 태그 속성값이 존재하는 엘리먼트 선택 */
a[href] {
	color: green;
}
/* 형식) 선택자[속성="비교값"] */
/* → 태그 속성값이 비교값과 같은 엘리먼트 선택 */
a[href="#abc"]{
	color: blue;
}
/* 형식) 선택자[속성*="비교값"] */
/* → 태그 속성값에 비교값이 포함된 엘리먼트 선택 */
div[title*="여성"] {
	color: gold; /* 1 3 4 */
}
/* 형식) 선택자[속성~="비교값"] */
/* → 태그 속성값에 비교값이 하나의 단어로 포함된 엘리먼트 선택 */
div[title*="화장품"] {
	color: silver; /* 2 4 */
}
/* 형식) 선택자[속성^="비교값"] */
/* → 태그 속성값에 비교값으로 시작되는 엘리먼트 선택 */
div[title^="남성"] {
	color: orange; /* 5 */
}
/* 형식) 선택자[속성$="비교값"] */
/* → 태그 속성값에 비교값으로 종료되는 엘리먼트 선택 */
div[title$="남성"] {
	color: maroon; /* 6 */
}
</style>
</head>
<body>
	<h1>선택자(Selector)</h1>
	<hr>
	<p>태그의 속성과 속성값을 이용하여 스타일 적용 가능</p>
	<hr>
	<div><a>하이퍼 링크 기능을 제공하는 태그-1</a></div>
	<div><a href="#">하이퍼 링크 기능을 제공하는 태그-2</a></div>
	<div><a href="#abc">하이퍼 링크 기능을 제공하는 태그-3</a></div>
	<hr>
	<div title="여성">화장품-1</div>
	<div title="화장품">화장품-2</div>
	<div title="여성화장품">화장품-3</div>
	<div title="여성 화장품">화장품-4</div>
	<div title="남성화장품">화장품-5</div>
	<div title="화장품남성">화장품-6</div>
</body>
</html>

🐧가상 선택자

📌가상 선택자 : 선택된 엘리먼트의 상태에 의해 CSS 스타일을 다르게 적용

형식) 선택자:상태
→ 선택된 엘리먼트에 따라 사용 가능한 상태가 존재

◈ [:link] : a 태그로 설정된 URL 주소의 웹문서를 브라우저로 한번도 요청하지 않은 상태

a:link { color: lime; }

◈ [:visited] : a 태그로 설정된 URL 주소의 웹문서를 브라우저로 한번이상 요청하여 응답받은 상태

a:visited {	color: gold; }

◈ [:active] : 선택된 엘리먼트에 마우스 커서를 위치하여 버튼으로 누르고 있는 상태

a:active { color: red; }

◈ [:hover] : 선택된 엘리먼트에 마우스 커서가 위치하고 있는 상태

a:hover {
	color: blue;
	text-decoration: underline;
}

◈ [:first-child] : 선택된 다수의 엘리먼트 중 첫번째 엘리먼트 선택

ul li:first-child { color: red; }

◈ [:last-child] : 선택된 다수의 엘리먼트 중 마지막 엘리먼트 선택

ul li:last-child { color: green; }

◈ [:nth-child(X)] : 선택된 다수의 엘리먼트 중 앞에서 X번째 위치한 엘리먼트 선택

ul li:nth-child(2) { color: blue; }

◈ [:nth-last-child(X)] : 선택된 다수의 엘리먼트 중 뒤에서 X번째 위치한 엘리먼트 선택

ul li:nth-last-child(2) { color: silver; }

◈ [:nth-child(2n-1)] : 선택된 다수의 엘리먼트 중 홀수번째 위치한 엘리먼트 선택

ol li:nth-child(2n-1) { color: teal; }

◈ [:nth-child(2n-1)] 대신 [:nth-child(odd)] 사용 가능

ol li:nth-child(odd) { color: teal; }

◈ [:nth-child(2n)] : 선택된 다수의 엘리먼트 중 짝수번째 위치한 엘리먼트 선택

ol li:nth-child(2n) { color: fuchsia; }

◈ [:nth-child(2n)] 대신 [:nth-child(even)] 사용 가능

ol li:nth-child(even) { color: fuchsia; }

◈ [:nth-child(Xn)] : 선택된 다수의 엘리먼트 중 X의 배수번째 위치한 엘리먼트 선택

ol li:nth-child(3n) { color: pink; }

input { border: 1px solid black; }
input[type="text"]{ border: 1px solid maroon; }

◈ [:not(선택자)] : 선택자의 엘리먼트를 제외한 나머지 엘리먼트 선택 */

input:not([type="text"]) { border: 1px solid orange; }

◈ [:disabled] : 선택된 엘리먼트가 비활성화 상태인 경우 /
◈ [:checked] : 선택된 엘리먼트(input - radio 또는 checkbox)가 선택된 상태인 경우 /
◈ [:selected] : 선택된 엘리먼트(select - option)가 선택된 상태인 경우 */

input[type="text"]:disabled { border: 1px dotted red; }

◈ [:focus] : 선택된 엘리먼트(입력태그)에 입혁촛점이 위치한 상태 */

input:focus { border: 3px double green; }

📃08_virtual_select.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
div {
	font-size: 20px;
	line-height: 35px
}
a {
	color: orange;
	text-decoration: none;
}
/* 가상 선택자 : 선택된 엘리먼트의 상태에 의해 CSS 스타일을 다르게 적용 */
/* 형식) 선택자:상태 */
/* → 선택된 엘리먼트에 따라 사용 가능한 상태가 존재 */
/* [:link] : a 태그로 설정된 URL 주소의 웹문서를 브라우저로 한번도 요청하지 않은 상태 */
a:link { color: lime; }
/* [:visited] : a 태그로 설정된 URL 주소의 웹문서를 브라우저로 한번이상 요청하여 응답받은 상태 */
a:visited {	color: gold; }
/* [:active] : 선택된 엘리먼트에 마우스 커서를 위치하여 버튼으로 누르고 있는 상태 */
a:active { color: red; }
/* [:hover] : 선택된 엘리먼트에 마우스 커서가 위치하고 있는 상태 */
a:hover {
	color: blue;
	text-decoration: underline;
}
/* [:first-child] : 선택된 다수의 엘리먼트 중 첫번째 엘리먼트 선택 */
ul li:first-child { color: red; }
/* [:last-child] : 선택된 다수의 엘리먼트 중 마지막 엘리먼트 선택 */
ul li:last-child { color: green; }
/* [:nth-child(X)] : 선택된 다수의 엘리먼트 중 앞에서 X번째 위치한 엘리먼트 선택 */
ul li:nth-child(2) { color: blue; }
/* [:nth-last-child(X)] : 선택된 다수의 엘리먼트 중 뒤에서 X번째 위치한 엘리먼트 선택 */
ul li:nth-last-child(2) { color: silver; }
/* [:nth-child(2n-1)] : 선택된 다수의 엘리먼트 중 홀수번째 위치한 엘리먼트 선택 */
ol li:nth-child(2n-1) { color: teal; }
/* [:nth-child(2n-1)] 대신 [:nth-child(odd)] 사용 가능 */
ol li:nth-child(odd) { color: teal; }
/* [:nth-child(2n)] : 선택된 다수의 엘리먼트 중 짝수번째 위치한 엘리먼트 선택 */
ol li:nth-child(2n) { color: fuchsia; }
/* [:nth-child(2n)] 대신 [:nth-child(even)] 사용 가능 */
ol li:nth-child(even) { color: fuchsia; }
/* [:nth-child(Xn)] : 선택된 다수의 엘리먼트 중 X의 배수번째 위치한 엘리먼트 선택 */
ol li:nth-child(3n) { color: pink; }
input { border: 1px solid black; }
input[type="text"]{ border: 1px solid maroon; }
/* [:not(선택자)] : 선택자의 엘리먼트를 제외한 나머지 엘리먼트 선택 */
input:not([type="text"]) { border: 1px solid orange; }
/* [:disabled] : 선택된 엘리먼트가 비활성화 상태인 경우 */
/* [:checked] : 선택된 엘리먼트(input - radio 또는 checkbox)가 선택된 상태인 경우 */
/* [:selected] : 선택된 엘리먼트(select - option)가 선택된 상태인 경우 */
input[type="text"]:disabled { border: 1px dotted red; }
/* [:focus] : 선택된 엘리먼트(입력태그)에 입혁촛점이 위치한 상태 */
input:focus { border: 3px double green; }
</style>
</head>
<body>
	<h1>선택자(selector)</h1>
	<hr>
	<p>가상선택자 : 태그의 상태에 따라 다른 스타일을 적용하기 위해 사영</p>
	<div>
		<a href="https://www.daum.net">다음</a>&nbsp;&nbsp;&nbsp;
		<a href="https://www.naver.com">네이버</a>&nbsp;&nbsp;&nbsp;
		<a href="https://www.google.com">구글</a>&nbsp;&nbsp;&nbsp;
	</div>
	<hr>
	<ul>
		<li>홍길동</li>
		<li>임꺽정</li>
		<li>전우치</li>
		<li>일지매</li>
		<li>장길산</li>
	</ul>
	<hr>
	<ol>
		<li>홍길동</li>
		<li>임꺽정</li>
		<li>전우치</li>
		<li>일지매</li>
		<li>장길산</li>
	</ol>
	<table>
		<tr>
			<td>아이디</td>
			<td><input type="text" name="id" value="abc123"></td>
		</tr>
		<tr>
			<td>비밀번호</td>
			<td><input type="password" name="passwd"></td>
		</tr>
		<tr>
			<td>이름</td>
			<td><input type="text" name="name" value="홍길동" disabled="disabled"></td>
		</tr>
		<tr>
			<td>이메일</td>
			<td><input type="email" name="email"></td>
		</tr>
	</table>
</body>
</html>

profile
임승현
이전 포스트

[CSS 1-1] CSS 기본

다음 포스트

[CSS 2-1] 글꼴 관련 스타일 속성

0개의 댓글