CSS의 특수 문자 및 함수
이 글은 CSS의 특수 문자와 함수에 대해 설명합니다.
CSS에서 calc() 및 var() 같은 특수 문자와 함수에 대해 배울 수 있습니다.
YouTube Video
미리보기를 위한 HTML
css-escape-and-function.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-escape-and-function.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Special Characters & Functions</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Special Characters</h2></header>
19 <article>
20 <h3>CSS Special Characters</h3>
21 <section>
22 <header><h4>CSS</h4></header>
23<pre class="sample">
24#my\#id {
25 color: red;
26}
27
28#my\.id {
29 color: red;
30}
31
32#my\[id\] {
33 color: red;
34}
35</pre>
36 <header><h4>HTML</h4></header>
37<pre>
38<div id="my.id">Dot Example</div>
39<div id="my[id]">Bracket Example</div>
40<div id="my#id">Sharp Example</div>
41</pre>
42 <header><h4>HTML+CSS</h4></header>
43 <section class="sample-view">
44 <div id="my#id">Sharp Example</div>
45 <div id="my.id">Dot Example</div>
46 <div id="my[id]">Bracket Example</div>
47 </section>
48 </section>
49 </article>
50 <article>
51 <h3>CSS Special Characters</h3>
52 <section>
53 <header><h4>CSS</h4></header>
54<pre class="sample">
55.\31 23abc {
56 font-weight: bold;
57 color: blue;
58}
59</pre>
60 <header><h4>HTML</h4></header>
61<pre>
62<div class="123abc">Numeric Class</div>
63</pre>
64 <header><h4>HTML+CSS</h4></header>
65 <section class="sample-view">
66 <div class="123abc">Numeric Class</div>
67 </section>
68 </section>
69 </article>
70 <article>
71 <h3>CSS Special Characters</h3>
72 <section>
73 <header><h4>CSS</h4></header>
74<pre class="sample">
75.content-unicode::before {
76 content: "\00A9"; /* copyright mark */
77 color: blue;
78}
79
80.content-backslash::after {
81 content: " : \\";
82 color: blue;
83}
84</pre>
85 <header><h4>HTML</h4></header>
86<pre>
87<div class="content-unicode">Copyright</div>
88<div class="content-backslash">This is a backslash example</div>
89</pre>
90 <header><h4>HTML+CSS</h4></header>
91 <section class="sample-view">
92 <div class="content-unicode">Copyright</div>
93 <div class="content-backslash">This is a backslash example</div>
94 </section>
95 </section>
96 </article>
97 <article>
98 <h3>CSS Special Characters</h3>
99 <section>
100 <header><h4>CSS</h4></header>
101<pre class="sample">
102.user\@name {
103 color: green;
104}
105
106#section\$ {
107 font-size: 24px;
108 color: blue;
109}
110</pre>
111 <header><h4>HTML</h4></header>
112<pre>
113<div class="user@name">User</div>
114<div id="section$">Section</div>
115</pre>
116 <header><h4>HTML+CSS</h4></header>
117 <section class="sample-view">
118 <div class="user@name">User</div>
119 <div id="section$">Section</div>
120 </section>
121 </section>
122 </article>
123 </main>
124
125 <main>
126 <header><h2>CSS Functions</h2></header>
127 <article>
128 <h3>calc()</h3>
129 <section>
130 <header><h4>CSS</h4></header>
131<pre class="sample">
132p.calc-width {
133 width: calc(50% - 10px);
134}
135</pre>
136 <header><h4>HTML</h4></header>
137<pre>
138<p class="calc-width">
139 <span>First Text</span>
140</p>
141</pre>
142 <header><h4>HTML+CSS</h4></header>
143 <section class="sample-view">
144 <p class="calc-width">
145 <span>First Text</span>
146 </p>
147 </section>
148 </section>
149 </article>
150 <article>
151 <h3>rgb() / rgba()</h3>
152 <section>
153 <header><h4>CSS</h4></header>
154<pre class="sample">
155p.rgb {
156 background-color: rgb(255, 0, 0);
157}
158
159p.rgb span {
160 background-color: rgba(0, 255, 0, 0.5);
161}
162</pre>
163 <header><h4>HTML</h4></header>
164<pre>
165<p class="rgb">
166 <span>First Text</span>
167</p>
168</pre>
169 <header><h4>HTML+CSS</h4></header>
170 <section class="sample-view">
171 <p class="rgb">
172 <span>First Text</span>
173 </p>
174 </section>
175 </section>
176 </article>
177 <article>
178 <h3>hsl() / hsla()</h3>
179 <section>
180 <header><h4>CSS</h4></header>
181<pre class="sample">
182p.hsl {
183 /* Specify hue, saturation, and lightness */
184 background-color: hsl(240, 25%, 50%);
185}
186
187p.hsl span {
188 /* Specification with transparency */
189 background-color: hsla(120, 100%, 50%, 0.5);
190}
191</pre>
192 <header><h4>HTML</h4></header>
193<pre>
194<p class="hsl">
195 <span>First Text</span>
196</p>
197</pre>
198 <header><h4>HTML+CSS</h4></header>
199 <section class="sample-view">
200 <p class="hsl">
201 <span>First Text</span>
202 </p>
203 </section>
204 </section>
205 </article>
206 <article>
207 <h3>url()</h3>
208 <section>
209 <header><h4>CSS</h4></header>
210<pre class="sample">
211div.bg-image {
212 background-image: url('image.jpg');
213}
214</pre>
215 <header><h4>HTML</h4></header>
216<pre>
217<div class="bg-image">
218 <span>First Text</span>
219</div>
220</pre>
221 <header><h4>HTML+CSS</h4></header>
222 <section class="sample-view">
223 <div class="bg-image">
224 <span>First Text</span>
225 </div>
226 </section>
227 </section>
228 </article>
229 <article>
230 <h3>var()</h3>
231 <section>
232 <header><h4>CSS</h4></header>
233<pre class="sample">
234/* Definition of custom properties */
235:root {
236 --main-color: #3498db;
237}
238
239/* Use of custom properties */
240p.main-color {
241 color: var(--main-color);
242}
243</pre>
244 <header><h4>HTML</h4></header>
245<pre>
246<p class="main-color">
247 <span>First Text</span>
248</p>
249</pre>
250 <header><h4>HTML+CSS</h4></header>
251 <section class="sample-view">
252 <p class="main-color">
253 <span>First Text</span>
254 </p>
255 </section>
256 </section>
257 </article>
258 <article>
259 <h3>attr()</h3>
260 <section>
261 <header><h4>CSS</h4></header>
262<pre class="sample">
263/* Example of using the attr() function */
264a::after {
265 content: " (" attr(title) ")";
266}
267</pre>
268 <header><h4>HTML</h4></header>
269<pre>
270<a href="#section1" title="Section 1">Click here</a>
271</pre>
272 <header><h4>HTML+CSS</h4></header>
273 <section class="sample-view">
274 <a href="#section1" title="Section 1">Click here</a>
275 </section>
276 </section>
277 </article>
278 <article>
279 <h3>min() / max() / clamp()</h3>
280 <section>
281 <header><h4>CSS</h4></header>
282<pre class="sample">
283div.min {
284 /* Use the smaller value between 100% and 500px as the width */
285 width: min(100%, 500px);
286}
287div.max {
288 /* Use the larger value between 100% and 500px as the width */
289 width: max(100%, 500px);
290}
291div.clamp {
292 /* Adjust to fit within the range of 300px to 600px */
293 width: clamp(100px, 30%, 400px);
294}
295</pre>
296 <header><h4>HTML</h4></header>
297<pre>
298<div class="min">min(100%, 500px)</div>
299<div class="max">max(100%, 500px)</div>
300<div class="clamp">clamp(100px, 30%, 400px)</div>
301</pre>
302 <header><h4>HTML+CSS</h4></header>
303 <section class="sample-view">
304 <div class="min">min(100%, 500px)</div>
305 <div class="max">max(100%, 500px)</div>
306 <div class="clamp">clamp(100px, 30%, 400px)</div>
307 </section>
308 </section>
309 </article>
310 <article>
311 <h3>repeat()</h3>
312 <section>
313 <header><h4>CSS</h4></header>
314<pre class="sample">
315/* Set three columns to be evenly spaced */
316grid-template-columns: repeat(3, 1fr);
317</pre>
318 </section>
319 </article>
320 <article>
321 <h3>linear-gradient() / radial-gradient() / conic-gradient()</h3>
322 <section>
323 <header><h4>CSS</h4></header>
324<pre class="sample">
325div.linear-gradient {
326 /* Linear gradient */
327 background: linear-gradient(to right, red, blue);
328}
329div.radial-gradient {
330 /* Radial gradient */
331 background: radial-gradient(circle, red, blue);
332}
333div.conic-gradient {
334 /* Conic gradient */
335 background: conic-gradient(from 0deg, red, yellow, blue, red);
336}
337</pre>
338 <header><h4>HTML</h4></header>
339<pre>
340<div class="linear-gradient">linear-gradient</div>
341<div class="radial-gradient">radial-gradient</div>
342<div class="conic-gradient">radial-gradient</div>
343</pre>
344 <header><h4>HTML+CSS</h4></header>
345 <section class="sample-view">
346 <div class="linear-gradient">linear-gradient</div>
347 <div class="radial-gradient">radial-gradient</div>
348 <div class="conic-gradient">conic-gradient</div>
349 </section>
350 </section>
351 </article>
352 </main>
353</body>
354</html>CSS의 특수 문자와 이스케이프 처리
CSS 이스케이프 문자는 특정 문자를 안전하게 처리하기 위한 기술입니다. 구문적으로 의미를 가지는 특수 기호나 문자를 이스케이프 처리하면 셀렉터나 문자열 내에서 안전하게 사용할 수 있습니다.
CSS 이스케이프 문자 개요
CSS 이스케이프는 특정 문자나 유니코드를 특정 구문 규칙을 따르는 셀렉터에서 사용할 수 있도록 이스케이프 처리하는 메커니즘입니다. 예를 들어 HTML 요소 ID나 클래스 이름에 특수 기호(#, @, . 등)가 포함되거나, 숫자로 시작하는 클래스 이름이나 ID를 다룰 때 이스케이프 문자가 유용합니다.
이스케이프는 주로 다음 목적을 위해 사용됩니다:
- 특수 문자를 선택자로 사용하기
- 숫자로 시작하는 ID나 클래스 이름 처리하기
- 특수 기호나 비 ASCII 문자 이스케이프 처리하기
기본 이스케이프 문법
이스케이프 문자는 CSS에서 백슬래시(\)를 사용하여 작성됩니다. 이스케이프 처리할 문자 앞에 백슬래시를 추가하면, 해당 문자는 일반 문자로 해석됩니다.
특수 문자 이스케이프 처리
1<div id="my#id">Sharp Example</div>
2<div id="my.id">Dot Example</div>
3<div id="my[id]">Bracket Example</div> 1#my\#id {
2 color: red;
3}
4
5#my\.id {
6 color: red;
7}
8
9#my\[id\] {
10 color: red;
11}- 다음 예시와 같이 특수 문자를 CSS 셀렉터에서 사용할 때는 이스케이프 처리가 필요합니다.
#,.,[,]는 CSS에서 특수 문자입니다. 이 문자가 ID에 포함되어 있다면 이스케이프 처리가 필요합니다.
숫자로 시작하는 ID 또는 클래스 이름 이스케이프 처리
1<div class="123abc">Numeric Class</div>1.\31 23abc {
2 font-weight: bold;
3 color: blue;
4}- CSS에서 ID 또는 클래스 이름이 숫자로 시작할 경우 직접 작성하면 유효하지 않습니다. 이러한 경우에는 이스케이프를 사용하세요.
- 여기서는
123abc에서 앞에 있는1을 이스케이프 처리합니다.1은 유니코드U+0031로 표현되며, 백슬래시와 공백을 사용해\31로 이스케이프 처리됩니다.
유니코드 문자 이스케이프 처리
1/* Example: Escaping Unicode characters */
2.content-unicode::before {
3 content: "\00A9"; /* copyright symbol */
4 color: blue;
5}- 유니코드 문자를 이스케이프 처리할 때는 백슬래시 뒤에 6자리 16진수를 지정하세요.
- 이 코드는 CSS에서 © (저작권 기호)를 표시하는 방법을 보여줍니다.
문자열 내부에서 이스케이프
1.content-backslash::after {
2 content: " : \\";
3 color: blue;
4}- CSS의 문자열(
content속성과 같은) 내에서 백슬래시를 사용할 때는 반드시 이중 백슬래시를 사용해야 합니다. - 이 예제에서 문자열 내의 백슬래시를 표시하기 위해
\\가 작성되었습니다.
실용 예: 특수 문자가 포함된 HTML 요소 스타일링
1<div class="user@name">User</div>
2<div id="section$">Section</div> 1/* When the class name contains special characters */
2.user\@name {
3 color: green;
4}
5
6/* When the ID contains special characters */
7#section\$ {
8 font-size: 24px;
9 color: blue;
10}- 여기에서는 특수 문자
@및$가 포함된 요소를 이스케이프 처리하고 있습니다.
요약
CSS 이스케이프 문자는 특수한 경우 셀렉터와 문자열을 올바르게 처리하는 데 매우 유용합니다. 이스케이프가 필요한 상황을 이해하면 복잡한 HTML 요소를 스타일링할 때 오류를 방지할 수 있습니다. 특히 특수 문자 또는 숫자로 시작하는 클래스 이름이나 ID를 다룰 때는 백슬래시로 이스케이프 처리하는 것이 필수적입니다.
CSS의 함수
CSS에서는 스타일을 동적으로 지정하거나 계산하기 위해 함수를 사용할 수 있습니다. 여기에서는 일반적인 CSS 함수 몇 가지를 소개합니다.
calc()
1p.calc-width {
2 /* Specify the value obtained by subtracting 10px from 50% width */
3 width: calc(50% - 10px);
4 background-color: #eee;
5}calc()함수는 요소의 너비와 높이와 같은 값을 동적으로 계산하는 데 사용됩니다. 레이아웃에서 상대값(%), 절대값(px)을 결합하기 위해+,-,*,/연산자를 사용할 수 있습니다.
rgb() / rgba()
1p.rgb {
2 /* Color specification for red, green, and blue */
3 background-color: rgb(255, 0, 0);
4}
5
6p.rgb span {
7 /* Color specification with transparency */
8 background-color: rgba(0, 255, 0, 0.5);
9}rgb()및rgba()함수는 색상을 지정하는 데 사용됩니다.rgb()는 빨강, 초록, 파랑의 세 가지 값을 지정하며 (0에서 255 사이),rgba()는 여기에 투명도를 나타내는 알파 값을 추가로 포함합니다.
hsl() / hsla()
1p.hsl {
2 /* Specify hue, saturation, and lightness */
3 background-color: hsl(240, 25%, 50%);
4}
5
6p.hsl span {
7 /* Specification with transparency */
8 background-color: hsla(120, 100%, 50%, 0.5);
9}hsl()과hsla()는 색상, 채도, 명도를 사용해 색상을 지정합니다.hsla()는 또한 투명도를 지정할 수 있습니다.
url()
1div.bg-image {
2 background-image: url('image.jpg');
3}url()함수는 배경 이미지나 기타 리소스의 경로를 지정하는 데 사용됩니다.
var()
1/* Definition of custom properties */
2:root {
3 --main-color: #3498db;
4}
5
6/* Use of custom properties */
7p.main-color {
8 color: var(--main-color);
9}var()함수는 사용자 정의 속성(CSS 변수)을 다루기 위해 사용됩니다. CSS 변수를 정의하고 이를 다른 속성에서 사용할 수 있습니다.
attr()
1/* Example of using the attr() function */
2a::after {
3 content: " (" attr(title) ")";
4}attr()함수는 HTML 속성 값을 CSS 스타일에서 활용하기 위해 사용됩니다. 주로 가상 요소의content속성 내에서 사용되어 요소의 속성 값을 동적으로 표시합니다. 하지만 브라우저 지원이 제한적이기 때문에 주의가 필요합니다.
min() / max() / clamp()
1div.min {
2 /* Use the smaller value between 100% and 500px as the width */
3 width: min(100%, 500px);
4 background-color: lightsteelblue;
5}
6div.max {
7 /* Use the larger value between 100% and 500px as the width */
8 width: max(100%, 500px);
9 background-color: lightsteelblue;
10}
11div.clamp {
12 /* Adjust to fit within the range of 100px to 400px */
13 width: clamp(100px, 30%, 400px);
14 background-color: lightsteelblue;
15}이 함수들은 값들을 동적으로 결정하는 데 사용됩니다.
min()은 값 세트 중에서 가장 작은 값을 선택합니다.max()는 값 세트 중에서 가장 큰 값을 선택합니다.clamp()는 최소값, 추천값, 최대값 범위 내에서 값을 조정합니다.
repeat()
1/* Set three columns to be evenly spaced */
2grid-template-columns: repeat(3, 1fr);repeat() 함수는 grid-template-columns 및 grid-template-rows와 함께 반복 패턴을 생성하는 데 사용됩니다.
linear-gradient() / radial-gradient()
1div.linear-gradient {
2 /* Linear gradient */
3 background: linear-gradient(to right, red, blue);
4}
5div.radial-gradient {
6 /* Radial gradient */
7 background: radial-gradient(circle, red, blue);
8}
9div.conic-gradient {
10 /* Conic gradient */
11 background: conic-gradient(from 0deg, red, yellow, blue, red);
12}- 이 함수들은 그라디언트를 만드는 데 사용됩니다.
linear-gradient는 선형 그라디언트를 만듭니다.radial-gradient는 방사형 그라디언트를 만듭니다.circle대신eclipse를 지정하여 타원형 그라디언트를 만들 수 있습니다.conic-gradient는 원 중심을 기준으로 각도에 따라 색상이 변경되는 그라디언트를 만듭니다.
요약
CSS 함수는 유연한 레이아웃과 스타일을 설정하는 데 매우 유용합니다. 이 함수들을 효과적으로 사용하면 더욱 동적이고 반응적인 디자인을 구현할 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.