CSS에서 속성 선택자의 세부 사항
이 글은 CSS에서 속성 선택자의 세부 사항을 설명합니다.
속성 선택자에 대한 순방향 매칭, 역방향 매칭 및 부분 매칭을 작성하는 방법을 배울 수 있습니다.
YouTube Video
미리보기를 위한 HTML
css-attribute-selector.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Pseudo Class/Element</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-attribute-selector.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Attribute Selectors</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Attribute Selectors</h2></header>
19 <article>
20 <h3>element[attribute]</h3>
21 <section>
22 <header><h4>CSS</h4></header>
23<pre class="sample">
24a[target] {
25 font-weight: bold;
26}
27</pre>
28 <header><h4>HTML</h4></header>
29<pre>
30<a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
31<a href="https://example.com">Example Link (no target)</a>
32</pre>
33 <header><h4>HTML+CSS</h4></header>
34 <section class="sample-view">
35 <a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
36 <a href="https://example.com">Example Link (no target)</a>
37 </section>
38 </section>
39 </article>
40 <article>
41 <h3>element[attribute=value] : =</h3>
42 <section>
43 <header><h4>CSS</h4></header>
44<pre class="sample">
45input[type="text"] {
46 border: 2px solid green;
47}
48</pre>
49 <header><h4>HTML</h4></header>
50<pre>
51<input type="text" placeholder="Enter text here">
52<input type="password" placeholder="Password (no border)">
53<input type="text" placeholder="Another text input">
54</pre>
55 <header><h4>HTML+CSS</h4></header>
56 <section class="sample-view">
57 <input type="text" placeholder="Enter text here">
58 <input type="password" placeholder="Password (no border)">
59 <input type="text" placeholder="Another text input">
60 </section>
61 </section>
62 </article>
63 <article>
64 <h3>element[attribute^=value] : ^=</h3>
65 <section>
66 <header><h4>CSS</h4></header>
67<pre class="sample">
68a[href^="https://"] {
69 font-weight: bold;
70}
71</pre>
72 <header><h4>HTML</h4></header>
73<pre>
74<a href="https://example.com">Secure Link (https)</a>
75<a href="http://example.com">Non-Secure Link (http)</a>
76<a href="https://another-example.com">Another Secure Link (https)</a>
77</pre>
78 <header><h4>HTML+CSS</h4></header>
79 <section class="sample-view">
80 <a href="https://example.com">Secure Link (https)</a>
81 <a href="http://example.com">Non-Secure Link (http)</a>
82 <a href="https://another-example.com">Another Secure Link (https)</a>
83 </section>
84 </section>
85 </article>
86 <article>
87 <h3>element[attribute$=value] : $=</h3>
88 <section>
89 <header><h4>CSS</h4></header>
90<pre class="sample">
91img[src$=".jpg"] {
92 border-radius: 10px;
93}
94</pre>
95 <header><h4>HTML</h4></header>
96<pre>
97<img src="image.jpg" alt="JPG Image" width="100">
98<img src="pattern.png" alt="PNG Image (no border radius)" width="100">
99<img src="example.jpg" alt="Another JPG Image" width="100">
100</pre>
101 <header><h4>HTML+CSS</h4></header>
102 <section class="sample-view">
103 <img src="image.jpg" alt="JPG Image" width="100">
104 <img src="pattern.png" alt="PNG Image (no border radius)" width="100">
105 <img src="example.jpg" alt="Another JPG Image" width="100">
106 </section>
107 </section>
108 </article>
109 <article>
110 <h3>element[attribute*=value] : *=</h3>
111 <section>
112 <header><h4>CSS</h4></header>
113<pre class="sample">
114p[class*="highlight"] {
115 background-color: yellow;
116}
117</pre>
118 <header><h4>HTML</h4></header>
119<pre>
120<p class="highlight-text">This paragraph is highlighted.</p>
121<p class="normal-text">This paragraph is not highlighted.</p>
122<p class="text-highlight-important">This is another highlighted paragraph.</p>
123</pre>
124 <header><h4>HTML+CSS</h4></header>
125 <section class="sample-view">
126 <p class="highlight-text">This paragraph is highlighted.</p>
127 <p class="normal-text">This paragraph is not highlighted.</p>
128 <p class="text-highlight-important">This is another highlighted paragraph.</p>
129 </section>
130 </section>
131 </article>
132 <article>
133 <h3>element[attribute~=value] : ~=</h3>
134 <section>
135 <header><h4>CSS</h4></header>
136<pre class="sample">
137div[class~="featured"] {
138 border: 1px solid red;
139}
140</pre>
141 <header><h4>HTML</h4></header>
142<pre>
143<div class="featured">This div is featured.</div>
144<div class="content featured">This div is also featured.</div>
145<div class="content">This div is not featured.</div>
146</pre>
147 <header><h4>HTML+CSS</h4></header>
148 <section class="sample-view">
149 <div class="featured">This div is featured.</div>
150 <div class="content featured">This div is also featured.</div>
151 <div class="content">This div is not featured.</div>
152 </section>
153 </section>
154 </article>
155 <article>
156 <h3>element[attribute|=value] : |=</h3>
157 <section>
158 <header><h4>CSS</h4></header>
159<pre class="sample">
160p[lang|="en"] {
161 font-style: italic;
162}
163</pre>
164 <header><h4>HTML</h4></header>
165<pre>
166<p lang="en">This paragraph is in English.</p>
167<p lang="en-US">This paragraph is in American English.</p>
168<p lang="fr">Ce paragraphe est en français.</p>
169</pre>
170 <header><h4>HTML+CSS</h4></header>
171 <section class="sample-view">
172 <p lang="en">This paragraph is in English.</p>
173 <p lang="en-US">This paragraph is in American English.</p>
174 <p lang="fr">Ce paragraphe est en français.</p>
175 </section>
176 </section>
177 </article>
178
179 <article>
180 <h3>CSS Attribute Selector Example : input[required] & input[placeholder]</h3>
181 <section>
182 <header><h4>CSS</h4></header>
183<pre class="sample">
184input[required] {
185 background-color: #ffcccc;
186}
187
188input[placeholder] {
189 font-style: italic;
190 color: #999;
191}
192</pre>
193 <header><h4>HTML</h4></header>
194<pre>
195<input type="text" required placeholder="Enter your name">
196<input type="email" required placeholder="Enter your email">
197<input type="text" placeholder="Optional field">
198</pre>
199 <header><h4>HTML+CSS</h4></header>
200 <section class="sample-view">
201 <input type="text" required placeholder="Enter your name">
202 <input type="email" required placeholder="Enter your email">
203 <input type="text" placeholder="Optional field">
204 </section>
205 </section>
206 </article>
207 <article>
208 <h3>CSS Attribute Selector Example : a[href^="https://"]</h3>
209 <section>
210 <header><h4>CSS</h4></header>
211<pre class="sample">
212a[href^="http://"] {
213 color: orange;
214}
215
216a[href^="https://"] {
217 color: green;
218}
219</pre>
220 <header><h4>HTML</h4></header>
221<pre>
222<a href="http://example.com">HTTP Link</a>
223<a href="https://secure.example.com">HTTPS Link</a>
224<a href="/relative/path">Relative Link</a>
225</pre>
226 <header><h4>HTML+CSS</h4></header>
227 <section class="sample-view">
228 <a href="http://example.com">HTTP Link</a>
229 <a href="https://secure.example.com">HTTPS Link</a>
230 <a href="/relative/path">Relative Link</a>
231 </section>
232 </section>
233 </article>
234 <article>
235 <h3>Attribute Selectors</h3>
236 <section>
237 <header><h4>CSS</h4></header>
238<pre class="sample">
239img[src$=".png"] {
240 border: 2px solid blue;
241}
242
243img[src$=".jpg"] {
244 opacity: 0.5;
245}
246</pre>
247 <header><h4>HTML</h4></header>
248<pre>
249<img src="pattern.png" alt="PNG Image" width="100">
250<img src="document.jpg" alt="JPEG Image" width="100">
251</pre>
252 <header><h4>HTML+CSS</h4></header>
253 <section class="sample-view">
254 <img src="pattern.png" alt="PNG Image" width="100">
255 <img src="image.jpg" alt="JPEG Image" width="100">
256 </section>
257 </section>
258 </article>
259
260 </main>
261</body>
262</html>CSS에서 속성 선택자의 세부 사항
CSS 속성 선택자는 특정 속성을 가진 HTML 요소를 선택하는 데 사용됩니다. 이로 인해 속성 값을 기준으로 요소를 스타일링할 수 있습니다. 이제 속성 선택자의 기본부터 고급 사용법까지 단계별로 설명하겠습니다.
속성 선택자의 유형과 문법
속성 선택자에는 다양한 유형이 있습니다. 여기서는 각 유형의 선택자를 자세히 살펴보겠습니다.
속성을 가진 요소 선택하기
1a[target] {
2 font-weight: bold;
3}- 속성 이름을 지정하면 지정된 속성을 가진 모든 요소를 선택할 수 있습니다.
- 이 예에서는
target속성이 있는 모든<a>요소의 텍스트가 굵게 표시됩니다.
특정 속성 값을 가진 요소 선택하기
1input[type="text"] {
2 border: 2px solid green;
3}=을 사용하면 속성 값이 특정 값과 정확히 일치하는 요소를 선택할 수 있습니다.- 이 예시에서는
type속성이"text"로 설정된 모든<input>요소에 초록색 테두리가 적용됩니다.
부분 속성 값 일치로 요소 선택하기
다음 세 가지 선택자를 사용하여 속성 값의 부분 일치를 지정할 수 있습니다.
- 시작 일치 (
^=)
1a[href^="https://"] {
2 font-weight: bold;
3}- 속성 값이 지정된 문자열로 시작하는 요소를 선택합니다.
- 이 예시에서는
href속성이"https://"로 시작하는 모든 링크가 굵게 표시됩니다.
- 끝 일치 (
$=)
1img[src$=".jpg"] {
2 border-radius: 10px;
3}- 속성 값이 지정된 문자열로 끝나는 요소를 선택합니다.
- 이 예에서는
src속성이.jpg로 끝나는 모든 이미지에 모서리를 둥글게 만드는 스타일이 적용됩니다.
- 포함 일치 (
*=)
1p[class*="highlight"] {
2 background-color: yellow;
3}- 속성 값에 지정된 문자열이 포함된 요소를 선택합니다.
- 이 예에서는
class속성에"highlight"가 포함된 모든<p>요소에 노란색 배경이 적용됩니다.
속성 값에 공백으로 구분된 단어가 포함된 요소 선택하기 (~=)
1div[class~="featured"] {
2 border: 1px solid red;
3}~=는 속성 값이 공백으로 구분된 단어들 사이에 특정 단어를 포함하면 요소를 선택합니다.- 이 예에서는
class속성에"featured"단어가 포함된 모든<div>요소에 빨간 테두리가 적용됩니다.
속성 값이 하이픈으로 구분된 값으로 시작하는 요소 선택하기 (|=)
1p[lang|="en"] {
2 font-style: italic;
3}|=는 속성 값이 지정된 문자열과 일치하거나, 해당 문자열 뒤에 하이픈이 오는 경우 요소를 선택합니다. 주로 언어 속성(lang)과 함께 사용됩니다.- 이 예에서는
lang속성이"en"이나"en-US"인 모든<p>요소에 이탤릭이 적용됩니다.
실용적인 예제와 활용
다음으로, 몇 가지 실용적인 시나리오를 살펴보겠습니다.
폼 입력 필드 스타일링
1input[required] {
2 background-color: #ffcccc;
3}
4
5input[placeholder] {
6 font-style: italic;
7 color: #999;
8}- 이 예에서는
required속성을 가진 모든 입력 필드에 붉은색 배경이 적용되고,placeholder속성을 가진 입력 필드의 플레이스홀더 텍스트에 이탤릭과 연한 색이 스타일링됩니다.
링크 프로토콜에 따른 스타일링
1a[href^="http://"] {
2 color: orange;
3}
4
5a[href^="https://"] {
6 color: green;
7}- 여기서는
http://로 시작하는 링크는 주황색으로,https://로 시작하는 링크는 초록색으로 설정됩니다. 이렇게 하면 보안 링크와 비보안 링크를 시각적으로 구분할 수 있습니다.
이미지 형식에 따른 스타일링
1img[src$=".png"] {
2 border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6 opacity: 0.5;
7}- 이 예에서는
.png형식의 이미지에 파란색 테두리가 추가되고,.jpg형식의 이미지는 투명도가 50%로 설정됩니다.
요약
CSS 속성 선택자는 HTML 속성에 기반해 요소를 선택하는 유연하고 강력한 방법입니다. 이 선택자들을 사용함으로써 더욱 구체적인 스타일링이 가능합니다.
이 문서에서 설명한 기본 문법과 응용 예제를 활용하여 보다 고급 스타일링을 쉽게 구현할 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.