CSS 기본
이 글은 CSS의 기초를 설명합니다.
CSS 선택자, 결합자 및 특이성에 대해 배울 수 있습니다.
YouTube Video
미리보기를 위한 HTML/CSS
css-base.css
1body {
2 font-family: Arial, sans-serif;
3 line-height: 1.6;
4 margin: 20px 20px 600px 20px;
5 background-color: #f4f4f9;
6 color: #333;
7}
8
9header h1 {
10 font-size: 24px;
11 color: #333;
12 text-align: center;
13 margin-bottom: 20px;
14}
15
16h2, h3 {
17 color: #555;
18}
19
20h2 {
21 font-size: 20px;
22 border-bottom: 2px solid #ccc;
23 padding-bottom: 5px;
24}
25
26h3 {
27 font-size: 18px;
28 margin-top: 20px;
29 padding-left: 10px;
30 border-left: 2px solid #ccc;
31}
32
33h4 {
34 margin: 0;
35 margin-left: 10px;
36 font-size: 14px;
37}
38
39article section p {
40 margin-left: 40px;
41}
42
43p, pre {
44 margin: 10px 0;
45 padding: 0;
46}
47
48ul, ol, dl, menu {
49 margin: 0;
50}
51
52pre {
53 background-color: #f0f0f0;
54 border-left: 4px solid #ccc;
55 padding: 10px;
56 overflow-x: auto;
57}
58
59.sample-view {
60 border: 1px solid #eee;
61 border-left: 4px solid #eee;
62 padding: 10px;
63 overflow-x: auto;
64}
65
66p.sample, .sample {
67 background-color: #e7f4e9;
68 padding: 10px;
69 border-left: 4px solid #7bbd82;
70 color: #333;
71}
72
73p.sample-error, .sample-error {
74 background-color: #f4e7e7;
75 padding: 10px;
76 border-left: 4px solid lightcoral;
77 color: #333;
78}
79
80.example {
81 background-color: #e0f0ff;
82 padding: 10px;
83 border-left: 4px solid #4a90e2;
84 color: #333;
85}
86
87p.sample-warn, .sample-warn {
88 background-color: #f4f1e7;
89 padding: 10px;
90 border-left: 4px solid #bda97b;
91 color: #333;
92}
93
94code {
95 background-color: #f4f4f4;
96 padding: 2px 4px;
97 border-radius: 4px;
98 font-family: monospace;
99}
100
101span {
102 font-weight: bold;
103}
104
105article {
106 background-color: white;
107 padding: 20px;
108 margin-bottom: 10px;
109 border-radius: 8px;
110 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
111}
112
113section {
114 margin-bottom: 20px;
115}
116
117section div {
118 width: 400px;
119 height: 50px;
120 margin: 20px auto;
121 color: white;
122 display: flex;
123 align-items: center;
124 justify-content: center;
125 font-size: 1.2rem;
126 background-color: lightgray;
127 border: 1px solid #ccc;
128}
129
130header h4 {
131 text-align: right;
132 color: #666;
133 font-size: 0.8em;
134 text-decoration: none;
135}
136
137header + pre {
138 margin: 0;
139 margin-top: -20px;
140 padding-top: 14px;
141 font-size: 0.9em;
142}
143
144header + .sample-view {
145 margin: 0;
146 margin-top: -16px;
147}
148
149.sample-view p {
150 margin: 0;
151 padding: 0;
152}css-basics.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 Basics</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-basics.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Basics</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Selectors</h2></header>
19 <article>
20 <h3>Universal Selector : *</h3>
21 <section>
22 <header><h4>CSS</h4></header>
23<pre class="sample">
24* {
25 font-family:'Courier New', Courier, monospace;
26}
27</pre>
28 </section>
29 </article>
30 <article>
31 <h3>Element Selector</h3>
32 <section>
33 <header><h4>CSS</h4></header>
34<pre class="sample">
35strong {
36 color: red;
37}
38</pre>
39 <header><h4>HTML</h4></header>
40 <pre>This is <strong>sample</strong> text.</pre>
41 <header><h4>HTML+CSS</h4></header>
42 <section class="sample-view">
43 This is <strong>sample</strong> text.
44 </section>
45 </section>
46 </article>
47 <article>
48 <h3>ID Selector : #</h3>
49 <section>
50 <header><h4>CSS</h4></header>
51<pre class="sample">
52#example1 {
53 color: steelblue;
54}
55</pre>
56 <header><h4>HTML</h4></header>
57 <pre><span id="example1">This is sample text.</span></pre>
58 <header><h4>HTML+CSS</h4></header>
59 <section class="sample-view">
60 <span id="example1">This is sample text.</span>
61 </section>
62 </section>
63 </article>
64 <article>
65 <h3>Class Selector : .</h3>
66 <section>
67 <header><h4>CSS</h4></header>
68<pre class="sample">
69.example1 {
70 background-color: yellow;
71 font-weight: bold;
72}
73</pre>
74 <header><h4>HTML</h4></header>
75 <pre><span class="example1">This is sample text.</span></pre>
76 <header><h4>HTML+CSS</h4></header>
77 <section class="sample-view">
78 <section>
79 <span class="example1">This is sample text.</span>
80 </section>
81 </section>
82 </article>
83 <article>
84 <h3>Attribute Selector : [property=value]</h3>
85 <section>
86 <header><h4>CSS</h4></header>
87<pre class="sample">
88a[href="index.html"] {
89 font-weight: bold;
90}
91</pre>
92 <header><h4>HTML</h4></header>
93<pre>
94<a href="index.html">Home</a><br>
95<a href="about.html">About</a>
96</pre>
97 <header><h4>HTML+CSS</h4></header>
98 <section class="sample-view">
99 <a href="index.html">Home</a><br>
100 <a href="about.html">About</a>
101 </section>
102 </section>
103 </article>
104 <article>
105 <h3>Descendant Combinator</h3>
106 <section>
107 <header><h4>CSS</h4></header>
108<pre class="sample">
109span strong {
110 text-decoration: underline;
111}
112</pre>
113 <header><h4>HTML</h4></header>
114 <pre><span>This is <strong>sample</strong> text.</span></pre>
115 <header><h4>HTML+CSS</h4></header>
116 <section class="sample-view">
117 <span>This is <strong>sample</strong> text.</span>
118 </section>
119 </section>
120 </article>
121 <article>
122 <h3>Child Combinator : ></h3>
123 <section>
124 <header><h4>CSS</h4></header>
125<pre class="sample">
126span > em {
127 color: blue;
128}
129</pre>
130 <header><h4>HTML</h4></header>
131<pre>
132This is <em>sample</em> text.<br>
133<span>This is <em>another</em> text.</span><br>
134<span>This text is not <s><em>blue</em></s> in color.</span>
135</pre>
136 <header><h4>HTML+CSS</h4></header>
137 <section class="sample-view">
138 This is <em>sample</em> text.<br>
139 <span>This is <em>another</em> text.</span><br>
140 <span>This text is not <s><em>blue</em></s> in color.</span>
141 </section>
142 </section>
143 </article>
144 <article>
145 <h3> Next Sibling combinator : +</h3>
146 <section>
147 <header><h4>CSS</h4></header>
148<pre class="sample">
149br + b {
150 color: green;
151}
152</pre>
153 <header><h4>HTML</h4></header>
154<pre>
155<span>
156 This is <b>first text</b>.<br>
157 This is <b>second text</b>.<br>
158 <i>This</i> is <b>third text</b>.<br>
159</span>
160</pre>
161 <header><h4>HTML+CSS</h4></header>
162 <section class="sample-view">
163 <span>
164 This is <b>first text</b>.<br>
165 This is <b>second text</b>.<br>
166 <i>This</i> is <b>third text</b>.<br>
167 </span>
168 </section>
169 </section>
170 </article>
171 <article>
172 <h3>Subsequent Sibling Combinator : ~</h3>
173 <section>
174 <header><h4>CSS</h4></header>
175<pre class="sample">
176br ~ b {
177 color: steelblue;
178}
179</pre>
180 <header><h4>HTML</h4></header>
181<pre>
182<span>
183 This is <b>first text</b>.<br>
184 This is <b>second text</b>.<br>
185 <i>This</i> is <b>third text</b>.<br>
186</span>
187</pre>
188 <header><h4>HTML+CSS</h4></header>
189 <section class="sample-view">
190 <span>
191 This is <b>first text</b>.<br>
192 This is <b>second text</b>.<br>
193 <i>This</i> is <b>third text</b>.<br>
194 </span>
195 </section>
196 </section>
197 </article>
198 <article>
199 <h3>Pseudo Class ":" </h3>
200 <section>
201 <header><h4>CSS</h4></header>
202<pre class="sample">
203a:hover {
204 background-color: lightskyblue;
205}
206</pre>
207 <header><h4>HTML</h4></header>
208<pre>
209 <a href="#">Click here</a><br>
210</pre>
211 <header><h4>HTML+CSS</h4></header>
212 <section class="sample-view">
213 <a href="#">Click here</a><br>
214 </section>
215 </section>
216 </article>
217 <article>
218 <h3>Pseudo Element "::" </h3>
219 <section>
220 <header><h4>CSS</h4></header>
221<pre class="sample">
222u::before {
223 content: " ** ";
224 color: red;
225 font-weight: bold;
226}
227</pre>
228 <header><h4>HTML</h4></header>
229<pre>
230 <u>Sample Text</u>
231</pre>
232 <header><h4>HTML+CSS</h4></header>
233 <section class="sample-view">
234 <u>Sample Text</u>
235 </section>
236 </section>
237 </article>
238 </main>
239
240 <main>
241 <header><h2>Inheritance & Priority of CSS</h2></header>
242 <article>
243 <h3>CSS Specificity Rule</h3>
244 <section>
245 <header><h4>CSS Specificity</h4></header>
246 <section class="example">
247 <ol>
248 <li><b>Inline Styles</b>: Styles written directly within the HTML element.</li>
249 <li><b>ID Selectors</b>: e.g., <code>#id</code></li>
250 <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: e.g., <code>.class</code>, <code>[attribute=value]</code>, <code>:hover</code>, etc.</li>
251 <li><b>Element Selectors</b>: e.g., <code>div</code>, <code>h1</code>, <code>p</code>, etc.</li>
252 <li><b>Universal Selector</b>: <code>*</code></li>
253 </ol>
254 </section>
255
256 <header><h4>How Specificity is Calculated</h4></header>
257 <section class="example">
258 <ol>
259 <li><b>Inline Styles</b>: Always have the highest specificity and are always applied.</li>
260 <li><b>ID Selectors</b>: Worth 100 points each.</li>
261 <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: Worth 10 points each.</li>
262 <li><b>Element Selectors and Pseudo-elements</b>: Worth 1 point each.</li>
263 </ol>
264 </section>
265 </section>
266 </article>
267 <article>
268 <h3>Example of CSS Specificity Rule</h3>
269 <section>
270 <header><h4>CSS</h4></header>
271<pre class="sample">
272/* ID Selector */
273#header {
274 color: blue;
275}
276
277/* Class Selector */
278.header {
279 color: red;
280}
281
282/* Element Selector */
283h1 {
284 color: green;
285}
286</pre>
287 <header><h4>HTML</h4></header>
288 <pre><h1 id="header" class="header">Example of CSS Specificity Rule</h1></pre>
289 <header><h4>HTML+CSS</h4></header>
290 <section class="sample-view">
291 <h1 id="header" class="header">Example of CSS Specificity Rule</h1>
292 </section>
293 </section>
294 </article>
295 <article>
296 <h3>Using <code>!important</code> in CSS</h3>
297 <section>
298 <header><h4>CSS</h4></header>
299<pre class="sample">
300#important-header {
301 color: blue;
302}
303
304.important-header {
305 color: red !important;
306}
307</pre>
308 <header><h4>HTML</h4></header>
309 <pre><h1 id="important-header" class="important-header">Example of <code>!important</code></h1></pre>
310 <header><h4>HTML+CSS</h4></header>
311 <section class="sample-view">
312 <h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
313 </section>
314 </section>
315 </article>
316 <article>
317 <h3>CSS Inheritance</h3>
318 <section>
319 <header><h4>CSS</h4></header>
320<pre class="sample">
321footer {
322 color: gray;
323}
324
325p {
326 color: black;
327}
328</pre>
329 <header><h4>HTML</h4></header>
330<pre>
331<footer>
332 <p>This paragraph's text will be black.</p>
333 <span>This text will be gray.</span>
334</footer>
335</pre>
336 <header><h4>HTML+CSS</h4></header>
337 <section class="sample-view">
338 <footer>
339 <p>This paragraph's text will be black.</p>
340 <span>This text will be gray.</span>
341 </footer>
342 </section>
343 </section>
344 </article>
345 <article>
346 <h3>Cascading Styles</h3>
347 <section>
348 <header><h4>CSS</h4></header>
349<pre class="sample">
350.text {
351 color: red;
352}
353
354.text {
355 color: blue;
356}
357</pre>
358 <header><h4>HTML</h4></header>
359 <pre><p class="text">This text will be blue.</p></pre>
360 <header><h4>HTML+CSS</h4></header>
361 <section class="sample-view">
362 <p class="text">This text will be blue.</p>
363 </section>
364 </section>
365 </article>
366
367</body>
368</html>기본 구문
1selector {
2 property: value;
3}CSS의 기본 구조는 선택자, 속성, 값으로 구성됩니다. 각 속성과 값의 쌍은 세미콜론으로 끝납니다.
선택자는 스타일이 적용될 HTML 요소를 지정합니다. 이 예에서는 모든<header>요소에 스타일이 적용됩니다.속성은 변경할 스타일 속성을 지정하며, 예를 들어 색상이나 글꼴 크기를 지정합니다. 이 예에서Padding과color는 속성입니다.값은 속성에 할당된 값을 의미합니다. 예를 들어, color는white또는#9cf가 될 수 있으며, margin 크기는20px이 될 수 있습니다.
선택자
CSS 선택자는 HTML 요소를 선택하기 위한 패턴입니다. 선택자를 사용하여 특정 요소나 요소 그룹에 스타일을 적용할 수 있습니다.
범용 선택자
1/* Universal Selector : "*" */
2* {
3 font-family:'Courier New', Courier, monospace;
4}*는 모든 요소에 적용되는 범용 선택자입니다.- 이 예에서는 모든 요소의 글꼴이 변경됩니다.
요소 선택자
1/* Element Selector */
2strong {
3 color: red;
4}- 요소 선택자는 HTML 태그 이름을 작성함으로써 특정 HTML 태그에 적용되는 선택자입니다.
- 이 예에서는
<strong>요소의 글자 색상이 빨간색으로 변경됩니다.
ID 선택자
1/* ID Selector : "#" */
2#example1 {
3 color: steelblue;
4}#는 ID로 요소를 선택하는 데 사용되는 ID 선택자입니다.- ID는 고유하므로 한 페이지에 같은 ID를 가진 요소는 하나만 있을 수 있습니다.
클래스 선택자
1/* Class Selector : "." */
2.example1 {
3 background-color: yellow;
4 font-weight: bold;
5}.는 클래스로 요소를 선택하는 데 사용되는 클래스 선택자입니다.- 해당 클래스에 속하는 요소에 스타일을 적용하려면 HTML 요소에 클래스 속성을 추가하십시오.
속성 선택자
1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3 font-weight: bold;
4}[href="index.html"]은 특정 속성을 가진 요소를 선택하는 속성 선택자입니다.- 이 예제에서는
href속성값이index.html인<a>요소의 텍스트를 굵게 설정합니다.
결합자
결합자는 여러 선택자를 결합하여 특정 관계를 가진 요소를 선택하는 데 사용됩니다. 선택자가 개별 요소를 선택하는 반면, 결합자는 요소 간 구조적 관계를 정의하는 역할을 합니다.
후손 결합자
1/* Descendant Combinator : " " */
2span strong {
3 text-decoration: underline;
4}- 후손 결합자는 특정 요소 내의 모든 지정된 요소에 스타일을 적용합니다.
- 이 예에서는
<span>요소 내의<strong>요소에 밑줄이 적용됩니다.
자식 결합자
1/* Child Combinator : ">" */
2span > em {
3 color: blue;
4}span과em사이의>기호는 자식 결합자로 사용됩니다. 이 예에서는<span>요소의 자식인<em>요소에만 스타일이 적용됩니다. 세 번째 줄 예에서는<span>과<em>태그 사이에<s>태그가 있기 때문에 스타일이 적용되지 않습니다.
인접 형제 결합자
1/* Next Sibling combinator */
2br + b {
3 color: green;
4}+기호를 사용하는 인접 형제 결합자는 특정 요소 바로 뒤에 나타나는 형제 요소에 스타일을 적용합니다.- 이 예에서는
<br>태그 바로 뒤에<b>태그가 나타날 때만 글자 색상이 녹색으로 변경됩니다.
일반 형제 결합자
1/* Subsequent Sibling Combinator */
2br ~ b {
3 color: steelblue;
4}~기호를 사용하는 일반 형제 결합자는 특정 요소 뒤에 나타나는 모든 형제 요소를 선택합니다.- 이 예제에서는
<br>태그 뒤에 나타나는 모든<b>태그의 텍스트 색상이 파란색 계열로 설정됩니다.
의사 클래스
1/* Pseudo Class : ":" */
2a:hover {
3 background-color: lightskyblue;
4}:는 의사 클래스 선택에 사용됩니다.- 의사 클래스에 대한 자세한 내용은 다른 글에서 설명될 것입니다.
가상 요소
1/* Pseudo Element : "::" */
2u::before {
3 content: " ** ";
4 color: red;
5 font-weight: bold;
6}::는 의사 요소 선택에 사용됩니다.- 의사 요소에 대한 자세한 내용도 다른 글에서 설명될 것입니다.
CSS 특이성
CSS에서의 우선순위는 CSS 작동 방식을 이해하고 예상치 못한 스타일 적용을 방지하는 데 매우 중요합니다. CSS 우선순위는 동일한 요소에 여러 CSS 규칙이 적용될 때 어떤 규칙이 더 강력한지를 결정합니다. CSS의 우선순위는 주로 다음 요인들에 의해 결정됩니다.
- 인라인 스타일: HTML 내에 직접 작성된 스타일
- ID 선택자 ：
#id - 클래스, 속성 선택자, 의사 클래스 ：
.class,[attribute=value],:hover, etc - 요소 선택자 ：
div,h1,p, etc - 범용 선택자 ：
*
리스트 위쪽일수록 우선순위가 높고, 아래쪽일수록 우선순위가 낮습니다.
특이성을 계산하는 방법
CSS 우선순위는 각 선택자의 '무게'를 정량화하여 계산됩니다. 각 선택자의 무게는 다음과 같이 나타냅니다.
- 인라인 스타일: 인라인 스타일은 가장 강력하며 항상 우선시됩니다.
- ID 선택자: 하나의 ID 선택자는 '100점'에 해당합니다.
- 클래스, 속성 선택자, 의사 클래스: 이들은 '10점'에 해당합니다.
- 요소 선택자, 의사 요소: 이들은 '1점'에 해당합니다.
가장 높은 점수를 받은 규칙이 적용됩니다.
예제:
1/* ID Selector */
2#header {
3 color: blue;
4}
5
6/* Class Selector */
7.header {
8 color: red;
9}
10
11/* Element Selector */
12h1 {
13 color: green;
14}1<h1 id="header" class="header">Example of CSS Specificity Rule</h1>여기에서 <h1> 태그에는 세 가지 다른 스타일이 적용됩니다:
h1요소 선택자 (1점).header클래스 선택자 (10점)#headerID 선택자 (100점)
이 경우 ID 선택자가 가장 높은 우선순위를 가지므로 color: blue가 적용됩니다.
!important로 우선순위 재정의
일반적인 우선순위를 무시하고 스타일을 강제로 적용하려면 !important를 사용하십시오. !important는 모든 규칙보다 강력한 영향을 미치며, 다른 모든 것을 무시합니다.
예제:
1#important-header {
2 color: blue;
3}
4
5.important-header {
6 color: red !important;
7}1<h1 id="important-header" class="important-header">Example of <code>!important</code></h1>- 여기서
color: red !important;가 지정되어 있으므로color: red가 우선권을 가집니다.
상속 및 우선순위
CSS는 부모 요소로부터 자식 요소로 스타일을 상속할 수 있는 기능을 가지고 있습니다. 예를 들어, color 및 font-family와 같은 속성은 기본적으로 상속됩니다. 그러나 특정 자식 요소에 직접 스타일이 지정된 경우, 직접 적용된 스타일이 상속된 스타일보다 우선합니다.
예제:
1footer {
2 color: gray;
3}
4
5p {
6 color: black;
7}1<footer>
2 <p>This paragraph's text will be black.</p>
3 <span>This text will be gray.</span>
4</footer>- 여기서
footer태그에는color: gray;가 적용되지만,p요소에color: black;이 명시적으로 지정되어 있으므로p요소의 텍스트는 검은색으로 표시됩니다. 한편,span요소는footer로부터color속성을 상속받아 회색으로 표시됩니다.
CSS 캐스케이드 및 우선순위
'계단식 스타일 시트(CSS)'라는 이름이 의미하는 바와 같이, 스타일은 '계단식'으로 적용됩니다. 이는 여러 스타일 시트나 규칙이 있는 경우, 마지막에 정의된 규칙이 우선한다는 것을 의미합니다. 우선순위가 같은 경우, 나중에 작성된 스타일이 적용됩니다.
예제:
1.text {
2 color: red;
3}
4
5.text {
6 color: blue;
7}1<p class="text">This text will be blue.</p>- 여기서는
color: blue;가 나중에 정의되어 텍스트가 파란색으로 표시됩니다.
요약
CSS의 우선순위는 구체성 등의 알고리즘을 사용하여 결정되지만, 여기서는 기본적인 부분만 고려하였습니다.
기본 규칙은 다음과 같습니다:
- 인라인 스타일은 항상 가장 높은 우선순위를 가집니다.
- ID 선택자는 강력하며 클래스와 태그보다 우선합니다.
- 클래스 선택자와 가상 클래스는 중간 수준의 우선순위를 가집니다.
- 태그 선택자와 가상 요소는 가장 낮은 수준의 우선순위를 가집니다.
- !important는 일반적인 우선순위를 덮어쓰고 스타일을 강제로 적용합니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.