선택자

Song Chae Won·2022년 5월 22일
0

웹 UI 개발

목록 보기
6/19
post-thumbnail

요소 선택자

선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고도 합니다.

h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }
h4 { color: yellow; }
h5 { color: yellow; }
h6 { color: yellow; }

요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어갑니다. 문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용됩니다.

그룹화

선택자는 쉼표를 이용해서 그룹화를 할 수 있습니다.

h1, h2, h3, h4, h5, h6 { color: yellow; }

위 코드는 요소 선택자의 예제 코드와 같은 코드입니다.
그리고 전체 선택자 라고 불리는 간단한 선택자도 있습니다.

  • { color: yellow; }
    *(별표, asterisk) 기호로 문서 내에 모든 요소를 선택할 수 있습니다.

이렇게 선언하면, 한 번의 선언만으로 문서 내에 모든 요소에 스타일 규칙이 적용됩니다. 전체 선택자는 매우 편리하지만, 성능에 좋지 않으므로 될 수 있으면 사용을 지양합니다. 선택자뿐만 아니라 선언들도 그룹화가 가능합니다.

h1 { color: yellow; font-size: 2em; background-color: gray; }

그리고 마지막으로 선택자와 선언이 동시에 그룹화도 가능합니다.

h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }

코드실습

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css</title>
	<style>
		h1 { color: yellow; font-size: 2em; background-color: gray; }
	</style>
</head>
<body>
	<h1>Hello, CSS</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa debitis facere fuga laboriosam placeat provident, quibusdam quidem quo sapiente totam?</p>
</body>
</html>

class 선택자

요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법은 class 선택자를 활용하는 것입니다. class 선택자를 사용하기 위해서는 HTML을 수정해 class 속성을 추가해야 합니다. class 속성은 글로벌 속성이므로 어느 태그에서도 사용할 수 있습니다. class 속성에 값을 넣게 되면, class 선택자를 이용해서 해당 요소에 스타일 규칙을 적용할 수 있습니다.

.foo { font-size: 30px; }
<p class="foo"> ... </p>

위 코드처럼

의 class 속성의 값으로 "foo"라는 값을 넣었다면, CSS에서 그 값("foo")을 선택자로 지정하면 됩니다. 클래스 선택자를 쓸 때는, 맨 앞에 .(마침표)를 찍어주셔야 합니다. 이렇게 되면 어느 요소든지 class 속성값이 "foo"로 선언된 요소가 있다면 해당 스타일 규칙을 적용받게 됩니다.

id 선택자

id 선택자는 class 선택자와 비슷합니다. 선택자를 쓸 때는, .(마침표) 기호 대신 #(해시) 기호를 써주시면 되고, 요소에는 class 속성 대신 id 속성만 써주면 됩니다.

#bar { background-color: yellow; }
<p id="bar"> ... </p>

<p>는 id 선택자의 스타일 규칙이 적용됩니다.

class 선택자와의 차이점

  • .기호가 아닌 #기호 사용
  • 태그의 class 속성이 아닌 id 속성을 참조
  • 문서 내에 유일한 요소에 사용
  • 구체성
  • 가장 큰 차이점은 class와 달리 id는 문서 내에서 유일해야 한다는 점

클래스 선택자는 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용 할 수 있었습니다. 그리고 그것이 클래스 선택자의 장점이기도 합니다. 하지만 id 속성값은 문서 내에 유일하게 사용이 되어야 합니다. 결국, id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐입니다. 그리고 마지막으로 구체성의 값이 다릅니다.

코드실습

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css</title>
	<style>
		.item { background: gray; }
		.a { color: yellow; }
		.b { color: blue; }
		#special { color: red; }
	</style>
</head>
<body>
	<ul>
		<li class="item a">first</a>
		<li class="item b">second</a>
		<li class="item" id="special">third</a>
	</ul>
</body>
</html>

선택자의 조합

/* 요소와 class의 조합 */
p.bar { ... }
/* 다중 class */
.foo.bar { ... }

/* id와 class의 조합 */
#foo.bar { ... }

첫 번째는 요소와 클래스를 조합한 경우입니다. 이 경우에는 <p>이면서 class 속성에 bar가 있어야 적용됩니다.

두 번째는 다중 클래스의 경우입니다. 이 경우에는 class 속성에 foo와 bar가 모두 있어야 적용됩니다.

마지막은 id와 class를 조합한 경우입니다. 이 경우에는 id가 foo이며 class가 bar인 요소에 적용됩니다.

속성 선택자

단순 속성으로 선택

p[class] { color: silver; }
p[class][id] { text-decoration: underline; }
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어갑니다. 요소에 해당 이름의 속성이 있다면 해당 사항이 적용됩니다.

위 CSS 코드는 요소 선택자와의 조합으로 이루어진 코드입니다.
첫 번째는 <p>이면서 class 속성이 있는 요소이면 color: silver 규칙이 적용됩니다.
두 번째는 <p>이면서 class 속성과 id 속성이 함께 있어야 text-decoration: underline 규칙이 적용됩니다.

바로 위 HTML 코드에는 3개의 <p>가 있습니다. 그렇다면 이 3개의 <p>에는 각자 어떤 스타일이 적용될까요?

p[class] 선택자의 규칙은 class 속성만 존재하면 적용이 되기 때문에 3가지 요소 모두에 적용됩니다.

p[class][id] 선택자의 규칙은 class 속성과 id 속성 모두 있는 요소만 해당하기 때문에 마지막 요소에만 적용됩니다.

두 규칙 모두 속성의 값은 상관하지 않습니다.

정확한 속성값으로 선택

정확한 속성값으로 선택은 제목 그대로 속성의 값으로 요소를 선택합니다. 선택자는 대괄호 안에 속성 이름과 속성값을 다 적으면 됩니다.

p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }
p[class="foo"]는 <p>이면서 class 속성의 값이 foo이면 적용되고, 	p[id="title"]는 <p> 이면서 id 속성의 값이 title이면 적용됩니다.

부분 속성값으로 선택

부분 속성값으로 선택은 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 조금 다릅니다.

[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택


<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
p[class~="color"] { font-style: italic; }
p[class^="color"] { font-style: italic; }
p[class$="color"] { font-style: italic; }
p[class*="color"] { font-style: italic; }

위의 코드에서는 모두 class 속성값으로 "color"를 선택합니다. 요소 순서대로 기호에 따라 규칙이 적용되는 결과는 다음과 같습니다.

p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

코드실습

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>css</title>
	<style>
		p[class$="color"] { font-style: italic; }
	</style>
</head>
<body>
	<p class="color hot">red</p>
	<p class="cool color">blue</p>
	<p class="colorful nature">rainbow</p>
</body>
</html>
profile
@chhaewxn

0개의 댓글