CSS documentation index

Found 245 pages:

# Page Tags and summary
1 CSS: Cascading Style Sheets CSS, Design, Landing, Layout, Reference, l10n:priority, ์Šคํƒ€์ผ์‹œํŠธ
Cascading Style Sheets(CSS)๋Š” HTML์ด๋‚˜ XML(SVG, XHTML ๊ฐ™์€ XML ๋ฐฉ์–ธ(dialect) ํฌํ•จ)๋กœ ์ž‘์„ฑ๋œ ๋ฌธ์„œ์˜ ํ‘œํ˜„์„ ๊ธฐ์ˆ ํ•˜๊ธฐ ์œ„ํ•ด ์“ฐ์ด๋Š” ์Šคํƒ€์ผ์‹œํŠธ ์–ธ์–ด์ž…๋‹ˆ๋‹ค.
2 -moz-image-region CSS, CSS Property, CSS:Mozilla Extensions, Non-standard
XUL ์š”์†Œ์™€ ๊ฐ€์ƒ์š”์†Œ๋“ค์— ๋Œ€ํ•˜์—ฌ list-style-image  ์†์„ฑ์„ ์‚ฌ์šฉํ• ๋•Œ ์ด ์†์„ฑ์€ ์ „์ฒด์ด๋ฏธ์ง€์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ถ€๋ถ„์˜ ๋ น์—ญ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.  ์ด๊ฒƒ์€ ์š”์†Œ๋“ค์ด ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ธฐ ์œ„ํ•ด ๊ฐ™์€ ์ด๋ฏธ์ง€์˜ ์„œ๋กœ๋‹ค๋ฅธ ๋ถ€๋ถ„์„ ์‚ฌ์šฉํ• ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค.
3 -webkit-overflow-scrolling CSS, CSS Property, Non-standard, Reference
-webkit-overflow-scrolling CSS ์†์„ฑ์€ ํ•ด๋‹น ์š”์†Œ๊ฐ€ ํ„ฐ์น˜ ๋‹จ๋ง๊ธฐ์—์„œ ๋ชจ๋ฉ˜ํ…€ ๊ธฐ๋ฐ˜ ์Šคํฌ๋กค์˜ ํ™œ์„ฑํ™” ์—ฌ๋ถ€๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
4 ::after (:after)
CSS ::after ๊ฐ€์ƒ ์š”์†Œ(pseudo-element)๋Š” ์„ ํƒ๋œ ์š”์†Œ(element)์˜ ๊ฐ€์ƒ์˜ ์ž๋…€ ์š”์†Œ๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค. ์ด๋Š” ์ฃผ๋กœ ๋ณธ๋ฌธ์— ์ถ”๊ฐ€์ ์ธ ๋‚ด์šฉ์„ ๋ง๋ถ™์ด๋Š” ๊ฒฝ์šฐ์— ๋งŽ์ด ์“ฐ์ด๋Š” content CSS ํ”„๋กœํผํ‹ฐ(property) ์ž…๋‹ˆ๋‹ค. ์ด ์š”์†Œ๋Š” ์ธ๋ผ์ธ(inline)์ด ๊ธฐ๋ณธ๊ฐ’์ž…๋‹ˆ๋‹ค.
5 :active CSS, Layout, Pseudo-class, Reference, Web
:active CSS ์˜์‚ฌ ํด๋ž˜์Šค๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ํ™œ์„ฑํ™”ํ•œ ์š”์†Œ(๋ฒ„ํŠผ ๋“ฑ)๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
6 :first
:first @page CSS pseudo-class ๋Š” ๋ฌธ์„œ๋ฅผ ์ธ์‡„ํ•  ๋•Œ, ์ฒซ๋ฒˆ์งธ ํŽ˜์ด์ง€์˜ ์Šคํƒ€์ผ๋ง์„ ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค.
7 :first-child CSS, Layout, Pseudo-class, Reference, Web
The :first-child CSS pseudo-class represents the first element among a group of sibling elements.
8 :focus-within CSS, Layout, Pseudo-class, Reference, Web
:focus-within CSS pseudo-class ๋Š” focus ๋ฅผ ๋ฐ›๊ฑฐ๋‚˜, focus ๋ฅผ ๋ฐ›์€ element ๋ฅผ ํฌํ•จํ•˜๋Š” element ๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ์ฆ‰, :focus pseudo-class ์— ์˜ํ•ด ์ž์ฒด์ ์œผ๋กœ ์ผ์น˜ํ•˜๊ฑฐ๋‚˜ :focus ์— ์˜ํ•ด ์ผ์น˜๋˜๋Š” ์ž์†์„ ๊ฐ€์ง€๋Š” element ๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. (์ด๊ฒƒ์€ shadow trees ๋‚ด๋ถ€์˜ ์ž์†์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.)
9 :hover CSS, Layout, Pseudo-class, Reference, Web
:hover CSS ์˜์‚ฌ ํด๋ž˜์Šค๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ํฌ์ธํŒ… ์žฅ์น˜๋ฅผ ์‚ฌ์šฉํ•ด ์ƒํ˜ธ์ž‘์šฉ ์ค‘์ธ ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ๋ณดํ†ต ์‚ฌ์šฉ์ž์˜ ์ปค์„œ(๋งˆ์šฐ์Šค ํฌ์ธํ„ฐ)๊ฐ€ ์š”์†Œ ์œ„์— ์˜ฌ๋ผ๊ฐ€ ์žˆ์œผ๋ฉด ์„ ํƒ๋ฉ๋‹ˆ๋‹ค.
10 :link CSS, Layout, Pseudo-class, Reference, Web
:link CSS ์˜์‚ฌ ํด๋ž˜์Šค๋Š” ์•„์ง ๋ฐฉ๋ฌธํ•˜์ง€ ์•Š์€ ์š”์†Œ๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
11 :not() CSS, Layout, Pseudo-class, Reference
๋ถ€์ •(negation) CSS ๊ฐ€์ƒ ํด๋ž˜์Šค :not(X)๋Š” ์ธ์ˆ˜๋กœ ๊ฐ„๋‹จํ•œ ์„ ํƒ์ž(selector) X๋ฅผ ์ทจํ•˜๋Š” ๊ธฐ๋Šฅ ํ‘œ๊ธฐ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ธ์ˆ˜๋กœ ํ‘œ์‹œ๋˜์ง€ ์•Š์€ ์š”์†Œ์™€ ์ผ์น˜ํ•ฉ๋‹ˆ๋‹ค. X๋Š” ๋‹ค๋ฅธ ๋ถ€์ • ์„ ํƒ์ž๋ฅผ ํฌํ•จํ•ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค.
12 :nth-child CSS ์˜์‚ฌ ํด๋ž˜์Šค, ๋ ˆ์ด์•„์›ƒ, ์›น, ์ฐธ๊ณ 
CSS ์˜์‚ฌ ํด๋ž˜์Šค :nth-child(an+b)์€ 0 ์ด์ƒ์˜ n์— ๋Œ€ํ•ด์„œ ๋„ํ๋จผํŠธ ํŠธ๋ฆฌ์—์„œ ์ž๊ธฐ ์•ž์— an+b-1 ๊ฐœ์˜ ํ˜•์ œ๊ฐ€ ์žˆ๋Š” ์—˜๋ฆฌ๋จผํŠธ์™€ ์ผ์น˜ํ•œ๋‹ค. ๋” ๊ฐ„๋‹จํžˆ ๋งํ•˜๋ฉด ์ด ์…€๋ ‰ํ„ฐ๋Š” ์ผ๋ จ์˜ ํ˜•์ œ๋“ค ์ค‘ ์ˆœ์„œ๊ฐ€ an+b ํŒจํ„ด๊ณผ ์ผ์น˜ํ•˜๋Š” ๋ช‡ ๊ฐœ์˜ ์ž์‹ ์—˜๋ฆฌ๋จผํŠธ์™€ ์ผ์น˜ํ•œ๋‹ค. ๋ ˆ๋ฒจ 3 ๊ตฌํ˜„์—์„œ๋Š” ์ผ์น˜ํ•˜๋Š” ์—˜๋ฆฌ๋จผํŠธ์˜ ๋ถ€๋ชจ๊ฐ€ ์žˆ์–ด์•ผ ํ•˜์ง€๋งŒ ๋ ˆ๋ฒจ 4์—์„œ๋Š” ์—†์–ด๋„ ๋œ๋‹ค.
13 :visited CSS, Layout, Pseudo-class, Reference, Web
:visited CSS ์˜์‚ฌ ํด๋ž˜์Šค๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋ฐฉ๋ฌธํ•œ ์ ์ด ์žˆ๋Š” ๋งํฌ๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. :visited๊ฐ€ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋Š” ์Šคํƒ€์ผ์€ ๊ฐœ์ธ์ •๋ณด ๋ณดํ˜ธ๋ฅผ ์œ„ํ•ด ๋งค์šฐ ์ œํ•œ์ ์ž…๋‹ˆ๋‹ค.
14 <angle-percentage> CSS, CSS Data Type, Reference
<angle-percentage> CSS ์ž๋ฃŒํ˜•์€ <angle>๊ณผ <percentage> ๋ชจ๋‘ ๊ฐ€๋Šฅํ•œ ๊ฐ’์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
15 &lt;angle&gt; CSS, CSS Data Type, Layout, Reference, Web
<angle> CSS ์ž๋ฃŒํ˜•์€ ๊ฐ๋„์˜ ๊ฐ’์„ ๋„, ๊ทธ๋ ˆ์ด๋“œ, ๋ผ๋””์•ˆ ๋˜๋Š” ํ„ด์œผ๋กœ ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค. <gradient>๋‚˜ ์ผ๋ถ€ transform ํ•จ์ˆ˜์—์„œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค..
16 &lt;color&gt; CSS, CSS Date Type, Layout, Reference, Web
<color> CSS ์ž๋ฃŒํ˜•์€ sRGB ์ƒ‰ ๊ณต๊ฐ„์˜ ํ•œ ์ƒ‰์„ ํ‘œํ˜„ํ•˜๋ฉฐ, ์ถ”๊ฐ€๋กœ ์•ŒํŒŒ ์ฑ„๋„ ํˆฌ๋ช…๋„ ๊ฐ’๋„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์–ด ์ž์‹ ์ด ๊ฐ€๋ฆฌํ‚ค๋Š” ์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์ด ์–ด๋–ป๊ฒŒ ํ•ฉ์„ฑ๋˜์–ด์•ผ ํ•˜๋Š”์ง€ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
17 &lt;filter-function&gt; CSS, CSS Data Type, Filter Effects, Reference
<filter-function> CSS ์ž๋ฃŒํ˜•์€ ์ž…๋ ฅ ์ด๋ฏธ์ง€์˜ ๋ชจ์Šต์„ ๋ณ€ํ˜•ํ•  ์ˆ˜ ์žˆ๋Š” ๊ทธ๋ž˜ํ”ฝ ํšจ๊ณผ๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
18 blur() CSS, CSS Function, Filter Effects, Reference
blur() CSS ํ•จ์ˆ˜๋Š” ์ฃผ์–ด์ง„ ์ด๋ฏธ์ง€์— ๊ฐ€์šฐ์‹œ์•ˆ ๋ธ”๋Ÿฌ๋ฅผ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค
19 brightness() CSS, CSS Function, Filter Effects, Reference
brightness() CSS ํ•จ์ˆ˜๋Š” ์ฃผ์–ด์ง„ ์ด๋ฏธ์ง€์— ์„ ํ˜• ๊ณ„์ˆ˜๋ฅผ ์ ์šฉํ•ด ๋” ๋ฐ๊ฑฐ๋‚˜ ์–ด๋‘ก๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
20 contrast() CSS, CSS Function, Filter Effects, Reference
contrast() CSS ํ•จ์ˆ˜๋Š” ์ฃผ์–ด์ง„ ์ด๋ฏธ์ง€์˜ ๋Œ€๋น„๋ฅผ ์กฐ์ ˆํ•ฉ๋‹ˆ๋‹ค.
21 &lt;frequency&gt; CSS, CSS Data Type, Reference, Web
<frequency> CSS ์ž๋ฃŒํ˜•์€ ๋ชฉ์†Œ๋ฆฌ์˜ ๋†’๋‚ฎ์ด ๋“ฑ ์ฃผํŒŒ์ˆ˜๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ํ˜„์žฌ ์–ด๋–ค CSS ์†์„ฑ๋„ <frequency>๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
22 &lt;gradient&gt; CSS, CSS Data Type, CSS Images, Graphics, Layout, Reference, ๊ทธ๋ผ๋ฐ์ด์…˜, ๊ทธ๋ ˆ์ด๋””์–ธํŠธ
<gradient> CSS ์ž๋ฃŒํ˜•์€ <image>์˜ ํŠน๋ณ„ํ•œ ์ข…๋ฅ˜๋กœ ์—ฌ๋Ÿฌ ์ƒ‰์˜ ์ ์ง„์ ์ธ ๋ณ€ํ™”๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
23 &lt;image&gt; CSS, CSS Data Type, CSS Images, Graphics, Layout, Reference, Web
<image> CSS ์ž๋ฃŒํ˜•์€ 2์ฐจ์› ์ด๋ฏธ์ง€๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
24 &lt;integer&gt; CSS, CSS Data Type, Reference, Web
<integer> CSS ์ž๋ฃŒํ˜•์€ <number>์˜ ์ข…๋ฅ˜ ์ค‘ ํ•˜๋‚˜๋กœ ์†Œ์ˆ˜์ ์ด ์—†๋Š” ์™„์ „ํ•œ ์ˆ˜, ์ฆ‰ ์ •์ˆ˜๋ฅผ ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค. ์ •์ˆ˜๋Š” column-count, counter-increment, grid-column, grid-row, z-index ๋“ฑ ๋‹ค์–‘ํ•œ ์†์„ฑ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
25 &lt;length-percentage&gt; CSS, CSS Date Type, Reference
<length-percentage> CSS ์ž๋ฃŒํ˜•์€ <length> ๋˜๋Š” <percentage>์ธ ๊ฐ’์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
26 &lt;length&gt; CSS, CSS Data Type, Layout, Reference, Web, length
<length> CSS ์ž๋ฃŒํ˜•์€ ๊ฑฐ๋ฆฌ ๊ฐ’์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. width, height, margin, padding, border-width, font-size, text-shadow ๋“ฑ ๋‹ค์–‘ํ•œ ์†์„ฑ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
27 &lt;number&gt; CSS, CSS Data Type, Layout, Reference, Web
<number> CSS ์ž๋ฃŒํ˜•์€ ์ˆซ์ž, ์ฆ‰ ์ •์ˆ˜ ๋˜๋Š” ์‹ค์ˆ˜๋ฅผ ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค.
28 &lt;percentage&gt; CSS, CSS Data Type, Layout, Reference, Web
<percentage> CSS ์ž๋ฃŒํ˜•์€ ๋ฐฑ๋ถ„์œจ ๊ฐ’์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ๋ณดํ†ต ๋ถ€๋ชจ ๊ฐ์ฒด์™€์˜ ์ƒ๋Œ€์  ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•  ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. width, height, margin, padding, font-size ์ฒ˜๋Ÿผ ๋‹ค์–‘ํ•œ ์†์„ฑ์—์„œ ๋ฐฑ๋ถ„์œจ์„ ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
29 &lt;string&gt; CSS, CSS Data Type, Layout, Reference, Web
<string> CSS ์ž๋ฃŒํ˜•์€ ์—ฐ์†ํ•œ ๋ฌธ์ž ์ง‘ํ•ฉ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. content, font-family, quotes ๋“ฑ ๋งŽ์€ CSS ์†์„ฑ์—์„œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
30 &lt;time&gt; CSS, CSS Date Type, Reference, Web
<time> CSS ์ž๋ฃŒํ˜•์€ ์‹œ๊ฐ„ ๊ฐ’์„ ์ดˆ๋‚˜ ๋ฐ€๋ฆฌ์ดˆ ๋‹จ์œ„๋กœ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. animation, transition๊ณผ ๊ด€๋ จ ์†์„ฑ์—์„œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
31 &lt;transform-function&gt; CSS, CSS Data Type, CSS Transforms, Layout, Reference
The <transform-function> CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the transform property.
32 matrix()
matrix() CSS ํ•จ์ˆ˜๋Š” 2D ๋ณ€ํ˜• ๋™์ฐจ ํ–‰๋ ฌ์„ ์„ ์–ธํ•ฉ๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ๋Š” <transform-function> ๋ฐ์ดํ„ฐ ํƒ€์ž…์ž…๋‹ˆ๋‹ค.
33 translate3d() translate3d
translate3d() CSS ํ•จ์ˆ˜๋Š” 3D๊ณต๊ฐ„์— ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ์ด๋™์‹œํ‚ต๋‹ˆ๋‹ค. ์ด ๋ณ€ํ™˜์€ 3์ฐจ์› ๋ฒกํ„ฐ์— ์˜ํ•ด ํŠน์„ฑ ์ง€์–ด์ง€๊ณ ,  ๊ทธ ์ขŒํ‘œ๋Š” ๊ฐ ๋ฐฉํ–ฅ์œผ๋กœ ์–ผ๋งˆ๋‚˜ ์›€์ง์ด๋Š”์ง€๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
34 &lt;url&gt; CSS, CSS Data Type, Layout, Reference
<url> CSS ์ž๋ฃŒํ˜•์€ ์ด๋ฏธ์ง€๋‚˜ ๊ธ€๊ผด ๋“ฑ ๋ฆฌ์†Œ์Šค๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ๋ฌธ์ž์—ด์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. URL์€ background-image, cursorlist-style ๋“ฑ ๋‹ค์–‘ํ•œ ์†์„ฑ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
35 @-๊ทœ์น™ At-rule, CSS, CSS Reference
@-๊ทœ์น™์€ ์‹๋ณ„์ž(identifier)๊ฐ€ ๋’ค๋”ฐ๋ฅด๋Š” at ๊ธฐํ˜ธ('@' (U+0040 COMMERCIAL AT))๋กœ ์‹œ์ž‘ํ•˜๋Š” CSS ๋ฌธ์ด๋ฉฐ ๋‹ค์Œ ์„ธ๋ฏธ์ฝœ๋ก (';' (U+003B SEMICOLON)) ๋˜๋Š” ๋‹ค์Œ CSS ๋ธ”๋ก ์ค‘ ๋จผ์ € ์˜ค๋Š” ์ชฝ๊นŒ์ง€ ๋ชจ๋“  ๊ฒƒ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.
36 @charset At-rule, CSS, Layout, Reference, Web
@charset CSS at-๊ทœ์น™์€ ์Šคํƒ€์ผ ์‹œํŠธ์— ์“ฐ์ด๋Š” ๋ฌธ์ž ์ธ์ฝ”๋”ฉ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ์Šคํƒ€์ผ ์‹œํŠธ์˜ ์ฒซ ๋ฒˆ์งธ ์š”์†Œ์—ฌ์•ผ ํ•˜๋ฉฐ ์–ด๋–ค ๋ฌธ์ž๊ฐ€ ์„ ํ–‰๋˜์ง€ ์•Š์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค; ์ค‘์ฒฉ๋œ ๋ฌธ์ด ์•„๋‹ˆ๊ธฐ์—, ์กฐ๊ฑด๋ถ€ ๊ทธ๋ฃน at-๊ทœ์น™ ๋‚ด์— ์‚ฌ์šฉ๋  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ @charset at-๊ทœ์น™์ด ์ •์˜๋œ ๊ฒฝ์šฐ, ์ฒซ ๋ฒˆ์งธ ๊ฒƒ๋งŒ ์‚ฌ์šฉ๋˜๊ณ  HTML ์š”์†Œ์˜ style attribute ๋˜๋Š” HTML ํŽ˜์ด์ง€์˜ ๋ฌธ์ž ์ง‘ํ•ฉ๊ณผ ๊ด€๋ จ ์žˆ๋Š” <style> ์š”์†Œ ๋‚ด์—์„œ ์‚ฌ์šฉ๋  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
37 @font-face
CSS at-rule ์ธ @font-face ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›นํŽ˜์ด์ง€์˜ ํ…์ŠคํŠธ์— ์˜จ๋ผ์ธํฐํŠธ(online fonts)๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. @font-face ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›นํŽ˜์ด์ง€ ์ œ์ž‘์ž๊ฐ€ ์›ํ•˜๋Š” ํฐํŠธ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒํ•จ์œผ๋กœ์จ, ์ปดํ“จํ„ฐ์— ์„ค์น˜๋œ ํฐํŠธ๋งŒ์„ ์‚ฌ์šฉํ•ด์•ผํ–ˆ๋˜ ์ œ์•ฝ์ด ์—†์–ด์ง€๊ฒŒ๋˜์—ˆ๋‹ค. @font-face at-rule ์€ CSS์˜ top-level์—์„œ ๋ฟ ์•„๋‹ˆ๋ผ, CSS conditional-group at-rule ์•ˆ์—์„œ๋„ ์‚ฌ์šฉ๋  ์ˆ˜๋„ ์žˆ๋‹ค.
38 @import At-rule, CSS, Reference
@import CSS at-๊ทœ์น™์€ ๋‹ค๋ฅธ ์Šคํƒ€์ผ ์‹œํŠธ์—์„œ ์Šคํƒ€์ผ ๊ทœ์น™์„ importํ•˜๋Š”๋ฐ ์“ฐ์ž…๋‹ˆ๋‹ค. ์ด ๊ทœ์น™์€ @charset ๊ทœ์น™์„ ์ œ์™ธํ•˜๊ณ  ๋ชจ๋“  ๋‹ค๋ฅธ ์ข…๋ฅ˜์˜ ๊ทœ์น™๋ณด๋‹ค ์„ ํ–‰ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค; ์ค‘์ฒฉ๋œ ๋ฌธ์ด ์•„๋‹ˆ๊ธฐ์—, @import๋Š” ์กฐ๊ฑด๋ถ€ ๊ทธ๋ฃน at-๊ทœ์น™ ๋‚ด์— ์‚ฌ์šฉ๋  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.
39 @keyframes Animations, At-rule, CSS, Reference
@keyframes @๊ทœ์น™์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ค‘๊ฐ„์ค‘๊ฐ„์˜ ํŠน์ • ์ง€์ ๋“ค์„ ๊ฑฐ์น  ์ˆ˜ ์žˆ๋Š” ํ‚คํ”„๋ ˆ์ž„๋“ค์„ ์„ค์ •ํ•จ์œผ๋กœ์จ CSS ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ณผ์ •์˜ ์ค‘๊ฐ„ ์ ˆ์ฐจ๋ฅผ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฃฐ์€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ž๋™์œผ๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ ๋ณด๋‹ค ๋” ์„ธ๋ฐ€ํ•˜๊ฒŒ ์ค‘๊ฐ„ ๋™์ž‘๋“ค์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
40 @media @media, At-rule, CSS, Reference
@media CSS @๊ทœ์น™์€ ์ค‘๊ด„ํ˜ธ๋กœ ๊ตฌ๋ถ„๋œ CSS ๋ธ”๋ก ๋‚ด ์ค‘์ฒฉ๋ฌธ ์ง‘ํ•ฉ์„ ๋ฏธ๋””์–ด ์งˆ์˜์— ์ •์˜๋œ ์กฐ๊ฑด๊ณผ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.
41 prefers-color-scheme @media, CSS, Reference, Web, prefers-color-scheme
prefers-color-scheme CSS ๋ฏธ๋””์–ด ํŠน์„ฑ์€ ์‚ฌ์šฉ์ž์˜ ์‹œ์Šคํ…œ์ด ๋ผ์ดํŠธ ํ…Œ๋งˆ๋‚˜ ๋‹คํฌ ํ…Œ๋งˆ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”์ง€ ํƒ์ง€ํ•˜๋Š” ๋ฐ์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
42 @namespace At-rule, CSS, Layout, Reference, Web
@namespace๋Š” CSS ์Šคํƒ€์ผ ์‹œํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” XML ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋ฅผ ์ •์˜ํ•˜๋Š” at-๊ทœ์น™์ž…๋‹ˆ๋‹ค. ์ •์˜๋œ ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋Š” ์˜ค์ง ๊ทธ ๋„ค์ž„์ŠคํŽ˜์ด์Šค ๋‚ด์˜ ์š”์†Œ๋ฅผ ์„ ํƒ๋งŒ ํ•˜๊ธฐ ์œ„ํ•ด universal, type ๋ฐ attribute ์„ ํƒ์ž๋ฅผ ์ œํ•œํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. @namespace ๊ทœ์น™์€ ๋ณดํ†ต ์—ฌ๋Ÿฌ ๋„ค์ž„์ŠคํŽ˜์ด์Šค(์ธ๋ผ์ธ SVG ๋˜๋Š” MathML ์žˆ๋Š” HTML5 ๋˜๋Š” ๋‹ค์–‘ํ•œ ์–ดํœ˜๋ฅผ ์„ž๋Š” XML ๋“ฑ)๋ฅผ ํฌํ•จํ•˜๋Š” ๋ฌธ์„œ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒฝ์šฐ์—๋งŒ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.
43 @page At-rule, CSS, Layout, Reference, Web
@page CSS @๊ทœ์น™์€ ๋ฌธ์„œ๋ฅผ ์ธ์‡„ํ•  ๋•Œ ์ผ๋ถ€ CSS ์†์„ฑ์„ ์ˆ˜์ •ํ•˜๋Š” ๋ฐ ์“ฐ์ž…๋‹ˆ๋‹ค. @page๋กœ ๋ชจ๋“  CSS ์†์„ฑ์„ ๋ฐ”๊ฟ€ ์ˆ˜๋Š” ์—†์Šต๋‹ˆ๋‹ค. ๋ฌธ์„œ์˜ margin, orphan, widow(์•ž๋‹จ์—์„œ ๋„˜์–ด์˜จ ์งค๋ง‰ํ•œ ํ–‰) ๋ฐ page break๋งŒ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ CSS ์†์„ฑ์„ ๋ฐ”๊พธ๋ ค๋Š” ์‹œ๋„๋Š” ๋ฌด์‹œ๋ฉ๋‹ˆ๋‹ค.
44 @supports At-rule, CSS, Layout, Reference, Web
@supports CSS @๊ทœ์น™์€ ์ฃผ์–ด์ง„ ํ•˜๋‚˜ ์ด์ƒ์˜ CSS ๊ธฐ๋Šฅ์„ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ง€์›ํ•˜๋Š”์ง€์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ์Šคํƒ€์ผ ์„ ์–ธ์„ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
45 @viewport Adaptation, At-rule, CSS, Device, NeedsContent, NeedsTranslation, Reference, TopicStub
The @viewport CSS at-rule lets you configure the viewport through which the document is viewed. It's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as Microsoft Edge).
46 height @viewport, CSS, CSS Descriptor, Reference
height CSS ์„œ์ˆ ์ž(descriptor)๋Š” ๋ทฐํฌํŠธ์˜ min-height ๋ฐ max-height ๋‘˜ ๋‹ค ์„ค์ •ํ•˜๊ธฐ ์œ„ํ•œ ๋‹จ์ถ•(shorthand) ์„ค๋ช…์ž์ž…๋‹ˆ๋‹ค. ๋ทฐํฌํŠธ ๊ธธ์ด ๊ฐ’ ํ•˜๋‚˜๋ฅผ ์ฃผ์–ด ์ตœ์†Œ ๋†’์ด ๋ฐ ์ตœ๋Œ€ ๋†’์ด ๋‘˜ ๋‹ค๋ฅผ ์ฃผ์–ด์ง„ ๊ฐ’์œผ๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
47 zoom CSS, CSS Descriptor, Graphics, Layout, NeedsExample, Reference
zoom CSS ์„ค๋ช…์ž(descriptor)๋Š” @viewport์— ์˜ํ•ด ์ •์˜๋œ ๋ฌธ์„œ์˜ ์ดˆ๊ธฐ ์คŒ ๋ฐฐ์œจ(factor)์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
48 Alternative style sheets
Firefox๋Š” ๋Œ€์ฒด ์Šคํƒ€์ผ์‹œํŠธ ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ๋Œ€์ฒด ์Šคํƒ€์ผ์‹œํŠธ๋ฅผ ์ œ๊ณตํ•˜๋Š” ํŽ˜์ด์ง€์—์„œ๋Š” ๋ณด๊ธฐ>ํŽ˜์ด์ง€ ์Šคํƒ€์ผ ๋ฉ”๋‰ด๋ฅผ ์ด์šฉํ•˜์—ฌ ํŽ˜์ด์ง€์— ์ ์šฉ๋  ์Šคํƒ€์ผ์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์‚ฌ์šฉ์ž๋Š” ์ž์‹ ์ด ์›ํ•˜๋Š” ๋‹ค์–‘ํ•œ ์ข…๋ฅ˜์˜ ํŽ˜์ด์ง€๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
49 CSS Animations CSS, CSS Animations, Overview, Reference
CSS Animations is a module of CSS that lets you animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes.
50 CSS ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‚ฌ์šฉํ•˜๊ธฐ Advanced, CSS, CSS Animations, Example, Experimental, Guide
CSS3 ์• ๋‹ˆ๋ฉ”์ด์…˜์€ ์—˜๋ฆฌ๋จผํŠธ์— ์ ์šฉ๋˜๋Š” CSS ์Šคํƒ€์ผ์„ ๋‹ค๋ฅธ CSS ์Šคํƒ€์ผ๋กœ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์ „ํ™˜์‹œ์ผœ ์ค๋‹ˆ๋‹ค. ์• ๋‹ˆ๋ฉ”์ด์…˜์€ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋‚˜ํƒ€๋‚ด๋Š” CSS ์Šคํƒ€์ผ๊ณผ ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ ์ค‘๊ฐ„ ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํ‚คํ”„๋ ˆ์ž„๋“ค๋กœ ์ด๋ฃจ์–ด์ง‘๋‹ˆ๋‹ค.
51 CSS Basic Box Model CSS, CSS Box Model, Overview, Reference
CSS Basic Box Model์€ ๊ฐ ์š”์†Œ์— ๋Œ€ํ•ด ์‹œ๊ฐ์  ์„œ์‹ ๋ชจ๋ธ์— ๋”ฐ๋ผ ์ƒ์„ฑํ•˜๊ณ  ๋ฐฐ์น˜ํ•˜๋Š” ์‚ฌ๊ฐํ˜• ๋ฐ•์Šค(์•ˆํŒŽ ์—ฌ๋ฐฑ ํฌํ•จ)๋ฅผ ์œ„ํ•œ CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
52 CSS ๊ธฐ๋ณธ ๋ฐ•์Šค ๋ชจ๋ธ ์ž…๋ฌธ CSS, CSS Box Model, Guide, Layout
๋ฌธ์„œ์˜ ๋ ˆ์ด์•„์›ƒ์„ ๊ณ„์‚ฐํ•  ๋•Œ, ๋ธŒ๋ผ์šฐ์ €์˜ ๋ Œ๋”๋ง ์—”์ง„์€ ํ‘œ์ค€ CSS ๊ธฐ๋ณธ ๋ฐ•์Šค ๋ชจ๋ธ์— ๋”ฐ๋ผ ๊ฐ๊ฐ์˜ ์š”์†Œ๋ฅผ ์‚ฌ๊ฐํ˜• ๋ฐ•์Šค๋กœ ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค. CSS๋Š” ๋ฐ•์Šค์˜ ํฌ๊ธฐ, ์œ„์น˜, ์†์„ฑ(์ƒ‰, ๋ฐฐ๊ฒฝ, ํ…Œ๋‘๋ฆฌ ๋ชจ์–‘ ๋“ฑ)์„ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
53 ๋งˆ์ง„ ์ƒ์‡„ ์ •๋ณต CSS, CSS Box Model
๋ธ”๋ก์˜ top ๋ฐ bottom ๋งˆ์ง„์€ ๋•Œ๋กœ๋Š” (๊ฒฐํ•ฉ๋˜๋Š” ๋งˆ์ง„ ์ค‘ ํฌ๊ธฐ๊ฐ€) ๊ฐ€์žฅ ํฐ ํ•œ ๋งˆ์ง„์œผ๋กœ ๊ฒฐํ•ฉ(combine, ์ƒ์‡„(collapsed))๋ฉ๋‹ˆ๋‹ค, ๋งˆ์ง„ ์ƒ์‡„(margin collapsing)๋กœ ์•Œ๋ ค์ง„ ํ–‰๋™.
54 CSS Basic User Interface CSS, CSS Basic User Interface, Overview, Reference
CSS Basic User Interface๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค์™€ ์—ฐ๊ด€๋œ ๋ Œ๋”๋ง ๋ฐ ๋™์ž‘ ๊ธฐ๋Šฅ์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
55 CSS Charsets CSS, CSS Charsets, Overview, Reference
CSS Charsets๋Š” ์Šคํƒ€์ผ ์‹œํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฌธ์ž ์ง‘ํ•ฉ์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
56 CSS Color CSS, CSS Colors, HTML Colors, Overview, Reference
CSS ์ƒ‰์ƒ์€ ์ƒ‰์ƒ, ์ƒ‰์ƒ ์œ ํ˜•, ์ƒ‰์ƒ ํ˜ผํ•ฉ, ํˆฌ๋ช…๋„ ๋ฐ ์ด๋Ÿฌํ•œ ์ƒ‰์ƒ ํšจ๊ณผ๋ฅผ HTML์— ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋‹ค๋ฃจ๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค. <color> ๊ฐ’์„ ์ทจํ•˜๋Š” ๋ชจ๋“  CSS ์†์„ฑ์ด ์ด ๋ชจ๋“ˆ์— ์†ํ•˜๋Š”๊ฑด ์•„๋‹ˆ์ง€๋งŒ ์˜์กด์„ฑ์€ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
57 CSS Conditional Rules CSS, CSS Conditional Rules, Overview, Reference
CSS Conditional Rules๋Š” ํ”„๋กœ์„ธ์„œ ๋˜๋Š” ์Šคํƒ€์ผ ์‹œํŠธ์— ์ ์šฉ๋˜๋Š” ๋ฌธ์„œ์˜ ๊ธฐ๋Šฅ์—๋งŒ ๊ธฐ๋ฐ˜์„ ๋‘๋Š” ๊ทœ์น™ ์ง‘ํ•ฉ์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
58 CSS Device Adaptation CSS, CSS Device Adaptation, Overview, Reference
CSS Device Adapation์€ ๋ทฐํฌํŠธ์˜ ํฌ๊ธฐ, ์คŒ ๋ฐฐ์œจ(factor) ๋ฐ ๋ฐฉํ–ฅ์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
59 CSS Flexible Box Layout CSS, CSS Flexible Boxes, Overview, Reference
CSS Flexible Box Layout์€ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๋””์ž์ธ๊ณผ ๋‹จ๋ฐฉํ–ฅ ๋ ˆ์ด์•„์›ƒ์— ์ตœ์ ํ™”๋œ CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค. ํ”Œ๋ ‰์Šค ๋ ˆ์ด์•„์›ƒ ๋ชจ๋ธ์—์„œ๋Š”, ํ”Œ๋ ‰์Šค ์ปจํ…Œ์ด๋„ˆ์˜ ์ž์‹์„ ์–ด๋–ค ๋ฐฉํ–ฅ์œผ๋กœ๋„ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ž์‹์˜ ํฌ๊ธฐ๋„ ์œ ์—ฐํ•˜๊ฒŒ("ํ”Œ๋ ‰์‹œ๋ธ”") ๋นˆ ๊ณต๊ฐ„์„ ์ฑ„์šฐ๊ฑฐ๋‚˜, ์ปจํ…Œ์ด๋„ˆ๋ฅผ ๋„˜์–ด๊ฐ€์ง€ ์•Š๋„๋ก ์ค„์–ด๋“ญ๋‹ˆ๋‹ค. ์ž์‹ ๊ฐ„์˜ ์ˆ˜ํ‰ ๋ฐ ์ˆ˜์ง ์ •๋ ฌ ๋˜ํ•œ ์‰ฝ๊ฒŒ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
60 Aligning Items in a Flex Container
flexbox๊ฐ€ ์›น ๊ฐœ๋ฐœ์ž๋“ค์˜ ๊ด€์‹ฌ ๋ฐ›๊ฒŒ๋œ ์ด์œ  ์ค‘ ํ•˜๋‚˜๋Š” ์›น ์ตœ์ดˆ๋กœ ์ตœ์ดˆ๋กœ ์ ์ ˆํ•œ ์ •๋ ฌ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. flexbox์˜ ์ˆ˜์ง ์ •๋ ฌ ๊ธฐ๋Šฅ์„ ์ด์šฉํ•˜์—ฌ ์šฐ๋ฆฌ๋Š” ๋“œ๋””์–ด ์‰ฝ๊ฒŒ ๋ฐ•์Šค(์—ญ์ฃผ: ์—ฌ๊ธฐ์„œ ๋ฐ•์Šค๋Š” flex ์ปจํ…Œ์ด๋„ˆ๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค)  ๋‚ด๋ถ€๋ฅผ ์ค‘์•™ ์ •๋ ฌ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ฐ€์ด๋“œ์—์„œ ์šฐ๋ฆฌ๋Š” flexbox์˜ ์ •๋ ฌ ๋ฐ ๋ ๋งˆ์ถ”๊ธฐ ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์‚ดํŽด๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
61 flexbox์˜ ๊ธฐ๋ณธ ๊ฐœ๋…
์ผ๋ช… flexbox๋ผ ๋ถˆ๋ฆฌ๋Š” Flexible Box module์€ flexbox ์ธํ„ฐํŽ˜์ด์Šค ๋‚ด์˜ ์•„์ดํ…œ ๊ฐ„ ๊ณต๊ฐ„ ๋ฐฐ๋ถ„๊ณผ ๊ฐ•๋ ฅํ•œ ์ •๋ ฌ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•œ 1์ฐจ์› ๋ ˆ์ด์•„์›ƒ ๋ชจ๋ธ ๋กœ ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” flexbox์˜ ์ฃผ์š” ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ๊ฐœ์š”๋ฅผ ๋‹ค๋ฃน๋‹ˆ๋‹ค. ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ๊ฐ€์ด๋“œ์˜ ๋‹ค๋ฅธ ๊ธ€์—์„œ ํƒ๊ตฌํ•˜๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.
62 CSS Flow Layout CSS ํ๋ฆ„ ๋ ˆ์ด์•„์›ƒ, ํ๋ฆ„
์ผ๋ฐ˜์ ์ธ ํ๋ฆ„ Normal Flow, ๋˜๋Š” ํ๋ฆ„ ๋ ˆ์ด์•„์›ƒ Flow Layout ์€ ๊ทธ ๋ ˆ์ด์•„์›ƒ ๋ณ€ํ™”๊ฐ€ ์žˆ๊ธฐ ์ „๊นŒ์ง€ ํŽ˜์ด์ง€ ์•ˆ์˜ ๋ธ”๋ก ์š”์†Œ์™€ ์ธ๋ผ์ธ ์š”์†Œ๊ฐ€ ๋ณด์—ฌ์ง€๋Š” ๋ฐฉ์‹ ์ž…๋‹ˆ๋‹ค. ํ๋ฆ„์ด๋ž€ ๋ณธ์งˆ์ ์œผ๋กœ ๋ ˆ์ด์•„์›ƒ ์•„๋ž˜ ์„œ๋กœ ๊ฐ™์ด ๋™์ž‘ํ•˜๊ณ  ์„œ๋กœ์—๊ฒŒ ์„œ๋กœ๊ฐ€ ์•Œ๋ ค์ง€๋Š” ๊ฒƒ๋“ค์˜ ์ง‘ํ•ฉ ์ž…๋‹ˆ๋‹ค. ๋งŒ์•ฝ์— ์–ด๋Š ํ•˜๋‚˜๊ฐ€ ํ๋ฆ„์—์„œ ๋ฒ—์–ด๋‚˜๋ฉด ๊ทธ๊ฒƒ์€ ๋…๋ฆฝ์ ์œผ๋กœ ๋™์ž‘ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
63 Introduction to formatting contexts
์ด ์ž๋ฃŒ๋Š” ์–‘์‹ํ™” ๋ฌธ๋งฅ formatting contexts ์˜ ๊ฐœ๋…๊ณผ ๊ทธ๊ฒƒ์˜ ์ข…๋ฅ˜์ธ ๋ธ”๋ก ์–‘์‹ํ™” ๋ฌธ๋งฅ block formatting contexts, ์ธ๋ผ์ธ ์–‘์‹ํ™” ๋ฌธ๋งฅ inline formatting contexts, ๊ทธ๋ฆฌ๊ณ  ํ”Œ๋ ‰์Šค ์–‘์‹ํ™” ๋ฌธ๋งฅ flex formatting contexts ์— ๋Œ€ํ•ด ์„ค๋ช… ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ์–‘์‹ํ™” ๋ฌธ๋งฅ์˜ ๊ธฐ์ดˆ ๋™์ž‘์„ ์„ค๋ช… ํ•˜๊ณ , ๊ทธ ๋™์ž‘์„ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”์ง€์— ๋Œ€ํ•ด๋„ ์„ค๋ช… ํ•ฉ๋‹ˆ๋‹ค.
64 CSS Fonts CSS, CSS Fonts, Overview, Reference
CSS Fonts๋Š” ๊ธ€๊ผด ๊ด€๋ จ ์†์„ฑ ๋ฐ ๊ธ€๊ผด ์ž์›์ด ๋กœ๋“œ๋˜๋Š” ๋ฒ•์„ ์ •์˜ํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค. ์ด๋Š” ๊ธ€๊ผด์˜ ์Šคํƒ€์ผ์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค, ๊ธ€๊ผด ํŒจ๋ฐ€๋ฆฌ, ํฌ๊ธฐ ๋˜๋Š” ๊ตต๊ธฐ ๋ฐ ํ•œ ๋ฌธ์ž์— ์—ฌ๋Ÿฌ ์ž์ฒด(glyph)๊ฐ€ ์žˆ๋Š” ๊ธ€๊ผด์— ์‚ฌ์šฉ๋˜๋Š” ์ดํ˜•(variant) ์ž์ฒด์™€ ๊ฐ™์€ ์ค„๋†’์ด๋„ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
65 CSS Generated Content CSS, CSS Generated Content, Overview, Reference
CSS Generated Content๋Š” ์š”์†Œ์— ์ฝ˜ํ…์ธ ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฒ•์„ ์ •์˜ํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
66 CSS Images CSS, CSS Images, Overview, Reference
CSS Images๋Š” ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋Š” ์ด๋ฏธ์ง€ ์œ ํ˜•(<image> ์œ ํ˜•, ํฌํ•จํ•˜๋Š” URL, ๊ทธ๋Ÿฌ๋ฐ์ด์…˜ ๋ฐ ๋‹ค๋ฅธ ์œ ํ˜•์˜ ์ด๋ฏธ์ง€), ํฌ๊ธฐ ์กฐ์ • ๋ฐฉ๋ฒ• ๋ฐ ์ด๋ฏธ์ง€์™€ ๋‹ค๋ฅธ ๋Œ€์ฒด ์ฝ˜ํ…์ธ ๊ฐ€ ์„œ๋กœ ๋‹ค๋ฅธ ๋ ˆ์ด์•„์›ƒ ๋ชจ๋ธ๊ณผ ์ƒํ˜ธ์ž‘์šฉํ•˜๋Š” ๋ฒ•์„ ์ •์˜ํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
67 CSS๋กœ ์ด๋ฏธ์ง€ ์Šคํ”„๋ผ์ดํŠธ ๊ตฌํ˜„ํ•˜๊ธฐ Advanced, CSS, CSS Image, CSS ์ด๋ฏธ์ง€, Graphics, Guide, Sprites, Web, ์Šคํ”„๋ผ์ดํŠธ
์ด๋ฏธ์ง€ ์Šคํ”„๋ผ์ดํŠธ๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ด๋ฏธ์ง€๋“ค์ด ํ•„์š”ํ•œ ์•„์ฃผ ๋งŽ์€ ์›น์•ฑ์—์„œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ์ง€ ๊ฐ๊ฐ์„ ๋ณ„๋„์˜ ํŒŒ์ผ๋กœ ํฌํ•จ์‹œํ‚ค๋Š” ๋Œ€์‹ , ์ด๋ฏธ์ง€๋“ค์„ ํ•˜๋‚˜์˜ ํŒŒ์ผ๋กœ ๋งŒ๋“ค์–ด์„œ ํฌํ•จ์‹œํ‚ค๋ฉด HTTP ๋ฆฌํ€˜์ŠคํŠธ ์ˆ˜๊ฐ€ ์ค„๊ธฐ ๋•Œ๋ฌธ์— ๋ฉ”๋ชจ๋ฆฌ์™€ ๋„คํŠธ์›Œํฌ ์‚ฌ์šฉ๋Ÿ‰ ์ธก๋ฉด์—์„œ ํšจ์œจ์ ์ž…๋‹ˆ๋‹ค.
68 CSS Lists and Counters CSS, CSS Lists, Overview, Reference
CSS Lists๋Š” ๋ฆฌ์ŠคํŠธ ๋ฐฐ์น˜ ๋ฐฉ๋ฒ•, ๋ฆฌ์ŠคํŠธ ๋งˆ์ปค๋ฅผ ์Šคํƒ€์ผ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ•์„ ์ •์˜ํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
69 CSS ์นด์šดํ„ฐ ์‚ฌ์šฉํ•˜๊ธฐ CSS, CSS Counter Styles, Guide, Layout, Reference, Web, ๋ฒˆํ˜ธ, ์นด์šดํ„ฐ
CSS counters๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฌธ์„œ์—์„œ์˜ ์œ„์น˜์— ๋”ฐ๋ผ ์ฝ˜ํ…์ธ ์˜ ๋ชจ์–‘์„ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, counters๋ฅผ ์‚ฌ์šฉํ•ด ์›นํŽ˜์ด์ง€์˜ ์ œ๋ชฉ์— ์ž๋™์œผ๋กœ ๋ฒˆํ˜ธ๋ฅผ ๋งค๊ธธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Counters๋Š” ์š”์†Œ๊ฐ€ ๋ช‡ ๋ฒˆ์ด๋‚˜ ์‚ฌ์šฉ๋˜์—ˆ๋Š”์ง€ ์ถ”์ ํ•˜์—ฌ CSS ๊ทœ์น™์— ๋”ฐ๋ผ ์ฆ๊ฐ€ํ•˜๋ฉฐ, ๋ณธ์งˆ์ ์œผ๋กœ ๋ณ€์ˆ˜์ž…๋‹ˆ๋‹ค.
70 CSS Logical Properties and Values CSS, CSS Logical Properties, Overview, Reference
CSS Logical Properties and Values๋Š” ๋ ˆ์ด์•„์›ƒ์„ ์ œ์–ดํ•˜๋Š” ๋ฌผ๋ฆฌ ์†์„ฑ์— ๋…ผ๋ฆฌ ๋งตํ•‘์„ ์ •์˜ํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
71 CSS Masking CSS, CSS Masking, Overview, Reference
CSS Masking์€ ๋งˆ์Šคํ‚น ๋ฐ ํด๋ฆฌํ•‘์„ ํฌํ•จํ•ด ์‹œ๊ฐ ์š”์†Œ์˜ ๋ถ€๋ถ„ ๋˜๋Š” ์ „์ฒด๋ฅผ ์ˆจ๊ธฐ๊ธฐ ์œ„ํ•œ ์ˆ˜๋‹จ์„ ์ •์˜ํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
72 CSS Miscellaneous CSS, Overview, Reference
์ด ํŽ˜์ด์ง€๋Š” ํ•œ์ฐธ ์‹คํ—˜ ์ค‘์ด๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ์–ด๋–ค ๋ถ€๋ฅ˜์™€๋„ ๋งž์ง€ ์•Š์€ CSS ์†์„ฑ์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.
73 CSS Multi-column Layout CSS, CSS Multi-column Layout, Layout, Overview, Reference
CSS Multi-column Layout์€ ๋‹ค๋‹จ ๋ ˆ์ด์•„์›ƒ์„ ์ •์˜ํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค. ๋ ˆ์ด์•„์›ƒ์—์„œ ๋‹จ์˜ ์ˆซ์ž์™€ ์ฝ˜ํ…์ธ ๊ฐ€ ํ•˜๋‚˜์˜ ๋‹จ์—์„œ ๋‹ค๋ฅธ ๋‹จ์œผ๋กœ ํ๋ฅด๋Š” ๋ฐฉ์‹, ๋‹จ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ, ๊ตฌ๋ถ„์„ ๊ณผ ๊ตฌ๋ถ„์„ ์˜ ๋ชจ์–‘ ๋“ฑ์˜ ์ง€์›์„ ํฌํ•จํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
74 CSS Namespaces CSS, CSS Namespaces, Overview, Reference
CSS Namespaces๋Š” CSS์—์„œ XML ๋„ค์ž„์ŠคํŽ˜์ด์Šค๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
75 CSS Paged Media CSS, CSS Paged Media, CSS Reference, Overview
CSS Paged Media๋Š” ํŽ˜์ด์ง€ ์ „ํ™˜์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ •์˜ํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
76 CSS Positioning CSS, CSS Positioning, Overview, Reference
CSS Positioning์€ ์š”์†Œ๋ฅผ ํŽ˜์ด์ง€์— ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ •์˜ํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
77 CSS Ruby CSS, CSS Ruby, Overview, Reference
CSS Ruby๋Š” ํ–‰๊ฐ„ ์ฃผ์„์˜ ํ˜•ํƒœ๋กœ ๊ธฐ๋ณธ ํ…์ŠคํŠธ์™€ ํ•จ๊ป˜ ์ž‘๊ฒŒ ์‹คํ–‰๋˜๋Š” ํ…์ŠคํŠธ์ธ ruby ์ฃผ์„ ํ‘œ์‹œ์™€ ๊ด€๋ จ๋œ ๋ Œ๋”๋ง ๋ชจ๋ธ ๋ฐ ์„œ์‹ ์ปจํŠธ๋กค์„ ์ œ๊ณตํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
78 CSS Scroll Snap Points CSS, CSS Scroll Snap, Overview, Reference
CSS Scroll Snap Points๋Š” ๋ฌผ๋ฆฌ๋ณด๋‹ค๋Š” ๋…ผ๋ฆฌ์ƒ ๋ฐฉํ–ฅ๊ณผ ์ฐจ์› ๋งตํ•‘์„ ํ†ตํ•ด ๋ ˆ์ด์•„์›ƒ์„ ์ œ์–ดํ•˜๋Š” ๋Šฅ๋ ฅ์„ ์ œ๊ณตํ•˜๋Š” ์†์„ฑ ๋ฐ ๊ฐ’์„ ์ •์˜ํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
79 CSS Shapes CSS, CSS Shapes, Overview, Reference
CSS Shapes๋Š” CSS์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐํ•˜ํ•™์  ๋„ํ˜•์„ ์„ค๋ช…ํ•œ๋‹ค. ๋ ˆ๋ฒŒ1 ๋ช…์„ธ์— ์˜ํ•˜๋ฉด ๋– ์žˆ๋Š” ์š”์†Œ์— CSS Shapes๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ช…์„ธ์˜ ์ •์˜์— ์˜ํ•˜๋ฉด ๋– ์žˆ๋Š” ์š”์†Œ์˜ ๋ชจ์–‘์„ ์ •์˜ ํ•˜๊ฑฐ๋‚˜  ์š”์†Œ ์ƒ์ž์˜ ์‚ฌ๊ฐํ˜•์„ ๋”ฐ๋ฅด๋Š” ๋Œ€์‹  ํ…Œ๋‘๋ฆฌ ์„ ์„ ๋”ฐ๋ผ ๊ฐ์‹ธ์ง€๋„๋ก ํ•˜๋Š” ๋ฐฉ๋ฒ• ๋“ฑ  ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ•์„ ์ •์˜ํ•˜๊ณ  ์žˆ๋‹ค.
80 CSS Table CSS, CSS Table, Overview, Reference
CSS Table์€ ํ‘œ ๋ฐ์ดํ„ฐ ๋ฐฐ์น˜๋ฒ•์„ ์ •์˜ํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
81 CSS Text CSS, CSS Text, Overview
CSS Text๋Š” ์ค„ ๋ฐ”๊ฟˆ, ์ •๋ˆ ๋ฐ ์ •๋ ฌ, ๊ณต๋ฐฑ ์ฒ˜๋ฆฌ ๋ฐ ํ…์ŠคํŠธ ๋ณ€ํ™˜ ๊ฐ™์€ ํ…์ŠคํŠธ ์กฐ์ž‘์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฒ•์„ ์ •์˜ํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
82 CSS Text Decoration CSS, CSS Text Decoration, Overview, Reference
CSS Text Decoration์€ ๋ฐ‘์ค„, ํ…์ŠคํŠธ ๊ทธ๋ฆผ์ž ๋ฐ ๊ฐ•์กฐ ํ‘œ์‹œ ๋“ฑ ํ…์ŠคํŠธ ์žฅ์‹์— ๊ด€๋ จ๋œ ๊ธฐ๋Šฅ์„ ์ •์˜ํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
83 CSS Transforms CSS, CSS Transforms, Overview, Reference
CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.
84 CSS transform ์‚ฌ์šฉํ•˜๊ธฐ 3D, Advanced, CSS, CSS Transforms, Graphics, Guide
CSS ๋ณ€ํ˜•(transform)์€ ์ขŒํ‘œ๊ณต๊ฐ„์„ ๋ณ€ํ˜•ํ•จ์œผ๋กœ์จ ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ํ๋ฆ„์„ ๋ฐฉํ•ดํ•˜์ง€ ์•Š๊ณ  ์ฝ˜ํ…์ธ ์˜ ํ˜•ํƒœ์™€ ์œ„์น˜๋ฅผ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค. ๋ณธ ๊ฐ€์ด๋“œ๋Š” ๋ณ€ํ˜• ์‚ฌ์šฉ๋ฒ•์˜ ๊ธฐ์ดˆ๋ฅผ ์ œ์‹œํ•ฉ๋‹ˆ๋‹ค.
85 CSS Transitions CSS, CSS Transitions, Overview, Reference
CSS Transitions๋Š” ํŠน์ • CSS ์†์„ฑ์˜ ๊ฐ’์„ ์ ์ง„์ ์œผ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค. ํƒ€์ด๋ฐ ํ•จ์ˆ˜, ์‹œ๊ฐ„ ๋“ฑ ์—ฌ๋Ÿฌ ์†์„ฑ์„ ํ†ตํ•ด ๊ฐ’์ด ๋ฐ”๋€Œ๋Š” ๋ฐฉ์‹์„ ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
86 CSS ํŠธ๋žœ์ง€์…˜ ์‚ฌ์šฉํ•˜๊ธฐ Advanced, CSS, CSS Transitions, Guide
CSS ํŠธ๋žœ์ง€์…˜์€ CSS ์†์„ฑ์„ ๋ณ€๊ฒฝํ•  ๋•Œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์†๋„๋ฅผ ์กฐ์ ˆํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์†์„ฑ ๋ณ€๊ฒฝ์ด ์ฆ‰์‹œ ์˜ํ–ฅ์„ ๋ฏธ์น˜๊ฒŒ ํ•˜๋Š” ๋Œ€์‹ , ๊ทธ ์†์„ฑ์˜ ๋ณ€ํ™”๊ฐ€ ์ผ์ • ๊ธฐ๊ฐ„์— ๊ฑธ์ณ ์ผ์–ด๋‚˜๋„๋ก ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์—ฌ๋Ÿฌ๋ถ„์ด ์–ด๋–ค ์š”์†Œ์˜ ์ƒ‰์ƒ์„ ํฐ์ƒ‰์—์„œ ๊ฒ€์€์ƒ‰์œผ๋กœ ๋ณ€๊ฒฝํ•œ๋‹ค๋ฉด, ๋ณ€ํ™”๋Š” ๋Œ€๊ฐœ ์ฆ‰์‹œ ์ผ์–ด๋‚ฉ๋‹ˆ๋‹ค. CSS ํŠธ๋žœ์ง€์…˜์„ ์ด์šฉํ•˜๋ฉด, ๋ชจ๋‘ ์ปค์Šคํ„ฐ๋งˆ์ด์ฆˆ ๊ฐ€๋Šฅํ•œ ์–ด๋–ค ๊ฐ€์†๋„ ๊ณก์„ ์„ ๋”ฐ๋ฅด๋Š” ์‹œ๊ฐ„ ์ฃผ๊ธฐ๋งˆ๋‹ค ๋ณ€ํ™”๊ฐ€ ์ผ์–ด๋‚ฉ๋‹ˆ๋‹ค.
87 CSS Writing Modes CSS, CSS Writing Modes, Overview, Reference
CSS Writing Modes๋Š” ๋‹ค์–‘ํ•œ ๊ตญ์ œ ์“ฐ๊ธฐ ๋ชจ๋“œ๋ฅผ ์ •์˜ํ•˜๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค, ์ขŒ์—์„œ ์šฐ(๊ฐ€๋ น Latin ๋ฐ Indic ์Šคํฌ๋ฆฝํŠธ์— ์‚ฌ์šฉ๋จ), ์šฐ์—์„œ ์ขŒ(๊ฐ€๋ น Hebrew ๋˜๋Š” Arabic ์Šคํฌ๋ฆฝํ‹ฐ์— ์‚ฌ์šฉ๋จ), ์–‘๋ฐฉํ–ฅ(์ขŒ์—์„œ ์šฐ ๋ฐ ์šฐ์—์„œ ์ขŒ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์„ž์„ ๋•Œ ์‚ฌ์šฉ๋จ) ๋ฐ ์„ธ๋กœ(๊ฐ€๋ น ์ผ๋ถ€ Asian ์Šคํฌ๋ฆฝํŠธ์— ์‚ฌ์šฉ๋จ) ๋“ฑ.
88 CSS animated properties CSS
์ผ๋ถ€ CSS ์†์„ฑ์€ ์• ๋‹ˆ๋ฉ”์ด์…˜๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค, ์ฆ‰ ๊ทธ ๊ฐ’์„ ๋ฐ”๊ฟ€ ๋•Œ CSS animation ๋˜๋Š” CSS transition์ด ์‚ฌ์šฉ๋œ ๊ฒฝ์šฐ ๋ถ€๋“œ๋Ÿฌ์šด ๋ฐฉ์‹์œผ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
89 CSS documentation index CSS, Index, MDN Meta
Found 236 pages:
90 CSS z-index ์ดํ•ดํ•˜๊ธฐ
์šฐ๋ฆฌ๋“ค์€ HTML ํŽ˜์ด์ง€๋ฅผ 2์ฐจ์› ํ‰๋ฉด์œผ๋กœ ์ƒ๊ฐํ•œ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์—ฌ๋Ÿฌ ํ…์ŠคํŠธ, ์ด๋ฏธ์ง€์™€ ๋‹ค๋ฅธ ์—˜๋ฆฌ๋จผํŠธ๋“ค์ด ์„œ๋กœ ๊ฒน์น˜์ง€ ์•Š๊ณ  ๋ฐฐ์—ด๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ํ•˜๋‚˜์˜ ๋ Œ๋”๋ง ํ๋ฆ„๋งŒ์ด ์กด์žฌํ•˜๋ฉฐ ๋ชจ๋“  ์—˜๋ฆฌ๋จผํŠธ๋“ค์€ ๋‹ค๋ฅธ ์—˜๋ฆฌ๋จผํŠธ๋“ค์ด ์–ด๋–ค ๊ณต๊ฐ„์„ ์ฐจ์ง€ํ•˜๊ณ  ์žˆ๋Š”์ง€ ์•Œ๊ณ  ์žˆ๋‹ค.
91 floating ์—˜๋ฆฌ๋จผํŠธ์˜ ์Œ“์ž„
floating ์—˜๋ฆฌ๋จผํŠธ๋“ค์˜ ์Œ“์ž„ ์ˆœ์„œ๋Š” ์•ฝ๊ฐ„ ๋‹ค๋ฅด๋‹ค. floating ์—˜๋ฆฌ๋จผํŠธ๋“ค์€ position์ด ์ง€์ •๋œ ๋ธ”๋ก๊ณผ ์ง€์ •๋˜์ง€ ์•Š์€ ๋ธ”๋ก ์‚ฌ์ด์— ์Œ“์ธ๋‹ค.
92 z-index ์ ์šฉ
์ฒ˜์Œ ์˜ˆ์ œ์—์„œ(z-index๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ์˜ ์Œ“์ž„) ์—˜๋ฆฌ๋จผํŠธ๋“ค์ด ๊ธฐ๋ณธ์ ์œผ๋กœ ์–ด๋–ป๊ฒŒ ์Œ“์ด๋Š”์ง€ ์„ค๋ช…ํ–ˆ๋‹ค. ๋งŒ์•ฝ ๋‹ค๋ฅธ ์Œ“์ž„ ์ˆœ์„œ๋ฅผ ์ ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ๋จผ์ € ์—˜๋ฆฌ๋จผํŠธ์— position ์†์„ฑ์„ ์ง€์ •ํ•˜๊ณ  z-index ์†์„ฑ์„ ์ง€์ •ํ•ด์•ผํ•œ๋‹ค.
93 z-index๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ์˜ ์Œ“์ž„
๋งŒ์•ฝ ๋ชจ๋“  ์—˜๋ฆฌ๋จผํŠธ๋“ค์— z-index๊ฐ€ ์ง€์ •๋˜์ง€ ์•Š์•˜์„ ๊ฒฝ์šฐ์—๋Š” ์—˜๋ฆฌ๋จผํŠธ๋“ค์ด ๋‹ค์Œ ์ˆœ์„œ๋กœ ์•„๋ž˜์—์„œ๋ถ€ํ„ฐ ์œ„๋กœ ์Œ“์ธ๋‹ค.
94 ์Œ“์ž„ ๋งฅ๋ฝ Advanced, CSS, Guide, Reference
์Œ“์ž„ ๋งฅ๋ฝ(stacking context) is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.
95 ์Œ“์ž„ ๋งฅ๋ฝ ์˜ˆ์ œ1
๊ธฐ๋ณธ ์˜ˆ์ œ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์ž. ์Œ“์ž„ ๋งฅ๋ฝ์˜ ๋ฟŒ๋ฆฌ์—๋Š” ๋‘๊ฐœ์˜ DIV #1๊ณผ DIV #3๊ฐ€ ์žˆ๋‹ค. ๋‘ DIV๋Š” ๋ชจ๋‘ position ์†์„ฑ ๊ฐ’์ด relative๋กœ ์ง€์ •๋˜์—ˆ์ง€๋งŒ z-index ์†์„ฑ ๊ฐ’์€ ์ง€์ •๋˜์ง€ ์•Š์•˜๋‹ค. DIV #1 ์•ˆ์—๋Š” position ์†์„ฑ ๊ฐ’์ด absolute๋กœ ์ง€์ •๋œ DIV #2๊ฐ€ ์žˆ๊ณ  DIV #3 ์•ˆ์—๋„ position ์†์„ฑ ๊ฐ’์ด absolute๊ฐ€ ์ง€์ •๋œ DIV #4๊ฐ€ ์žˆ๋‹ค. DIV #2์™€ใ… DIV #4 ๋ชจ๋‘ z-index ์†์„ฑ ๊ฐ’์€ ์ง€์ •๋˜์ง€ ์•Š์•˜๋‹ค.
96 ์Œ“์ž„ ๋งฅ๋ฝ ์˜ˆ์ œ2
๊ต‰์žฅํžˆ ๊ฐ„๋‹จํ•˜์ง€๋งŒ ์Œ“์ž„ ๋งฅ๋ฝ์„ ์ดํ•ดํ•˜๋Š”๋ฐ ๋„์›€์ด ๋˜๋Š” ์˜ˆ์ œ๋ฅผ ํ•˜๋‚˜ ์†Œ๊ฐœํ•˜๋ ค ํ•œ๋‹ค. ์ด์ „ ์˜ˆ์ œ์—์„œ ๋ณธ 4๊ฐœ์˜ DIV๊ฐ€ ์žˆ๋‹ค. ์ด๋ฒˆ์—๋Š” ๋‘ ๋ ˆ๋ฒจ์˜ DIV ๋ชจ๋‘ z-index ์†์„ฑ ๊ฐ’์„ ์ง€์ •ํ–ˆ๋‹ค.
97 ์Œ“์ž„ ๋งฅ๋ฝ ์˜ˆ์ œ3
๋งˆ์ง€๋ง‰ ์˜ˆ์ œ๋Š” ๋ฉ€ํ‹ฐ ๋ ˆ๋ฒจ HTML ๊ณ„์ธต ๊ตฌ์กฐ์—์„œ z-index ์†์„ฑ ๊ฐ’์„ ์ง€์ •ํ• ๋•Œ ์ƒ๊ธฐ๋Š” ๋ฌธ์ œ์— ๋Œ€ํ•ด ๋‹ค๋ฃฐ ๊ฒƒ์ด๋‹ค.
98 CSS ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ CSS, Grid Layout, Grids, ๊ฐœ์š”, ๊ทธ๋ฆฌ๋“œ, ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ, ๋ ˆ์ด์•„์›ƒ, ์ฐธ๊ณ 
CSS ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ(Grid Layout)์€ ํŽ˜์ด์ง€๋ฅผ ์—ฌ๋Ÿฌ ์ฃผ์š” ์˜์—ญ์œผ๋กœ ๋‚˜๋ˆ„๊ฑฐ๋‚˜, ํฌ๊ธฐ์™€ ์œ„์น˜ ๋ฐ ๋ฌธ์„œ ๊ณ„์ธต ๊ตฌ์กฐ์˜ ๊ด€์ ์—์„œ HTML ๊ธฐ๋ณธ ์š”์†Œ๋กœ ์ž‘์„ฑ๋œ ์ฝ˜ํŠธ๋กค ๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ ์ •์˜ํ•˜๋Š” ๋ฐ ์•„์ฃผ ํƒ์›”ํ•ฉ๋‹ˆ๋‹ค.
99 Basic concepts of grid layout CSS, CSS ๊ทธ๋ฆฌ๋“œ, ๊ฐ€์ด๋“œ, ๋ ˆ์ด์•„์›ƒ
CSS ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ(Grid Layout)์€ CSS์— 2์ฐจ์›์˜ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์„ ๋„์ž…ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๋“œ๋Š” ์ฃผ์š” ํŽ˜์ด์ง€ ์˜์—ญ์„ ์„ค๊ณ„ํ•˜๊ฑฐ๋‚˜ ์ž‘์€ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์„œ์—์„œ๋Š” CSS ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ ๋ฐ CSS ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ ๋ ˆ๋ฒจ 1 ๋ช…์„ธ์„œ์— ํฌํ•จ๋œ ์ƒˆ๋กœ์šด ๊ธฐ์ˆ  ์šฉ์–ด๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ฐœ์š”์— ์†Œ๊ฐœ๋œ ๊ธฐ๋Šฅ์€ ๋‚˜๋จธ์ง€ ์•ˆ๋‚ด ๋ฌธ์„œ์—์„œ ์ž์„ธํžˆ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.
100 Grid template areas CSS, CSS Grids, Guide
์ด์ „ ๊ฐ€์ด๋“œ์—์„œ ์šฐ๋ฆฌ๋Š” ๊ทธ๋ฆฌ๋“œ ๋ผ์ธ์— ๋Œ€ํ•ด์„œ ์‚ดํŽด๋ณด์•˜์œผ๋ฉฐ, ์ด ๋ผ์ธ์„ ๊ธฐ์ค€์œผ๋กœ ์–ด๋–ป๊ฒŒ ์•„์ดํ…œ๋“ค์„ ๋ฐฐ์น˜ํ•˜๋Š”์ง€ ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค. CSS ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์œผ๋กœ ์ž‘์—…ํ•  ๋• ๊ฑฐ๊ธฐ์—” ํ•ญ์ƒ ๋ผ์ธ์ด ์žˆ์„ ๊ฒƒ์ด๊ณ , ์ด๊ฒƒ์€ ์•„์ดํ…œ๋“ค์„ ๊ทธ๋ฆฌ๋“œ์— ๋ฐฐ์น˜ํ•  ๋•Œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์•„์ฃผ ์ง๊ด€์ ์ธ ๋ฐฉ๋ฒ•์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€๋งŒ, ์•„์ดํ…œ์„ ๊ทธ๋ฆฌ๋“œ์— ๋ฐฐ์น˜ํ•  ๋•Œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋˜ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์ด ์žˆ๋Š”๋ฐ, ์ด๊ฒƒ์€ ๋…์ž์ ์œผ๋กœ ํ˜น์€ ๋ผ์ธ ๊ธฐ์ค€ ๋ฐฐ์น˜ ๋ฐฉ๋ฒ•๊ณผ ํ•จ๊ป˜ ํ˜ผ์šฉํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฐฉ๋ฒ•์€ ์ด๋ฆ„์ด ์ง€๋ช…๋œ ํ…œํ”Œ๋ฆฟ ์˜์—ญ์„ ์‚ฌ์šฉํ•˜์—ฌ ์•„์ดํ…œ์„ ๋ฐฐ์น˜ํ•˜๋Š” ์ž‘์—…๊ณผ ์—ฐ๊ด€๋ผ ์žˆ์œผ๋ฉฐ, ์ด ๋ฐฉ๋ฒ•์ด ์ •ํ™•ํžˆ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์ด ๋•Œ๋•Œ๋กœ ์™œ ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์˜ ascii-art ๋ฐฉ์‹์ด๋ผ๊ณ  ์ผ์ปฌ์–ด์ง€๋Š”์ง€ ์‰ฝ๊ฒŒ ๋ˆˆ์น˜์ฑ„์‹ค ์ˆ˜ ์žˆ์„ ๊ฒ๋‹ˆ๋‹ค!
101 Layout using named grid lines CSS, CSS Grids, Guide
์ด์ „ ๊ฐ€์ด๋“œ์—์„  ๊ทธ๋ฆฌ๋“œ ํŠธ๋ž™์„ ์ •์˜ํ•˜๋ฉด ์ƒ์„ฑ๋˜๋Š” ๋ผ์ธ์„ ์‚ฌ์šฉํ•ด์„œ ์•„์ดํ…œ์„ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฒ•์„ ์‚ดํŽด๋ณด์•˜์œผ๋ฉฐ, ๋˜ํ•œ ์ด๋ฆ„์ด ๋ช…๋ช…๋œ ํ…œํ”Œ๋ฆฟ ์˜์—ญ์„ ๊ฐ€์ง€๊ณ  ์–ด๋–ป๊ฒŒ ์•„์ดํ…œ๋“ค์„ ๋ฐฐ์น˜ํ•˜๋Š”์ง€๋„ ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ฐ€์ด๋“œ์—์„  ์ด๋ฆ„์ด ์ฃผ์–ด์ง„ ๋ผ์ธ์„ ์“ฐ๋Š” ์ƒํ™ฉ์—์„œ ์ด ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์„œ๋กœ ์–ด๋–ป๊ฒŒ ์ž‘์šฉํ•˜๋Š”์ง€ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ผ์ธ์— ์ด๋ฆ„์„ ์ง€์–ด ์ฃผ๋Š” ๊ฒƒ์ด ๋งค์šฐ ์œ ์šฉํ•  ๋•Œ๋„ ์žˆ์ง€๋งŒ, ์ด๋ฆ„๊ณผ ํŠธ๋ž™ ํฌ๊ธฐ๊ฐ€ ํ˜ผํ•ฉ๋ผ์„œ ์‚ฌ์šฉ๋˜๋Š” ๊ทธ๋ฆฌ๋“œ ์šฉ๋ฒ•์„ ๋ณด๊ณ  ์žˆ์œผ๋ฉด ๋งค์šฐ ํ—ท๊ฐˆ๋ฆด ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋ช‡ ๊ฐ€์ง€ ์˜ˆ์ œ๋ฅผ ๊ฐ€์ง€๊ณ  ์ž‘์—…ํ•ด ๋ณด์‹œ๋ฉด ์ ์  ๋ช…ํ™•ํ•ด์ง€๋ฉด์„œ ๋‚˜์ค‘์—” ์ž‘์—…ํ•˜๊ธฐ๋„ ํ›จ์”ฌ ์ˆ˜์›”ํ•ด์ง€์‹ค ๊ฒ๋‹ˆ๋‹ค.
102 Line-based placement with CSS Grid CSS, CSS Grids, Guide
๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…์„ ๋‹ค๋ฃฌ ๋ฌธ์„œ์—์„œ ๋ผ์ธ ๋ฒˆํ˜ธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ทธ๋ฆฌ๋“œ์— ์•„์ดํ…œ์„ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ž ๊น ์‚ดํŽด๋ณธ ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ๋ฌธ์„œ์—์„œ๋Š” ์ด ๊ธฐ๋ณธ์  ๊ธฐ๋Šฅ์ด ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€๋ฅผ ์ž์„ธํžˆ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.
103 Relationship of grid layout to other layout methods CSS, CSS Grids, Guide
CSS ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์€ ๋ ˆ์ด์•„์›ƒ ์ž‘์—…์„ ์œ„ํ•œ ์ „์ฒด ์‹œ์Šคํ…œ ์ค‘์˜ ์ผ๋ถ€๋กœ์„œ, ๋‹ค๋ฅธ CSS ๊ธฐ์ˆ ๊ณผ ํ•จ๊ป˜ ์–ด์šฐ๋Ÿฌ์ ธ ์ž‘๋™ํ•˜๋„๋ก ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ฐ€์ด๋“œ์—์„œ๋Š” ์ด๋ฏธ ์‚ฌ์šฉํ•˜๊ณ  ๊ณ„์‹  ๋‹ค๋ฅธ ๊ธฐ์ˆ ๊ณผ ๊ทธ๋ฆฌ๋“œ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ž˜ ์–ด์šธ๋ฆฌ๋Š”์ง€ ์„ค๋ช…ํ•ด ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.
104 CSS ๊ธฐ๋ณธ ์ž๋ฃŒํ˜• CSS, CSS Data Type, Overview, Reference
CSS ๊ธฐ๋ณธ ์ž๋ฃŒํ˜•์€ CSS ์†์„ฑ๊ณผ ํ•จ์ˆ˜๊ฐ€ ๋ฐ›์•„๋“ค์ด๋Š” ์ผ๋ฐ˜์ ์ธ ๊ฐ’(ํ‚ค์›Œ๋“œ์™€ ๋‹จ์œ„ ํฌํ•จ)์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ์ž๋ฃŒํ˜•์€ component value type์˜ ํŠน๋ณ„ํ•œ ์ข…๋ฅ˜์ž…๋‹ˆ๋‹ค.
105 CSS ๋ฐฐ๊ฒฝ ๋ฐ ํ…Œ๋‘๋ฆฌ CSS, CSS Backgrounds and Borders, Overview, Reference
CSS Backgrounds and Borders๋Š” ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ๋ฐ ํ…Œ๋‘๋ฆฌ๋ฅผ ๊พธ๋ฐ€ ์ˆ˜ ์žˆ๋Š” CSS ๋ชจ๋“ˆ์ž…๋‹ˆ๋‹ค.
106 ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€ ํฌ๊ธฐ ์กฐ์ •ํ•˜๊ธฐ CSS, CSS Background, Example, Guide, Intermediate, Reference, Web
CSS ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ๊ธฐ๋ณธ ์„ค์ •๊ฐ’์—์„œ๋Š” ์›๋ณธ ์ด๋ฏธ์ง€๊ฐ€ ํฌ๊ธฐ ๋ณ€ํ™” ์—†์ด ๋ฐ”๋‘‘ํŒ์‹์œผ๋กœ ๋ฐฐ์—ด๋ฉ๋‹ˆ๋‹ค. background-size ์†์„ฑ์— ๊ฐ€๋กœ์™€ ์„ธ๋กœ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•ด ํฌ๊ธฐ๋ฅผ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
107 ํ•œ ๋ฒˆ์— ์—ฌ๋Ÿฌ ๋ฐฐ๊ฒฝ ์‚ฌ์šฉํ•˜๊ธฐ CSS, CSS Background, Example, Guide, Reference
์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋ฐฐ๊ฒฝ์„ ํ•œ ๋ฒˆ์— ์ ์šฉํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ ๋ฐฐ๊ฒฝ์ด ๋งจ ์œ„์—, ๋งˆ์ง€๋ง‰ ๋ฐฐ๊ฒฝ์ด ๋งจ ๋ฐ‘์— ์œ„์น˜ํ•˜๋Š” ๋ ˆ์ด์–ด ๊ตฌ์กฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
108 CSS ์„ ํƒ์ž
์„ ํƒ์ž๋Š” CSS ๊ทœ์น™์กฐํ•ฉ์ด ์–ด๋–ค ์š”์†Œ๋“ค์— ์ ์šฉ๋ ์ง€ ์ •์˜ํ•œ๋‹ค.
109 CSS ์ฐธ๊ณ ์„œ CSS, Overview, Reference, l10n:priority
CSS ์ฐธ๊ณ ์„œ๋ฅผ ์ด์šฉํ•ด ์•ŒํŒŒ๋ฒณ ์ˆœ์„œ๋กœ ์ •๋ฆฌํ•œ ๋ชจ๋“  ํ‘œ์ค€ CSS ์†์„ฑ, ๊ฐ€์ƒ ํด๋ž˜์Šค, ๊ฐ€์ƒ ์š”์†Œ, CSS ์ž๋ฃŒํ˜•๊ณผ @๊ทœ์น™์„ ์ฐพ์•„๋ณด์„ธ์š”. ๋˜ํ•œ ์œ ํ˜•๋ณ„๋กœ ์ •๋ฆฌํ•œ ๋ชจ๋“  CSS ์„ ํƒ์ž์™€ ์ฃผ์š” CSS ๊ฐœ๋…๋„ ์ฐพ์•„๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ถ”๊ฐ€๋กœ ๊ฐ„๋‹จํ•œ DOM-CSS / CSSOM ์ฐธ์กฐ๋„ ๋“ค์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
110 CSS3
CSS3๋Š” Cascading Style Sheets(CSS) ์–ธ์–ด์˜ ๊ฐ€์žฅ ์ตœ์‹  ๋ฒ„์ „์ด๊ณ  CSS2.1์„ ์ƒ์†ํ•˜๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ  ํ•ฉ๋‹ˆ๋‹ค.  CSS3๋Š” ๊ฐœ๋ฐœ์ž๋“ค์ด ์˜ค๋žซ๋™์•ˆ ๊ธฐ๋‹ค๋ ค์˜จ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ๋“ค์„ ์ง€์›ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์ค‘์—ด(rounded corners), ๊ทธ๋ฆผ์ž( shadows) , ๋ถ€๋“œ๋Ÿฌ์šด ์ƒ‰์˜ ๋ณ€์ด(gradients) , ๋ณ€์ด(transitions), ์›€์ง์ž„(animations) ๋“ฑ๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
111 ID ์„ ํƒ์ž CSS, Reference, Selectors
CSS ID ์„ ํƒ์ž๋Š” ์š”์†Œ์˜ id ์†์„ฑ ๊ฐ’์„ ๋น„๊ตํ•˜์—ฌ ์™„์ „ํžˆ ๋™์ผํ•œ id๋ฅผ ๊ฐ€์ง„ ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
112 Media queries CSS, CSS ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ, Overview, ๋ ˆํผ๋Ÿฐ์Šค, ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ, ๋ฐ˜์‘ํ˜• ๋””์ž์ธ
๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋Š” ๋‹ค์–‘ํ•œ ๊ธฐ๊ธฐ ํŠน์„ฑ๊ณผ ํŒŒ๋ผ๋ฉ”ํ„ฐ์˜ ์กด์žฌ ์—ฌ๋ถ€์— ๋”ฐ๋ผ ์‚ฌ์ดํŠธ, ํ˜น์€ ์•ฑ์„ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
113 ์ ‘๊ทผ์„ฑ์„ ์œ„ํ•œ ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ์‚ฌ์šฉํ•˜๊ธฐ @media, CSS, ๋ฏธ๋””์–ด ์†์„ฑ, ์ ‘๊ทผ์„ฑ
๋ฏธ๋””์–ด์ฟผ๋ฆฌ(Media Queries)๋Š” ์žฅ์• ๋ฅผ ๊ฐ€์ง„ ์‚ฌ์šฉ์ž๊ฐ€ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋” ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
114 Paged Media CSS, CSS3, Page Breaks
์ธ์‡„ ๋ฏธ๋””์–ด(paged media) ์†์„ฑ์€ ์ธ์‡„ ์ฝ˜ํ…์ธ ์˜ ํ”„๋ ˆ์  ํ…Œ์ด์…˜ ๋˜๋Š” ์ฝ˜ํ…์ธ ๋ฅผ ๊ฐœ๋ณ„ ํŽ˜์ด์ง€๋กœ ๋‚˜๋ˆ„๋Š” ๋‹ค๋ฅธ ๋ฏธ๋””์–ด๋ฅผ ์ œ์–ดํ•ฉ๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ๋‚˜๋ˆ„๊ธฐ ์„ค์ •, ์ธ์‡„ ๊ฐ€๋Šฅ ์˜์—ญ ์ œ์–ด, ์„œ๋กœ ๋‹ค๋ฅธ ์ขŒ์šฐ ํŽ˜์ด์ง€ ์Šคํƒ€์ผ ๋ฐ ์š”์†Œ ๋‚ด๋ถ€ ๋‚˜๋ˆ„๊ธฐ ์ œ์–ด๋ฅผ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋„๋ฆฌ ์ง€์›๋˜๋Š” ์†์„ฑ์€ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค
115 Property Template CSS, CSS Reference
์š”์•ฝ.
116 Replaced element CSS, Layout, Reference, css layout, rendering, replaced element
๋Œ€ํ‘œ์ ์ธ ๋Œ€์ฒด ์š”์†Œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.
117 align-content CSS, CSS Box Alignment, CSS Property, Reference
CSS align-content property๋Š” flex container์—์„œ browser๊ฐ€ ๊ฐ„๊ฒฉ๊ณผ ์•„์ดํ…œ๋“ค์„ xy์ขŒํ‘œ์ถ•์—์„œ์˜ ๊ณต๊ฐ„์„ ํ• ๋‹นํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
118 align-items CSS, CSS Flexible Boxes, CSS Property, Reference
CSS align-items property๋Š” ๋ฐ”๋กœ ์ ‘ํ•˜๊ณ  ์žˆ๋Š” flex items์— align-self ๋ฅผ ์ผ๊ด„์ ์šฉํ•œ๋‹ค. align-self property๋Š” ํ•ด๋‹น item์ด ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์˜ ์ค‘์•™์ธ์ง€ ์‹œ์ž‘์ธ์ง€ ๋์ธ์ง€์— ์ •๋ ฌํ•œ๋‹ค.
119 align-self CSS, CSS Box Alignment, CSS Flexible Boxes, CSS Property, Reference
align-self CSS property๋Š” ํ•ด๋‹น flex item์˜ align-items ๊ฐ’์„ ๋ฎ์–ด์”๋‹ˆ๋‹ค. ๋งŒ์•ฝ ์–ด๋–ค flex item์˜ cross-axis margin ๊ฐ’์ด auto๋กœ ์„ค์ •๋˜์–ด ์žˆ์œผ๋ฉด align-self ๊ฐ’์€ ๋ฌด์‹œ ๋ฉ๋‹ˆ๋‹ค.
120 animation CSS, CSS Animations, CSS Property, Reference
animation CSS ์†์„ฑ์€ ๋‹ค์ˆ˜์˜ ์Šคํƒ€์ผ์„ ์ „ํ™˜ํ•˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค. animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state์˜ ๋‹จ์ถ• ์†์„ฑ์ž…๋‹ˆ๋‹ค.
121 animation-delay CSS, CSS Property, CSS animation, Reference
animation-delay CSS ์†์„ฑ์€ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์‹œ์ž‘ํ•  ์‹œ์ ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ์‹œ์ž‘ ์ฆ‰์‹œ, ์ž ์‹œ ํ›„์—, ๋˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์ผ๋ถ€ ์ง„ํ–‰ํ•œ ์‹œ์ ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
122 animation-direction CSS ์†์„ฑ, CSS ์• ๋‹ˆ๋ฉ”์ด์…˜
animation-direction CSS ์†์„ฑ์€ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์•ž์œผ๋กœ, ๋’ค๋กœ ๋˜๋Š” ์•ž๋’ค๋กœ ๋ฒˆ๊ฐˆ์•„ ์žฌ์ƒ๋˜์–ด์•ผํ•˜๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
123 animation-duration CSS ์• ๋‹ˆ๋ฉ”์ด์…˜
animation-duration CSS ์†์„ฑ์€ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ํ•œ ์‚ฌ์ดํด์„ ์™„๋ฃŒํ•˜๋Š” ๋ฐ ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
124 animation-fill-mode CSS ์†์„ฑ, CSS ์• ๋‹ˆ๋ฉ”์ด์…˜
animation-fill-mode CSS ์†์„ฑ์€ CSS ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์‹คํ–‰ ์ „๊ณผ ํ›„์— ๋Œ€์ƒ์— ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
125 animation-name
animation-name CSS ์†์„ฑ์€ ํ•˜๋‚˜ ๋˜๋Š” ํ•˜๋‚˜ ์ด์ƒ์˜ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์‹คํ–‰๋  ์š”์†Œ๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. Each name is an @keyframes at-rule that sets the property values for the animation sequence.
126 background CSS, CSS Background, CSS Property, Reference
background CSS ๋‹จ์ถ• ์†์„ฑ์€ ์ƒ‰์ƒ, ์ด๋ฏธ์ง€, ์›์ , ํฌ๊ธฐ, ๋ฐ˜๋ณต ๋“ฑ ์—ฌ๋Ÿฌ ๋ฐฐ๊ฒฝ ์Šคํƒ€์ผ์„ ํ•œ ๋ฒˆ์— ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
127 background-color CSS, CSS Background, CSS Property, Graphics, HTML Colors, HTML Styles, Layout, Reference, Styles, Styling HTML
background-color CSS ์†์„ฑ์€ ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ƒ‰์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
128 background-image CSS, CSS Background, CSS Property, Reference
background-image CSS ์†์„ฑ์€ ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ํ•œ ๊ฐœ๋‚˜ ์—ฌ๋Ÿฌ ๊ฐœ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
129 border CSS, CSS Borders, CSS Property, Layout, Reference
border CSS ๋‹จ์ถ• ์†์„ฑ์€ ์š”์†Œ์˜ ํ…Œ๋‘๋ฆฌ๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.border-width, border-style,border-color์˜ ๊ฐ’์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
130 border-bottom CSS, CSS Borders, CSS Property, Reference, ํ…Œ๋‘๋ฆฌ
border-bottom CSS ๋‹จ์ถ• ์†์„ฑ์€ ์š”์†Œ์˜ ์•„๋ž˜์ชฝ ํ…Œ๋‘๋ฆฌ๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
131 border-bottom-color CSS, CSS Borders, CSS Property, Reference
border-bottom-color CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์•„๋ž˜์ชฝ ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
132 border-bottom-style CSS, CSS Borders, CSS Property, Reference
border-bottom-style CSS ์†์„ฑ์€ ์š”์†Œ ํ…Œ๋‘๋ฆฌ์˜ ์•„๋ž˜์ชฝ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
133 border-bottom-width CSS, CSS Borders, CSS Property, Reference
border-bottom-width CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์•„๋ž˜ ํ…Œ๋‘๋ฆฌ ๋„ˆ๋น„๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
134 border-collapse CSS, CSS Borders, CSS Property, CSS Tables, Reference
border-collapse CSS ์†์„ฑ์€ ํ‘œ ํ…Œ๋‘๋ฆฌ(border)๊ฐ€ ๋ถ„๋ฆฌ(separated) ๋˜๋Š” ์ƒ์‡„(collapsed)๋  ์ง€๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค. ๋ถ„๋ฆฌ ๋ชจ๋ธ์—์„œ๋Š”, ์ธ์ ‘ํ•œ ์…€์€ ๊ฐ๊ฐ ์ž์‹ ์˜ ๊ณ ์œ (distinct) ํ…Œ๋‘๋ฆฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒ์‡„ ๋ชจ๋ธ์—์„œ๋Š”, ์ธ์ ‘ํ•œ ํ‘œ ์…€์€ ํ…Œ๋‘๋ฆฌ๋ฅผ ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค.
135 border-color CSS, CSS Borders, CSS Property, Reference
border-color CSS ๋‹จ์ถ• ์†์„ฑ์€ ๋ชจ๋“  ๋ฉด์˜ ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
136 border-image CSS, CSS Borders, CSS Property, Reference
border-image CSS ์†์„ฑ์€ ์š”์†Œ border-style์˜ ์ž๋ฆฌ์— ์ด๋ฏธ์ง€๋ฅผ ๊ทธ๋ฆฝ๋‹ˆ๋‹ค.
137 border-image-outset CSS, CSS Borders, CSS Property, Reference
border-image-outset CSS ์†์„ฑ์€ ์š”์†Œ์˜ ํ…Œ๋‘๋ฆฌ ์ƒ์ž์™€ ํ…Œ๋‘๋ฆฌ ์ด๋ฏธ์ง€์˜ ๊ฑฐ๋ฆฌ๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
138 border-image-repeat CSS, CSS Borders, CSS Property, Reference
border-image-repeat CSS ์†์„ฑ์€ ์›๋ณธ ์ด๋ฏธ์ง€์˜ ๋ชจ์„œ๋ฆฌ ์˜์—ญ์„ ์š”์†Œ์˜ ํ…Œ๋‘๋ฆฌ ์ด๋ฏธ์ง€ ํฌ๊ธฐ์— ๋งž์ถฐ ์กฐ์ ˆํ•  ๋•Œ ์‚ฌ์šฉํ•  ๋ฐฉ๋ฒ•์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
139 border-image-slice CSS, CSS Borders, CSS Property, Reference
border-image-slice CSS ์†์„ฑ์€ border-image-source๋กœ ์„ค์ •ํ•œ ์ด๋ฏธ์ง€๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์˜์—ญ์œผ๋กœ ๋‚˜๋ˆ•๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋‚˜๋ˆ ์ง„ ์˜์—ญ์ด ์š”์†Œ์˜ ํ…Œ๋‘๋ฆฌ ์ด๋ฏธ์ง€๋ฅผ ์ด๋ฃน๋‹ˆ๋‹ค.
140 border-image-source CSS, CSS Borders, CSS Property, Reference
border-image-source CSS ์†์„ฑ์€ ์š”์†Œ์˜ ํ…Œ๋‘๋ฆฌ ์ด๋ฏธ์ง€๋กœ ์‚ฌ์šฉํ•  ์›๋ณธ ์ด๋ฏธ์ง€๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
141 border-image-width CSS, CSS Borders, CSS Property, Reference
border-image-width CSS ์†์„ฑ์€ ์š”์†Œ ํ…Œ๋‘๋ฆฌ ์ด๋ฏธ์ง€์˜ ๋„ˆ๋น„๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
142 border-left CSS, CSS Borders, CSS Property, Reference, ํ…Œ๋‘๋ฆฌ
border-left CSS ๋‹จ์ถ• ์†์„ฑ์€ ์š”์†Œ์˜ ์™ผ์ชฝ ํ…Œ๋‘๋ฆฌ๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
143 border-left-color CSS, CSS Borders, CSS Property, Reference
border-left-color CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์™ผ์ชฝ ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
144 border-left-style CSS, CSS Borders, CSS Property, Reference
border-left-style CSS ์†์„ฑ์€ ์š”์†Œ ํ…Œ๋‘๋ฆฌ์˜ ์™ผ์ชฝ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
145 border-left-width CSS, CSS Borders, CSS Property, Reference
border-left-width CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์™ผ์ชฝ ํ…Œ๋‘๋ฆฌ ๋„ˆ๋น„๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
146 border-radius CSS, CSS Property, Reference
border-radius CSS ์†์„ฑ์€ ์š”์†Œ์˜ ํ…Œ๋‘๋ฆฌ๋ฅผ ๋‘ฅ๊ธ€๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ํ•˜๋‚˜์˜ ๊ฐ’์„ ์‚ฌ์šฉํ•ด ์›ํ˜• ๋ชจ์„œ๋ฆฌ๋ฅผ, ๋‘ ๊ฐœ์˜ ๊ฐ’์„ ์‚ฌ์šฉํ•ด ํƒ€์›ํ˜• ๋ชจ์„œ๋ฆฌ๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
147 border-right CSS, CSS Borders, CSS Property, Reference, ํ…Œ๋‘๋ฆฌ
border-right CSS ๋‹จ์ถ• ์†์„ฑ์€ ์š”์†Œ์˜ ์˜ค๋ฅธ์ชฝ ํ…Œ๋‘๋ฆฌ๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
148 border-right-color CSS, CSS Borders, CSS Property, Reference
border-right-color CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์˜ค๋ฅธ์ชฝ ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
149 border-right-style CSS, CSS Borders, CSS Property, Reference
border-right-style CSS ์†์„ฑ์€ ์š”์†Œ ํ…Œ๋‘๋ฆฌ์˜ ์˜ค๋ฅธ์ชฝ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
150 border-right-width CSS, CSS Borders, CSS Property, Reference
border-right-width CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์˜ค๋ฅธ์ชฝ ํ…Œ๋‘๋ฆฌ ๋„ˆ๋น„๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
151 border-spacing CSS, CSS Property, CSS Tables, Reference
border-spacing CSS ์†์„ฑ(property)์€ ์ธ์ ‘ํ•œ ํ‘œ ์…€์˜ ํ…Œ๋‘๋ฆฌ ๊ฐ„ ๊ฐ„๊ฒฉ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค (๋ถ„๋ฆฌ ํ…Œ๋‘๋ฆฌ ๋ชจ๋ธ๋งŒ์„ ์œ„ํ•œ). ์ด๋Š” ํ”„๋ฆฌ์  ํ…Œ์ด์…˜ HTML์—์„œ cellspacing attribute์— ํ•ด๋‹นํ•˜์ง€๋งŒ ์„ ํƒ ์‚ฌํ•ญ์ธ ๋‘ ๋ฒˆ์งธ ๊ฐ’์€ ์„œ๋กœ ๋‹ค๋ฅธ ๊ฐ€๋กœ ๋ฐ ์„ธ๋กœ ๊ฐ„๊ฒฉ์„ ์„ค์ •ํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
152 border-style CSS, CSS Borders, CSS Property, Reference
border-style CSS ๋‹จ์ถ• ์†์„ฑ์€ ์š”์†Œ ํ…Œ๋‘๋ฆฌ ๋„ค ๋ฉด์˜ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
153 border-top CSS, CSS Borders, CSS Property, Reference, ํ…Œ๋‘๋ฆฌ
border-top CSS ๋‹จ์ถ• ์†์„ฑ์€ ์š”์†Œ์˜ ์œ„์ชฝ ํ…Œ๋‘๋ฆฌ๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
154 border-top-color CSS, CSS Borders, CSS Property, Reference
border-top-color CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์œ„์ชฝ ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
155 border-top-style CSS, CSS Borders, CSS Property, Reference
border-top-style CSS ์†์„ฑ์€ ์š”์†Œ ํ…Œ๋‘๋ฆฌ์˜ ์œ„์ชฝ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
156 border-top-width CSS, CSS Borders, CSS Property, Reference
border-top-width CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์œ„์ชฝ ํ…Œ๋‘๋ฆฌ ๋„ˆ๋น„๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
157 border-width CSS, CSS Borders, CSS Property, Reference
border-width CSS ๋‹จ์ถ• ์†์„ฑ์€ ์š”์†Œ ๋„ค ๋ฉด ํ…Œ๋‘๋ฆฌ์˜ ๋„ˆ๋น„๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
158 box-shadow CSS, CSS Property, CSS Styles, Reference
box-shadow CSS ์†์„ฑ์€ ์š”์†Œ์˜ ํ…Œ๋‘๋ฆฌ๋ฅผ ๊ฐ์‹ผ ๊ทธ๋ฆผ์ž ํšจ๊ณผ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์‰ผํ‘œ๋กœ ๊ตฌ๋ฌธํ•ด์„œ ์—ฌ๋Ÿฌ ๊ทธ๋ฆผ์ž ํšจ๊ณผ๋ฅผ ์ž…ํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฐ•์Šค ๊ทธ๋ฆผ์ž๋Š” ์š”์†Œ์—์„œ์˜ ์ˆ˜ํ‰์ˆ˜์ง ๊ฑฐ๋ฆฌ(์˜คํ”„์…‹), ํ๋ฆฟํ•จ๊ณผ ํ™•์‚ฐ ์ •๋„, ์ƒ‰์ƒ์œผ๋กœ ์ด๋ฃจ์–ด์ง‘๋‹ˆ๋‹ค.
159 box-sizing CSS, CSS Property, Reference
box-sizing CSS ์†์„ฑ์€ ์š”์†Œ์˜ ๋„ˆ๋น„์™€ ๋†’์ด๋ฅผ ๊ณ„์‚ฐํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
160 calc() CSS, CSS Function, Layout, Reference, Web
calc() CSS ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด CSS ์†์„ฑ์˜ ๊ฐ’์œผ๋กœ ๊ณ„์‚ฐ์‹์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
161 clear CSS, CSS Positioning, CSS Property, Reference
clear CSS ์†์„ฑ์€ ์š”์†Œ๊ฐ€ ์„ ํ–‰ ๋ถ€๋™(floating) ์š”์†Œ ๋‹ค์Œ์ผ ์ˆ˜ ์žˆ๋Š”์ง€ ๋˜๋Š” ๊ทธ ์•„๋ž˜๋กœ ๋‚ด๋ ค๊ฐ€(ํ•ด์ œ๋˜์–ด(cleared))์•ผ ํ•˜๋Š” ์ง€๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. clear ์†์„ฑ์€ ๋ถ€๋™ ๋ฐ ๋น„๋ถ€๋™ ์š”์†Œ ๋ชจ๋‘์— ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.
162 color CSS, CSS Colors, CSS Property, CSS Text, Layout, Reference, Web, ์ƒ‰
color CSS ์†์„ฑ์€ ์š”์†Œ์˜ ๊ธ€์”จ ๋ฐ ๊ธ€์”จ ์žฅ์‹์˜ ์ „๊ฒฝ์ƒ‰๊ณผ currentcolor์˜ ๊ฐ’์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
163 cursor CSS, CSS Property, Reference, Web
cursor CSS ์†์„ฑ์€ ์š”์†Œ ์œ„์— ๋งˆ์šฐ์Šค ์ปค์„œ๊ฐ€ ์˜ฌ๋ผ๊ฐ”์„ ๋•Œ ๋ณด์—ฌ์ค„ ๋ชจ์–‘์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
164 cursor ์†์„ฑ๊ฐ’์— URL ์‚ฌ์šฉ CSS, CSS_2.1, Cross-browser_Development, Web Development
Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0)์€ URL ๊ฐ’์„ CSS2 ์ปค์„œ ์†์„ฑ๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธฐ๋Šฅ์€ ๋งˆ์šฐ์Šค ์ปค์„œ ๋ชจ์–‘์œผ๋กœ ์ž„์˜์˜ ์ด๋ฏธ์ง€ ๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค โ€” Gecko๊ฐ€ ์ง€์›ํ•˜๋Š” ๋ชจ๋“  ์ด๋ฏธ์ง€ ํฌ๋งท์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
165 display CSS, CSS Display, CSS Property, Reference, display
display CSS property๋Š” element์˜ display type์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋ฐ•์Šค๋ฅผ ์–ด๋–ป๊ฒŒ ์ƒ์„ฑํ•  ๊ฒƒ์ธ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ๋‘๊ฐ€์ง€ ๊ธฐ๋ณธ ์†์„ฑ์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. outer display type์€ flow layout ์ƒ์—์„œ ์–ด๋–ป๊ฒŒ ์ ์šฉ๋  ๊ฒƒ์ธ์ง€, inner display type ์€ ๋ฐ•์Šค ์•ˆ์˜ child elements๋ฅผ ์–ด๋–ป๊ฒŒ ๋ฐฐ์น˜ํ•  ๊ฒƒ์ธ์ง€ ์ •ํ•ฉ๋‹ˆ๋‹ค.
166 filter CSS, CSS Property, Reference, SVG, SVG Filter
filter CSS ์†์„ฑ์€ ํ๋ฆผ ํšจ๊ณผ๋‚˜ ์ƒ‰์ƒ ๋ณ€ํ˜• ๋“ฑ ๊ทธ๋ž˜ํ”ฝ ํšจ๊ณผ๋ฅผ ์š”์†Œ์— ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.
167 flex CSS, CSS Flexible Boxes, CSS Property, Reference
flex CSS ์†์„ฑ์€ ํ•˜๋‚˜์˜ ํ”Œ๋ ‰์Šค ์•„์ดํ…œ์ด ์ž์‹ ์˜ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์— ๋งž์ถ”๊ธฐ ์œ„ํ•ด ํฌ๊ธฐ๋ฅผ ํ‚ค์šฐ๊ฑฐ๋‚˜ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•์„ ์„ค์ •ํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค.
168 flex-basis CSS, CSS Flexible Boxes, CSS Property, Reference
flex-basis CSS ์†์„ฑ์€ ํ”Œ๋ ‰์Šค ์•„์ดํ…œ์˜ ์ดˆ๊ธฐ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. box-sizing์„ ๋”ฐ๋กœ ์ง€์ •ํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ์ฝ˜ํ…์ธ  ๋ฐ•์Šค์˜ ํฌ๊ธฐ๋ฅผ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.
169 flex-direction CSS, CSS Flexible Boxes, CSS Property, Reference
flex-direction CSS ์†์„ฑ์€ ํ”Œ๋ ‰์Šค ์ปจํ…Œ์ด๋„ˆ ๋‚ด์˜ ์•„์ดํ…œ์„ ๋ฐฐ์น˜ํ•  ๋•Œ ์‚ฌ์šฉํ•  ์ฃผ์ถ• ๋ฐ ๋ฐฉํ–ฅ(์ •๋ฐฉํ–ฅ, ์—ญ๋ฐฉํ–ฅ)์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
170 flex-flow CSS, CSS Flexible Boxes, CSS Property, Reference
flex-flow CSS ์†์„ฑ์€ flex-direction, flex-wrap ์†์„ฑ์˜ ๋‹จ์ถ• ์†์„ฑ์ž…๋‹ˆ๋‹ค.
171 flex-grow CSS, CSS Flexible Boxes, CSS Property, NeedsContent, Reference
flex-grow CSS property ๋Š” flex-item ์š”์†Œ๊ฐ€, flex-container ์š”์†Œ ๋‚ด๋ถ€์—์„œ ํ• ๋‹น ๊ฐ€๋Šฅํ•œ ๊ณต๊ฐ„์˜ ์ •๋„๋ฅผ ์„ ์–ธํ•ฉ๋‹ˆ๋‹ค. ๋งŒ์•ฝ ํ˜•์ œ ์š”์†Œ๋กœ ๋ Œ๋”๋ง ๋œ ๋ชจ๋“  flex-item ์š”์†Œ๋“ค์ด ๋™์ผํ•œ flex-grow ๊ฐ’์„ ๊ฐ–๋Š”๋‹ค๋ฉด, flex-container ๋‚ด๋ถ€์—์„œ ๋™์ผํ•œ ๊ณต๊ฐ„์„ ํ• ๋‹น๋ฐ›์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ flex-grow ๊ฐ’์œผ๋กœ ๋‹ค๋ฅธ ์†Œ์ˆ˜๊ฐ’์„ ์ง€์ •ํ•œ๋‹ค๋ฉด, ๊ทธ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๊ณต๊ฐ„๊ฐ’์„ ๋‚˜๋ˆ„์–ด ํ• ๋‹น๋ฐ›๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
172 flex-shrink CSS, CSS Flexible Boxes, CSS Property, NeedsContent, Reference
flex-shrink CSS property๋Š” flex-item ์š”์†Œ์˜ flex-shrink ๊ฐ’์„ ์„ค์ •ํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค. ๋งŒ์•ฝ flex-item ์š”์†Œ์˜ ํฌ๊ธฐ๊ฐ€ flex-container ์š”์†Œ์˜ ํฌ๊ธฐ๋ณด๋‹ค ํด ๋•Œ flex-shrink ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋Š”๋ฐ, ์„ค์ •๋œ ์ˆซ์ž๊ฐ’์— ๋”ฐ๋ผ flex-container ์š”์†Œ ๋‚ด๋ถ€์—์„œ flex-item ์š”์†Œ์˜ ํฌ๊ธฐ๊ฐ€ ์ถ•์†Œ๋ฉ๋‹ˆ๋‹ค.
173 flex-wrap CSS, CSS Flexible Boxes, CSS Property, Reference
CSS flex-wrap property๋Š” flex-item ์š”์†Œ๋“ค์ด ๊ฐ•์ œ๋กœ ํ•œ์ค„์— ๋ฐฐ์น˜๋˜๊ฒŒ ํ•  ๊ฒƒ์ธ์ง€, ๋˜๋Š” ๊ฐ€๋Šฅํ•œ ์˜์—ญ ๋‚ด์—์„œ ๋ฒ—์–ด๋‚˜์ง€ ์•Š๊ณ  ์—ฌ๋Ÿฌํ–‰์œผ๋กœ ๋‚˜๋ˆ„์–ด ํ‘œํ˜„ ํ•  ๊ฒƒ์ธ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค. ๋งŒ์•ฝ ์˜์—ญ ๋‚ด์—์„œ ๋ฒ—์–ด๋‚˜์ง€ ๋ชปํ•˜๊ฒŒ ์„ค์ •ํ•œ๋‹ค๋ฉด, ๋™์‹œ์— ์š”์†Œ์˜ ๋ฐฉํ–ฅ ์ถ•์„ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
174 float CSS, CSS Positioning, CSS Property, Reference
CSS ์†์„ฑ(property) float ์€ ํ•œ ์š”์†Œ(element)๊ฐ€ ๋ณดํ†ต ํ๋ฆ„(normal flow)์œผ๋กœ๋ถ€ํ„ฐ ๋น ์ ธ ํ…์ŠคํŠธ ๋ฐ ์ธ๋ผ์ธ(inline) ์š”์†Œ๊ฐ€ ๊ทธ ์ฃผ์œ„๋ฅผ ๊ฐ์‹ธ๋Š” ์ž๊ธฐ ์ปจํ…Œ์ด๋„ˆ์˜ ์ขŒ์šฐ์ธก์„ ๋”ฐ๋ผ ๋ฐฐ์น˜๋˜์–ด์•ผ ํ•จ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
175 font CSS, CSS Fonts, CSS Property, Reference
font CSS ์†์„ฑ์€ font-style, font-variant, font-weight, font-size, line-height, font-family์˜ ๋‹จ์ถ• ์†์„ฑ์ž…๋‹ˆ๋‹ค. ์š”์†Œ์˜ ๊ธ€๊ผด์„ ์‹œ์Šคํ…œ ํฐํŠธ๋กœ ์„ค์ •ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
176 font-family CSS, CSS Fonts, CSS Property, Reference
CSS font-family ์†์„ฑ์€ ์„ ํƒ๋œ ์š”์†Œ์— ์šฐ์„  ์ˆœ์œ„๊ฐ€ ์ง€์ •๋œ font family ์ด๋ฆ„๊ณผ generic family ์ด๋ฆ„์„  ์ง€์ •ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค.
177 font-size
font-size CSS ์†์„ฑ์€ ํฐํŠธ์˜ ํฌ๊ธฐ(๋Œ€๋ฌธ์ž "M"์˜ ํฌ๊ธฐ)๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ํฐํŠธ ํฌ๊ธฐ๋ฅผ ๋ฐ”๊พธ๋ฉด em ๊ณผ ex <length> ๋‹จ์œ„๋กœ ๊ณ„์‚ฐ๋œ ๋‹ค๋ฅธ ํ•ญ๋ชฉ๋“ค์˜ ํฌ๊ธฐ๋ฅผ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค.
178 font-weight
font-weight CSS ์†์„ฑ์€ ํฐํŠธ(font)์˜ ๊ฐ€์ค‘์น˜(weight)๋‚˜ ๊ตต๊ธฐ(boldness)๋ฅผ ๋ช…์‹œํ•œ๋‹ค. ๋ช‡๋ช‡ ํฐํŠธ๋“ค์€ normal ๋‚˜ bold ์ผ ๋•Œ๋งŒ ๊ฐ€๋Šฅํ•˜๋‹ค.
179 grid CSS, CSS Grid, CSS Property, Reference
grid CSS ์†์„ฑ์€ shorthand property ์ž…๋‹ˆ๋‹ค. ์™ธ์žฌ์ ์ธ ์†์„ฑ์ธ (grid-template-rows, grid-template-columns, grid-template-areas), ๊ฐ’๊ณผ ๋‚ด์žฌ์ ์ธ ์†์„ฑ์ธ (grid-auto-rows, grid-auto-columns, grid-auto-flow), ๊ฐ’์„ ํ•œ๋ฒˆ์— ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
180 grid-area CSS, CSS Grid, CSS Property, Reference
grid-area ์†์„ฑ์€ grid-row-start, grid-column-start, grid-row-end and grid-column-end ๊ฐ’์„ ํ•œ๋ฒˆ์— ์„ค์ •ํ•˜๋Š” shorthand property ์ž…๋‹ˆ๋‹ค. ํ•ด๋‹น ์†์„ฑ๊ฐ’์€ grid item์˜ ํฌ๊ธฐ์™€ ์œ„์น˜๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค., specifying a grid itemโ€™s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
181 height CSS, CSS Property, Reference
height CSS ์†์„ฑ์€ ์š”์†Œ์˜ ๋†’์ด๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ๊ฐ’์€ ์ฝ˜ํ…์ธ  ์˜์—ญ์˜ ๋†’์ด์ง€๋งŒ, box-sizing์ด border-box๋ผ๋ฉด ํ…Œ๋‘๋ฆฌ ์˜์—ญ์˜ ๋†’์ด๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
182 image-rendering CSS, CSS Images, CSS Property, Reference
image-rendering CSS ํ”„๋กœํผํ‹ฐ๋Š” ๋ธŒ๋ผ์šฐ์ €์˜ ์ด๋ฏธ์ง€ ์Šค์ผ€์ผ๋ง ๋ฐฉ์‹์— ๋Œ€ํ•œ ํžŒํŠธ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด ํ”„๋กœํผํ‹ฐ๋Š” ์—˜๋ฆฌ๋จผํŠธ ์ž์‹ ์—๊ฒŒ ์ ์šฉ์‹œํ‚ต๋‹ˆ๋‹ค. ์Šค์ผ€์ผ๋ง(ํฌ๊ธฐ๋ณ€๊ฒฝ)์ด ์•ˆ ๋œ ์ด๋ฏธ์ง€์—๊ฒŒ๋Š” ์ ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
183 inherit CSS, CSS Cascade, Layout, Reference, Web
inherit CSS ๊ฐ’์€ ์š”์†Œ๊ฐ€ ๋ถ€๋ชจ ์š”์†Œ๋กœ๋ถ€ํ„ฐ ์†์„ฑ(property)์˜ ๊ณ„์‚ฐ๊ฐ’(computed value)์„ ๊ฐ–๋„๋ก ์ง€์ •๋˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  CSS ์†์„ฑ์— ํ—ˆ์šฉ๋ฉ๋‹ˆ๋‹ค.
184 initial CSS, CSS Cascade, Layout, Reference, Web
initial CSS ํ‚ค์›Œ๋“œ๋Š” ์†์„ฑ์˜ ์ดˆ๊ธฐ๊ฐ’(initial value)์„ ์š”์†Œ์— ์ ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  CSS ์†์„ฑ์— ํ—ˆ์šฉ๋˜๊ณ  ์š”์†Œ๊ฐ€ ์†์„ฑ์˜ ์ดˆ๊ธฐ๊ฐ’์„ ์‚ฌ์šฉํ•˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.
185 letter-spacing CSS, CSS Property, CSS Text, Reference, ๊ธ€์ž ๊ฐ„๊ฒฉ
letter-spacing CSS ์†์„ฑ์€ ๊ธ€์ž ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์„ ์กฐ์ ˆํ•ฉ๋‹ˆ๋‹ค.
186 linear-gradient CSS, CSS Function, CSS Images, Graphics, Layout, Reference, Web, gradient
linear-gradient() CSS ํ•จ์ˆ˜๋Š” ๋‘ ๊ฐœ ์ด์ƒ์˜ ์ƒ‰์ด ์ง์„ ์„ ๋”ฐ๋ผ ์ ์ง„์ ์œผ๋กœ ๋ณ€ํ™”ํ•˜๋Š” ์ด๋ฏธ์ง€๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ํ•จ์ˆ˜์˜ ๊ฒฐ๊ณผ๋Š” <image>์˜ ํŠน๋ณ„ํ•œ ์ข…๋ฅ˜์ธ <gradient> ์ž๋ฃŒํ˜•์ž…๋‹ˆ๋‹ค.
187 margin CSS, CSS Property, Reference
margin CSS ์†์„ฑ์€ ์š”์†Œ์˜ ๋„ค ๋ฐฉํ–ฅ ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. margin-top, margin-right, margin-bottom, margin-left์˜ ๋‹จ์ถ• ์†์„ฑ์ž…๋‹ˆ๋‹ค.
188 margin-bottom CSS, CSS Property, Reference
margin-bottom CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์•„๋ž˜์ชฝ์— ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญmargin area์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ์–‘์ˆ˜ ๊ฐ’์€ ์ธ์ ‘ ์š”์†Œ์™€ ๊ฑฐ๋ฆฌ๋ฅผ ๋„“ํžˆ๊ณ , ์Œ์ˆ˜ ๊ฐ’์€ ๋” ์ขํž™๋‹ˆ๋‹ค.
189 margin-left CSS, CSS Property, Layout, Reference
margin-left CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์™ผ์ชฝ์— ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญmargin area์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ์–‘์ˆ˜ ๊ฐ’์€ ์ธ์ ‘ ์š”์†Œ์™€ ๊ฑฐ๋ฆฌ๋ฅผ ๋„“ํžˆ๊ณ , ์Œ์ˆ˜ ๊ฐ’์€ ๋” ์ขํž™๋‹ˆ๋‹ค.
190 margin-right CSS, CSS Property, Reference
margin-right CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์˜ค๋ฅธ์ชฝ์— ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญmargin area์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ์–‘์ˆ˜ ๊ฐ’์€ ์ธ์ ‘ ์š”์†Œ์™€ ๊ฑฐ๋ฆฌ๋ฅผ ๋„“ํžˆ๊ณ , ์Œ์ˆ˜ ๊ฐ’์€ ๋” ์ขํž™๋‹ˆ๋‹ค.
191 margin-top CSS, CSS Property, Reference
margin-top CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์œ„์ชฝ์— ๋ฐ”๊นฅ ์—ฌ๋ฐฑ ์˜์—ญmargin area์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ์–‘์ˆ˜ ๊ฐ’์€ ์ธ์ ‘ ์š”์†Œ์™€ ๊ฑฐ๋ฆฌ๋ฅผ ๋„“ํžˆ๊ณ , ์Œ์ˆ˜ ๊ฐ’์€ ๋” ์ขํž™๋‹ˆ๋‹ค.
192 mask CSS, CSS Property, Layout, Reference, SVG, Web
mask CSS ์†์„ฑ์€ ์•„์ดํ…œ์ด ๋ถ€๋ถ„์ ์œผ๋กœ๋งŒ ๋ณด์—ฌ์ง€๊ฒŒ ํ•˜๊ฑฐ๋‚˜ ํ˜น์€ ์™„์ „ํžˆ ๊ฐ€๋ ค์„œ ๋ณด์—ฌ์ง€์ง€ ์•Š๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์†์„ฑ์€ ๋งˆ์Šคํ‚น ํ˜น์€ ํŠน์ •ํ•œ ์ ์„ ๊ธฐ์ค€์œผ๋กœ ์ด๋ฏธ์ง€๋ฅผ ์ž˜๋ผ๋‚ด๋Š” ๊ธฐ๋Šฅ์„ ํ•จ๊ป˜ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
193 max-height CSS, CSS Property, Reference
max-height CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์ตœ๋Œ€ ๋†’์ด๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. max-height๋Š” height ์†์„ฑ์˜ ์‚ฌ์šฉ๊ฐ’์ด ์ž์‹ ์˜ ๊ฐ’๋ณด๋‹ค ์ปค์ง€๋Š”๊ฑธ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.
194 max-width CSS, CSS Property, Reference
max-width CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์ตœ๋Œ€ ๋„ˆ๋น„๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. max-width๋Š” width ์†์„ฑ์˜ ์‚ฌ์šฉ๊ฐ’์ด ์ž์‹ ์˜ ๊ฐ’๋ณด๋‹ค ์ปค์ง€๋Š”๊ฑธ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.
195 min-height CSS, CSS Property, Reference
max-height CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์ตœ์†Œ ๋†’์ด๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. min-height๋Š” height ์†์„ฑ์˜ ์‚ฌ์šฉ๊ฐ’์ด ์ž์‹ ์˜ ๊ฐ’๋ณด๋‹ค ์ž‘์•„์ง€๋Š”๊ฑธ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.
196 min-width CSS, CSS Property, Reference
min-width CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์ตœ์†Œ ๋„ˆ๋น„๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. min-width๋Š” width ์†์„ฑ์˜ ์‚ฌ์šฉ๊ฐ’์ด ์ž์‹ ์˜ ๊ฐ’๋ณด๋‹ค ์ž‘์•„์ง€๋Š”๊ฑธ ๋ฐฉ์ง€ํ•ฉ๋‹ˆ๋‹ค.
197 mix-blend-mode mix-blend-mode
mix-blend-mode CSS ์†์„ฑ์€, element ์˜ content ๊ฐ€ ์–ด๋–ป๊ฒŒ ๊ทธ element ์˜ ์ง์† ๋ถ€๋ชจ content ์™€ element ์˜ background ์— blend (ํ˜ผํ•ฉ)๋˜์–ด์•ผ ํ•˜๋Š”์ง€ ์„œ์ˆ ํ•œ๋‹ค.
198 opacity CSS, CSS Property, Reference, ์ƒ‰
opacity CSS ์†์„ฑ์€ ์š”์†Œ์˜ ๋ถˆํˆฌ๋ช…๋„๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
199 order CSS, CSS Flexible Boxes, CSS Property, Reference
order CSS ์†์„ฑ์€ flex-container/grid-container ์š”์†Œ ๋‚ด๋ถ€์— ์กด์žฌํ•˜๋Š” flex-item/grid-item ์š”์†Œ์˜ ๋ฐฐ์น˜ ์ˆœ์„œ๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค. ํ˜•์ œ ์š”์†Œ๋กœ ๋ Œ๋”๋ง ๋œ -item ์š”์†Œ๋“ค์€ ๊ธฐ๋ณธ์ ์œผ๋กœ order ๊ฐ’์„ ๊ธฐ์ค€์œผ๋กœํ•˜์—ฌ ์˜ค๋ฆ„์ฐจ์ˆœ์œผ๋กœ ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค. ๋งŒ์•ฝ, order ์†์„ฑ์˜ ๊ฐ’์ด ๋™์ผํ•œ -item ์š”์†Œ์ผ ๊ฒฝ์šฐ, ์†Œ์Šค์ฝ”๋“œ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ˆœ์„œ๊ฐ€ ์ •ํ•ด์ง‘๋‹ˆ๋‹ค.
200 overflow CSS, CSS Box Model, CSS Property, Layout, Reference
overflow CSS ์†์„ฑ์€ ๊ทธ๊ฒƒ์˜ ๋ธ”๋ก ๋ ˆ๋ฒจ ์ปจํ…Œ์ด๋„ˆ(block-level container)๋ณด๋‹ค ๋‚ด์šฉ(content)์ด ๋„ˆ๋ฌด ํด ๋•Œ(์ฆ‰, ๋‚ด์šฉ์„ ๊ฐ์‹ธ๊ณ  ์žˆ๋Š” ์˜์—ญ๋ณด๋‹ค ์ปค์กŒ์„ ๋•Œ), ๋‚ด์šฉ์„ ์ž˜๋ผ๋‚ผ ์ง€, ์Šคํฌ๋กค ๋ฐ”๋ฅผ ๋ณด์—ฌ์ค„ ์ง€, ํ˜น์€ ๋ฒ”์œ„๋ฅผ ๋„˜์–ด๊ฐ€๊ฒŒ ๋ณด์—ฌ์ค„ ์ง€๋ฅผ ๊ธฐ์ˆ ํ•ฉ๋‹ˆ๋‹ค.
201 overflow-wrap CSS, CSS Property, CSS Text, Reference
overflow-wrap CSS ์š”์†Œ๋Š” ์–ด๋–ค ๋ฌธ์ž๊ฐ€ ๋‚ด์šฉ ์นธ ๋ฐ–์œผ๋กœ ๋„˜์น˜์ง€ ์•Š๊ฒŒ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋‹จ์–ด ๋งˆ๋”” ์•ˆ์— ์ค„์„ ๋ฐ”๊ฟ”์•ผ ํ•  ๊ฒƒ์ธ์ง€ ์•„๋‹Œ์ง€๋ฅผ ์ •ํ•  ๋•Œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
202 padding CSS, CSS Padding, CSS Property, Reference
padding CSS ์†์„ฑ์€ ์š”์†Œ์˜ ๋„ค ๋ฐฉํ–ฅ ์•ˆ์ชฝ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. padding-top, padding-right, padding-bottom, padding-left์˜ ๋‹จ์ถ• ์†์„ฑ์ž…๋‹ˆ๋‹ค.
203 padding-bottom CSS, CSS Padding, CSS Property, Reference
padding-bottom CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์•„๋ž˜์ชฝ์— ์•ˆ์ชฝ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
204 padding-left CSS, CSS Padding, CSS Property, Reference
padding-left CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์™ผ์ชฝ์— ์•ˆ์ชฝ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
205 padding-right CSS, CSS Padding, CSS Property, Reference
padding-right CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์˜ค๋ฅธ์ชฝ์— ์•ˆ์ชฝ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
206 padding-top CSS, CSS Padding, CSS Property, Reference
padding-top CSS ์†์„ฑ์€ ์š”์†Œ์˜ ์œ„์ชฝ์— ์•ˆ์ชฝ ์—ฌ๋ฐฑ ์˜์—ญ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
207 pointer-events
pointer-events CSS ์†์„ฑ์€, ํŠน์ • ์—˜๋ฆฌ๋จผํŠธ์˜ ํŠธ๋ฆฌ๊ฑฐ ์—ญํ• ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. '์‹œ๊ฐ์ '์œผ๋กœ ํŠธ๋ฆฌ๊ฑฐ ์—ญํ• (hover, active)์„ ํ•˜๋Š” ๊ธฐ๋Šฅ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ๋“ฑ๋ก ๋œ ์ƒํƒœ์˜ ์—˜๋ฆฌ๋จผํŠธ์ผ์ง€๋ผ๋„ ์ด๋ฒคํŠธ ํŠธ๋ฆฌ๊ฑฐ๋กœ์„œ์˜ ์—ญํ• ์„ ๊ฐ•์ œ๋กœ ๋ง‰์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
208 position CSS, CSS Positioninng, CSS Property, Reference
position CSS ์†์„ฑ์€ ๋ฌธ์„œ ์ƒ์— ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. top, right, bottom,  left ์†์„ฑ์ด ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•  ์ตœ์ข… ์œ„์น˜๋ฅผ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค.
209 tab-size
tab-size CSS ์†์„ฑ์€ ํƒญ ๋ฌธ์ž(U+0009)์˜ ๋„ˆ๋น„๋ฅผ ์กฐ์ ˆํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
210 table-layout CSS, CSS Property, CSS Tables, Reference
table-layout CSS ์†์„ฑ์€ ํ…Œ์ด๋ธ” ์…€, ํ–‰, ์ปฌ๋Ÿผ๋“ฑ์˜ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ์•Œ๊ณ ๋ฆฌ์ฆ˜์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
211 text-decoration CSS, CSS Property, CSS Text Decoration, Reference
text-decoration CSS ๋‹จ์ถ• ์†์„ฑ์€ ๊ธ€์”จ์˜ ์žฅ์‹(์„ ) ์ƒ‰์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
212 text-shadow CSS, Reference
text-shadow CSS ์†์„ฑ์€ ํ…์ŠคํŠธ์— ๊ทธ๋ฆผ์ž(shadow)๋ฅผ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•œ ์†์„ฑ์ด๋‹ค. ์ฝค๋งˆ(,)๋กœ ๊ตฌ๋ถ„๋œ ๊ทธ๋ฆผ์ž ์„ค์ •์ •๋ณด ๋ฆฌ์ŠคํŠธ๊ฐ€ ํ…์ŠคํŠธ์™€ ์—˜๋ฆฌ๋จผํŠธ(element) text-decorations ์†์„ฑ์— ์ ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค.
213 transform
CSS์˜ transform ์†์„ฑ์„ ์‚ฌ์šฉํ•จ์œผ๋กœ์จ, CSS์˜ ์‹œ๊ฐ์  ์„œ์‹ ๋ชจ๋ธ(visual formatting model)์˜ ์ขŒํ‘œ ๊ณต๊ฐ„์„ ๋ณ€ํ˜•์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค. ํ•ด๋‹น ์†์„ฑ์— ์ง€์ •๋œ ๊ฐ’์— ๋”ฐ๋ผ ์—˜๋ฆฌ๋จผํŠธ(element)์— ์ด๋™(translate), ํšŒ์ „(rotate), ํฌ๊ธฐ๋ณ€๊ฒฝ(scale), ๊ธฐ์šธ์ž„(skew)๋“ฑ์˜ ํšจ๊ณผ๋ฅผ ์ค„ ์ˆ˜ ์žˆ๋‹ค.
214 transition
transition CSS ์†์„ฑ์€ transition-property, transition-duration, transition-timing-function ๊ณผ transition-delay๋ฅผ ์œ„ํ•œ ๋‹จ์ถ• ์†์„ฑ์ž…๋‹ˆ๋‹ค. ์ด ์†์„ฑ์œผ๋กœ ์—˜๋ฆฌ๋จผํŠธ์˜ ๋‘ ๊ฐ€์ง€ ์ƒํƒœ ์‚ฌ์ด์— ๋ณ€ํ™”๋ฅผ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—˜๋ฆฌ๋จผํŠธ์˜ ๊ฐ ์ƒํƒœ๋Š” ๊ฐ€์ƒ ํด๋ž˜์Šค ๋ฅผ ์‚ฌ์šฉํ•ด ์ •์˜๋œ :hover ์ด๋‚˜ :active ๋˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•ด ๋™์ ์œผ๋กœ ๋งŒ๋“ค์–ด์ง„ ๊ฒƒ๋“ค์ž…๋‹ˆ๋‹ค.
215 transition-delay
transition-delay CSS ์†์„ฑ์€ transition๋  ์†์„ฑ์ด transition ์š”์ฒญ์„ ๋ฐ›์€ ์ดํ›„ ์‹ค์ œ๋กœ transitionํ•˜๊ธฐ๊นŒ์ง€ ๊ธฐ๋‹ค๋ ค์•ผํ•˜๋Š” ์‹œ๊ฐ„์˜ ์–‘์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
216 unset CSS, CSS Cascade, Keyword, Layout, Reference, Web
unset CSS ํ‚ค์›Œ๋“œ๋Š” initial ๋ฐ inherit ํ‚ค์›Œ๋“œ์˜ ์กฐํ•ฉ(combination)์ž…๋‹ˆ๋‹ค. ์ด ๋‹ค๋ฅธ CSS ํ‚ค์›Œ๋“œ ๋‘˜์ฒ˜๋Ÿผ, CSS ๋‹จ์ถ•(shorthand) ์†์„ฑ all ํฌํ•จ ๋ชจ๋“  CSS ์†์„ฑ์— ์ ์šฉ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ํ‚ค์›Œ๋“œ๋Š” ์†์„ฑ์„ ๋ถ€๋ชจ๋กœ๋ถ€ํ„ฐ ์ƒ์†๋ฐ›์€ ๊ฒฝ์šฐ ๊ทธ ์ƒ์†๊ฐ’์œผ๋กœ ์•„๋‹ˆ๋ฉด ์ดˆ๊ธฐ๊ฐ’์œผ๋กœ ์žฌ์„ค์ •(reset)ํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์‹œ ๋งํ•ด์„œ, ์ฒซ ๋ฒˆ์งธ๋Š” inherit ํ‚ค์›Œ๋“œ์ฒ˜๋Ÿผ ๋‘ ๋ฒˆ์งธ๋Š” initial ํ‚ค์›Œ๋“œ์ฒ˜๋Ÿผ ํ–‰๋™ํ•ฉ๋‹ˆ๋‹ค.
217 vertical-align CSS, CSS Property, Reference
vertical-align CSS ์†์„ฑ์€ inline ๋˜๋Š” table-cell box์—์„œ์˜ ์ˆ˜์ง ์ •๋ ฌ์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค.
218 visibility CSS, CSS Box Model, CSS Property, Layout, Reference, Web
visibility CSS ์†์„ฑ์€ ๋ฌธ์„œ์˜ ๋ ˆ์ด์•„์›ƒ์„ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๊ณ  ์š”์†Œ๋ฅผ ๋ณด์ด๊ฑฐ๋‚˜ ์ˆจ๊น๋‹ˆ๋‹ค.
219 white-space
white-space ์†์„ฑ์€ ์–ด๋–ค ์š”์†Œ(element) ์•ˆ์˜ ๊ณต๋ฐฑ(whitespace)์ด ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌ๋ ์ง€๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š”๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
220 width CSS, CSS Property, Reference
width CSS ์†์„ฑ์€ ์š”์†Œ์˜ ๋„ˆ๋น„๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ๊ฐ’์€ ์ฝ˜ํ…์ธ  ์˜์—ญ์˜ ๋„ˆ๋น„์ด์ง€๋งŒ, box-sizing์ด border-box๋ผ๋ฉด ํ…Œ๋‘๋ฆฌ ์˜์—ญ์˜ ๋„ˆ๋น„๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
221 will-change
will-change CSS ์†์„ฑ์€ ์š”์†Œ์— ์˜ˆ์ƒ๋˜๋Š” ๋ณ€ํ™”์˜ ์ข…๋ฅ˜์— ๊ด€ํ•œ ํžŒํŠธ๋ฅผ ๋ธŒ๋ผ์šฐ์ €์— ์ œ๊ณต์ผ€ ํ•œ๋‹ค.  ๊ทธ๋ž˜์„œ ์‹ค์ œ ์š”์†Œ๊ฐ€ ๋ณ€ํ™”๋˜๊ธฐ ์ „์— ๋ฏธ๋ฆฌ ๋ธŒ๋ผ์šฐ์ €๋Š” ์ ์ ˆํ•˜๊ฒŒ ์ตœ์ ํ™”ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ข…๋ฅ˜์˜ ์ตœ์ ํ™”๋Š” ์ž ์žฌ์ ์œผ๋กœ ์„ฑ๋Šฅ ๋น„์šฉ์ด ํฐ ์ž‘์—…์„ ๊ทธ๊ฒƒ์ด ์‹ค์ œ๋กœ ์š”๊ตฌ๋˜๊ธฐ ์ „์— ๋ฏธ๋ฆฌ ์‹คํ–‰ํ•จ์œผ๋กœ์จ ํŽ˜์ด์ง€์˜ ๋ฐ˜์‘์„ฑ์„ ์ฆ๊ฐ€์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.
222 word-break
word-break CSS ์š”์†Œ๋Š” ๋ฌธ์ž๊ฐ€ ๋‚ด์šฉ ๋ฐ–์œผ๋กœ ๋ฒ—์–ด๋‚  ๊ฒฝ์šฐ, ์ด๋ฅผ ์ค„๋ฐ”๊ฟˆํ•  ๊ฒƒ์ธ์ง€์— ๋Œ€ํ•œ ์—ฌ๋ถ€๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
223 z-index
z-index CSS ์†์„ฑ์€ ์—˜๋ฆฌ๋จผํŠธ์™€ ๊ทธ ์—˜๋ฆฌ๋จผํŠธ์˜ ์ž์† ์—˜๋ฆฌ๋จผํŠธ๋“ค์˜ z์ถ• ์ˆœ์„œ๋ฅผ ์ง€์ •ํ•œ๋‹ค. ์—˜๋ฆฌ๋จผํŠธ๋“ค์ด ๊ฒน์ณ์กŒ์„ ๋•Œ z์ถ• ์ˆœ์„œ์— ๋”ฐ๋ผ ์–ด๋–ค ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ์œ„์— ์˜ฌ์ง€ ๊ฒฐ์ •๋œ๋‹ค. z-index๊ฐ€ ๋†’์€ ์—˜๋ฆฌ๋จผํŠธ๋Š” ๋‚ฎ์€ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋ฎ๋Š”๋‹ค.
224 ๊ฐ€์ƒ ์š”์†Œ Beginner, CSS, CSS Reference, Selectors
๊ฐ€์ƒ ํด๋ž˜์Šค(pseudo-classes)์ฒ˜๋Ÿผ, ๊ฐ€์ƒ ์š”์†Œ(pseudo-element)๋Š” ์„ ํƒ์ž(selector)์— ์ถ”๊ฐ€๋˜์ง€๋งŒ ํŠน๋ณ„ํ•œ ์ƒํƒœ๋ฅผ ๊ธฐ์ˆ ํ•˜๋Š” ๋Œ€์‹ , ๋ฌธ์„œ์˜ ํŠน์ • ๋ถ€๋ถ„์„ ์Šคํƒ€์ผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ::first-line ๊ฐ€์ƒ ์š”์†Œ๋Š” ์„ ํƒ์ž์— ์˜ํ•ด ์ง€์ •๋œ ์š”์†Œ์˜ ์ฒซ ์ค„๋งŒ์„ ๋Œ€์ƒ์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค.
225 ๊ฐ€์ƒ ํด๋ž˜์Šค CSS, CSS Reference, Intermediate, Selectors
CSS pseudo-class ๋Š” ์„ ํƒ๋  ์š”์†Œ(element)์˜ ํŠน๋ณ„ํ•œ ์ƒํƒœ๋ฅผ ์ง€์ •ํ•˜๋Š” ์„ ํƒ์ž(selector)์— ์ถ”๊ฐ€๋œ ํ‚ค์›Œ๋“œ์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด :hover๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์„ ํƒ์ž์— ์˜ํ•ด ์ง€์ •๋œ ์š”์†Œ ์œ„๋ฅผ ๋งด๋Œ(hover) ๋•Œ ์Šคํƒ€์ผ์„ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.
226 ๊ฒฐ์ •๊ฐ’ CSS, Reference
CSS ์†์„ฑ์˜ ๊ฒฐ์ •๊ฐ’์€ getComputedStyle()์ด ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฐ’์ž…๋‹ˆ๋‹ค.
227 ๊ณ„์‚ฐ๊ฐ’ CSS, Reference
CSS ์†์„ฑ์˜ ๊ณ„์‚ฐ๊ฐ’์€ ์•„๋ž˜ ๋ฐฉ์‹์œผ๋กœ ์ง€์ •๊ฐ’(specified value)์—์„œ ๊ณ„์‚ฐ๋ฉ๋‹ˆ๋‹ค.
228 ๊ณตํ†ต๋œ CSS ์งˆ๋ฌธ๋“ค
Browsers use the DOCTYPE declaration to choose whether to show the document using a mode that is more compatible  with Web standards or with old browser bugs. Using a correct and modern DOCTYPE declaration at the start of your HTML will improve browser standards compliance.
229 ๊ตฌ๋ฌธ Beginner, CSS, Guide, Web
์ข…์†ํ˜• ์Šคํƒ€์ผ ์‹œํŠธ(CSS) ์–ธ์–ด์˜ ๊ธฐ๋ณธ ๋ชฉํ‘œ๋Š” ๋ธŒ๋ผ์šฐ์ € ์—”์ง„์ด ์ƒ‰์ƒ, ์œ„์น˜ ์ง€์ • ๋˜๋Š” ์žฅ์‹๊ณผ ๊ฐ™์€ ํŠน์ • ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜์—ฌ ํŽ˜์ด์ง€์— ์š”์†Œ๋ฅผ ๊ทธ๋ฆด ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
230 ๋‹จ์ถ• ์†์„ฑ CSS, Guide, Layout, Reference, Web
๋‹จ์ถ• ์†์„ฑ์€ ๋™์‹œ์— ์—ฌ๋Ÿฌ ๋‹ค๋ฅธ CSS ์†์„ฑ๊ฐ’์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋Š” CSS ์†์„ฑ์ž…๋‹ˆ๋‹ค. ๋‹จ์ถ• ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋ฉด ์›น ๊ฐœ๋ฐœ์ž์˜ ์‹œ๊ฐ„๊ณผ ์—๋„ˆ์ง€๋ฅผ ์ ˆ์•ฝํ•˜๋Š” ๊ฐ„๊ฒฐํ•œ(์ฝ๊ธฐ๋„ ์ข‹์€) ์Šคํƒ€์ผ ์‹œํŠธ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
231 ๋ ˆ์ด์•„์›ƒ ๋ชจ๋“œ CSS
CSS ๋ ˆ์ด์•„์›ƒ ๋ชจ๋“œ(layout mode, ๊ฐ€๋” layout์œผ๋กœ ์ค„์—ฌ ์”€)๋Š” ํ˜•์ œ(sibling) ๋ฐ ์กฐ์ƒ(ancestor) ๋ฐ•์Šค์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜๋Š” ๋ฐฉ์‹์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ฐ•์Šค์˜ ์œ„์น˜์™€ ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์•Œ๊ณ ๋ฆฌ์ฆ˜์ž…๋‹ˆ๋‹ค. ๊ทธ ์ค‘ ๋ช‡ ๊ฐ€์ง€์ž…๋‹ˆ๋‹ค:
232 ๋ช…์‹œ๋„ CSS, Example, Guide, Reference, Web
๋ช…์‹œ๋„๋ž€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์–ด๋Š ์š”์†Œ์™€ ๊ฐ€์žฅ ์—ฐ๊ด€๋œ ์†์„ฑ์„ ์ฐพ๋Š” ์ˆ˜๋‹จ์œผ๋กœ, ์ด๋ ‡๊ฒŒ ์ฐพ์€ ์†์„ฑ์ด ํ•ด๋‹น ์š”์†Œ์— ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋ช…์‹œ๋„๋Š” ์—ฌ๋Ÿฌ ์ข…๋ฅ˜์˜ CSS ์„ ํƒ์ž๋กœ ๊ตฌ์„ฑ๋œ ์ผ์น˜ ๊ทœ์น™์— ๊ธฐ๋ฐ˜ํ•ฉ๋‹ˆ๋‹ค.
233 ์‚ฌ์šฉ๊ฐ’ CSS, Reference
CSS ์†์„ฑ์˜ ์‚ฌ์šฉ๊ฐ’์€ ๊ณ„์‚ฐ๊ฐ’์— ๋ชจ๋“  ๊ณ„์‚ฐ์„ ์ˆ˜ํ–‰ํ•œ ํ›„์˜ ๊ฒฐ๊ณผ ๊ฐ’์ž…๋‹ˆ๋‹ค.
234 ์‚ฌ์šฉ์ž ์ •์˜ CSS ์†์„ฑ ์‚ฌ์šฉํ•˜๊ธฐ (๋ณ€์ˆ˜) CSS, Guide, Web
CSS ๋ณ€์ˆ˜๋Š” ๋ฌธ์„œ ์ „๋ฐ˜์ ์œผ๋กœ ์žฌ์‚ฌ์šฉํ•  ์–ด๋– ํ•œ ํŠน์ • ๊ฐ’์„ ํฌํ•จํ•˜๋Š”, CSS ์ž‘์„ฑ์ž๊ฐ€ ์ •์˜ํ•œ ์—”ํ„ฐํ‹ฐ์ด๋‹ค. ์ด ๋ณ€์ˆ˜๋Š” ์‚ฌ์šฉ์ž ์ •์˜ ์†์„ฑ ํ‘œ๊ธฐ๋ฒ• (์˜ˆ :--main-color: black;)์„ ์‚ฌ์šฉํ•˜์—ฌ ์„ค์ •๋˜๋ฉฐ var () ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜์—ฌ ์—‘์„ธ์Šคํ•  ์ˆ˜ ์žˆ๋‹ค. (์˜ˆ : color: var(--main-color);).
235 ์ƒ์† CSS, Guide, Inheritance, Layout, Web
MDN ๋‚ด ๊ฐ CSS ์†์„ฑ(property) ์ •์˜ ํŽ˜์ด์ง€์˜ ์š”์•ฝ์ ˆ์€ ๊ทธ ์†์„ฑ์ด ๊ธฐ๋ณธ(default)์œผ๋กœ ์ƒ์†๋˜๋Š”์ง€("Inherited: Yes") ํ˜น์€ ์ƒ์†๋˜์ง€ ์•Š๋Š”์ง€("Inherited: no") ์“ฐ์—ฌ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์ƒ์† ์—ฌ๋ถ€๋Š” ์š”์†Œ์˜ ์†์„ฑ์— ์–ด๋–ค ๊ฐ’์ด ์ง€์ •๋˜์ง€ ์•Š์„ ๋•Œ ์ผ์–ด๋‚˜๋Š” ์ผ์„ ์ œ์–ดํ•ฉ๋‹ˆ๋‹ค.
236 ์†์„ฑ ์„ ํƒ์ž CSS, Reference, Selectors
CSS ์†์„ฑ ์„ ํƒ์ž ๋Š” ์š”์†Œ์˜ ์ฃผ์–ด์ง„ ์†์„ฑ์˜ ์กด์žฌ ์—ฌ๋ถ€๋‚˜ ๊ทธ ๊ฐ’์„ ํŒ๋ณ„ํ•ด ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
237 ์‹ค์ œ๊ฐ’ CSS, Reference
CSS ์†์„ฑ์˜ ์‹ค์ œ๊ฐ’์€ ๋ชจ๋“  ๊ทผ์‚ฌ์น˜(approximation)๊ฐ€ ์ ์šฉ๋œ ๋’ค์˜ ์‚ฌ์šฉ๊ฐ’์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ์‚ฌ์šฉ์ž ์—์ด์ „ํŠธ๋Š” ์˜ค์ง ์ •์ˆ˜ ํ”ฝ์…€๊ฐ’์œผ๋กœ ํ…Œ๋‘๋ฆฌ(border)๋ฅผ ๋ Œ๋”๋งํ•  ์ˆ˜๋„ ์žˆ๊ณ  ํ…Œ๋‘๋ฆฌ์˜ ๊ณ„์‚ฐ๋œ ํญ(width)์— ๊ทผ์ ‘ํ•˜๋„๋ก ๊ฐ•์ œํ•  ์ง€๋„ ๋ชจ๋ฆ…๋‹ˆ๋‹ค.
238 ์œ ํ˜• ์„ ํƒ์ž CSS, HTML, Node, Reference, Selectors
CSS ์œ ํ˜• ์„ ํƒ์ž๋Š” ๋…ธ๋“œ ์ด๋ฆ„์„ ์‚ฌ์šฉํ•ด ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰ ๋ฌธ์„œ ๋‚ด์—์„œ ์ฃผ์–ด์ง„ ์œ ํ˜•์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
239 ์ธ์ ‘ ํ˜•์ œ ์„ ํƒ์ž CSS, Reference, Selectors
์ธ์ ‘ ํ˜•์ œ ์„ ํƒ์ž(+)๋Š” ์•ž์—์„œ ์ง€์ •ํ•œ ์š”์†Œ์˜ ๋ฐ”๋กœ ๋‹ค์Œ์— ์œ„์น˜ํ•˜๋Š” ์š”์†Œ๋งŒ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
240 ์ „์ฒด ์„ ํƒ์ž CSS, Reference, Selectors
CSS ์ „์ฒด ์„ ํƒ์ž(*)๋Š” ๋ชจ๋“  ํ˜•ํƒœ์˜ ๋ชจ๋“  ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.
241 ์ข…์† CSS, Guide, Introduction, Layout, Reference
์ข…์†(Cascade)์ด๋ž€ ์„œ๋กœ ๋‹ค๋ฅธ ์›์ ์—์„œ ๊ฐ€์ ธ์˜จ ์†์„ฑ ์—ฌ๋Ÿฟ์„ ์กฐํ•ฉํ•ด ์ตœ์ข… ๊ฒฐ๊ณผ๋ฅผ ๋„์ถœํ•˜๋Š” ์•Œ๊ณ ๋ฆฌ์ฆ˜์ž…๋‹ˆ๋‹ค. Cascading Style Sheets๋ผ๋Š” ์ด๋ฆ„์—์„œ๋„ ์•Œ ์ˆ˜ ์žˆ๋“ฏ ์ข…์†์€ CSS์˜ ์ค‘์‹ฌ์ž…๋‹ˆ๋‹ค. ์ด ๊ธ€์€ ์ข…์†์ด ๋ฌด์—‡์ธ์ง€, ์„ ์–ธํ•œ CSS ์ •์˜๊ฐ€ ์–ด๋–ค ์ˆœ์„œ๋กœ ์ข…์†๋˜๋Š”์ง€, ๊ทธ๋ฆฌ๊ณ  ์—ฌ๋Ÿฌ๋ถ„, ์ฆ‰ ์›น ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์–ด๋–ค ์˜ํ–ฅ์„ ์ฃผ๋Š”์ง€ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.
242 ์ง€์ •๊ฐ’ CSS, CSS Reference
CSS ์†์„ฑ์˜ ์ง€์ •๊ฐ’์€ ์„ธ ๊ฐ€์ง€ ๋ฐฉ๋ฒ• ์ค‘ ํ•˜๋‚˜๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.
243 ์ดˆ๊ธฐ๊ฐ’ CSS, Reference
๊ฐ CSS ์†์„ฑ(property) ์ •์˜ ํŽ˜์ด์ง€์˜ ์š”์•ฝ์ ˆ์— ์ฃผ์–ด์ง„ ์ดˆ๊ธฐ๊ฐ’(initial value)์€ ์ƒ์†๊ณผ ๋น„์ƒ์† ์†์„ฑ์— ๋”ฐ๋ผ ์˜๋ฏธ๊ฐ€ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.
244 ์ปจํ…Œ์ด๋‹ ๋ธ”๋ก์˜ ๋ชจ๋“  ๊ฒƒ CSS, Guide, Layout, Position
์š”์†Œ๋“ค์˜ ํฌ๊ธฐ์™€ ์œ„์น˜๋Š” ์ปจํ…Œ์ด๋‹ ๋ธ”๋ก(containing block)์˜ ์˜ํ–ฅ์„ ๋ฐ›๊ณค ํ•ฉ๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ์–ด๋–ค ์š”์†Œ์˜ ์ปจํ…Œ์ด๋‹ ๋ธ”๋ก์€ ๊ทธ ์š”์†Œ์— ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ๋ธ”๋ก ๋ ˆ๋ฒจ ์กฐ์ƒ์˜ ์ฝ˜ํ…์ธ  ์˜์—ญ์ด๋‚˜, ํ•ญ์ƒ ๊ทธ๋Ÿฐ ๊ฒƒ์€ ์•„๋‹™๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ์š”์†Œ์˜ ์ปจํ…Œ์ด๋‹ ๋ธ”๋ก์„ ๊ฒฐ์ •ํ•˜๋Š” ์š”์ธ์„ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.
245 ํด๋ž˜์Šค ์„ ํƒ์ž CSS, Reference, Selectors
CSS ํด๋ž˜์Šค ์„ ํƒ์ž๋Š” ์š”์†Œ์˜ class ์†์„ฑ์„ ํŒ๋ณ„ํ•˜๊ณ  ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.