1. ๋จ์1. ๊ณ ์ ํฌ๊ธฐ ๋จ์2. ๊ฐ๋ณ ํฌ๊ธฐ ๋จ์2. width, height3. border, radius4. margin, padding1. margin2. padding5.overflow5.1 overflow ์ค์ ์์ฑ6. background7. font1. Font-size2. font-family์ถ์ฒ ์น ํฐํธ ์ฌ์ดํธ์ถ์ฒ ์น ํฐํธfont format3. font-weightgoogle fontgoogle icon fontfontasomebootstrap fontXEIcon8. opacity9. color1. ์์ ์ด๋ฆ2. RGB๊ฐ3. HEX ๊ฐ(16์ง์)
์ ์ธ ๋ถ๋ถ์์ ์๋ชป๋ ๊ฐ์ด ๋ค์ด๊ฐ๋๋ผ๋ ์ ์ฒด๋ฅผ ์คํ์ํค๋๋ฐ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ง ์์ต๋๋ค. ํด๋น ๋ถ๋ถ๋ง ๋ฌดํจ์ฒ๋ฆฌ๊ฐ ๋ฉ๋๋ค.
1. ๋จ์
- Absolute : cm, mm, px ๋ฑ
- Relative : em, rem, vw, vh ๋ฑ
- Percentage : %
ย
CSS์์ ์ฌ์ฉํ ์ ์๋ ์ฌ๋ฌ ํฌ๊ธฐ์ ๋จ์์ ๋ํด์ ์ดํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
๋จ์๋ ๊ณ ์ ํฌ๊ธฐ๋จ์์ ๊ฐ๋ณํฌ๊ธฐ๋จ์๋ก ๋๋์ด์ง๋ฉฐ, ๊ณ ์ ํฌ๊ธฐ๋จ์์๋ px, pt, pc, cm, mm, in์ด ์๊ณ , ๊ฐ๋ณํฌ๊ธฐ๋จ์์๋ em, ex, rem, %, vh, vw, vmin, vmax, eh, ch๊ฐ ์์ต๋๋ค. ์ฌ๊ธฐ์๋ ์์ฃผ ์ฐ์ด๋ ๋จ์์ ๋์๋ง ์์๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
์ข ๋ ์ธ๋ถ์ ์ธ ๋จ์๋ MDN์ ๊ณต์๋ฌธ์๋ฅผ ์ฐธ๊ณ ํด์ฃผ์ธ์.
ย
1. ๊ณ ์ ํฌ๊ธฐ ๋จ์
๊ณ ์ ํฌ๊ธฐ ๋จ์
px
์ ๊ณ ์ ํฌ๊ธฐ๋จ์๋ก CSS์์ ๋ง์ด ์ฐ์ด๋ ๋จ์์
๋๋ค. ๊ฐ๋ณํฌ๊ธฐ๋จ์์๋ ๋ฌ๋ฆฌ, ๊ณ ์ ๋ ํฌ๊ธฐ๋ฅผ ์ง์ํ๊ธฐ ๋๋ฌธ์ ๊ธ์ํฌ๊ธฐ์ ๋ณํ๊ฐ ์ฉ์ดํฉ๋๋ค. ์ด๊ธฐ ๊ธฐ๋ณธ px์ ํฌ๊ธฐ๋ 16px์
๋๋ค. ๊ฐ ์ ํ์์ ๋ํด ์ํ๋ px๊ฐ์ ์ง์ ํ๋ฉด ์๋์ ๊ฐ์ ๊ฒฐ๊ณผ๋ฅผ ์ป์ต๋๋ค.<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>๊ณ ์ ํฌ๊ธฐ ๋จ์</title> <style> h1 { font-size: 20px; } p { font-size: 14px; } div{ font-size: 10px; } </style> </head> <body> <h1>[ch5_ex1]CSS ํฌ๊ธฐ๋จ์์ ๋ํ ์ค์ต์ ๋๋ค.</h1> <p>CSS ํฌ๊ธฐ๋จ์ ์ฒซ๋ฒ์งธ px์ ๋ํ ์ค์ต ์์ ์ ๋๋ค.</p> <div>์ฒซ๋ฒ์งธ ์ค์ต์ px์ ํฌ๊ธฐ๋ฅผ ์์๋ด ๋๋ค.</div> </body> </html>
[์คํํ๋ฉด]
ย
2. ๊ฐ๋ณ ํฌ๊ธฐ ๋จ์
ย
em
์ ๊ฐ๋ณํฌ๊ธฐ๋จ์๋ก ๋ฐฐ์๋ฅผ ๋ํ๋ด๋ ๋จ์์
๋๋ค. ๋ถ๋ชจ์ font-size์ ๋ฐ๋ผ ๊ธฐ์ค์ ์ ์ธ์ฐ๋ฉฐ ๊ธฐ์ค์ ์ ๋ฐ๋ผ ํฌ๊ธฐ๊ฐ ๋ฌ๋ผ์ง๋๋ค. ์์ธํ ๋ด์ฉ์ ์๋ ์ฝ๋๋ฅผ ์ฐธ๊ณ ํด์ฃผ์๊ธฐ ๋ฐ๋๋๋ค.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font</title> <style> body { font-size: 30px; } div { font-size: 0.8em; } p { font-size: 1.2em; } </style> </head> <body> <!-- body์ ํฌ๊ธฐ์ธ 30px์ ๋ฐ๋ฅธ๋ค. --> em์ ์ฒ์ ํฌ๊ธฐ๋ 30px ์ ๋๋ค. <div> <!-- ๋ถ๋ชจ body์ ํฌ๊ธฐ์ธ 30px์ div์ ํฌ๊ธฐ์ธ 0.8์ ๊ณฑํ๋ค. --> <br>em์ ํฌ๊ธฐ๋ 30 * 0.8 = 24px ์ ๋๋ค. <div> <!-- ๋ถ๋ชจ body์ ํฌ๊ธฐ์ธ 24px์ div์ ํฌ๊ธฐ์ธ 0.8์ ๊ณฑํ๋ค. --> <br>em์ ํฌ๊ธฐ๋ 24 * 0.8 = 19.2px ์ ๋๋ค. <div> <!-- ๋ถ๋ชจ div์ ํฌ๊ธฐ์ธ 19.2px์ div ํฌ๊ธฐ์ธ 0.8์ ๊ณฑํ๋ค. --> <br>em์ ํฌ๊ธฐ๋ 19.2 * 0.8 = 15.36px ์ ๋๋ค. </div> </div> </div> <!-- ๋ถ๋ชจ body์ ํฌ๊ธฐ์ธ 30px์ p์ ํฌ๊ธฐ์ธ 1.2์ ๊ณฑํ๋ค. --> <p>p์ ํฌ๊ธฐ๋ 30 * 1.2 = 36px ์ ๋๋ค.</p> </body> </html>
[์คํํ๋ฉด]
ย
em์์์ ๊ฐ 1์ 100%์
๋๋ค. ์ฆ, ๋ถ๋ชจ์ px๊ฐ์ 30px๋ก ์ง์ ํ๊ณ , ๊ทธ ์๋ ์์ div์ ๊ฐ์ 0.8em์ ์ง์ ํ๋ฉด 30px * 0.8 = 24px๊ฐ ๋ฉ๋๋ค.
(๋ถ๋ชจ์ ํฌ๊ธฐ๊ฐ * ์์์ em ๊ฐ) = ์์์ด ๊ฐ์ง๊ฒ ๋ ํฌ๊ธฐ ๊ฐ
์ด๋ฅผ ๋ณดํธํํ๋ฉด ์์ ๊ณต์์ด ์ฑ๋ฆฝํ๊ฒ ๋ฉ๋๋ค. ๊ฐ๋ณํฌ๊ธฐ๋จ์์ด๊ธฐ ๋๋ฌธ์ ๋ถ๋ชจ์ ํฌ๊ธฐ์ ๋ฐ๋ผ ์์์ ํฌ๊ธฐ ๊ฐ์ด ๋ฌ๋ผ์ง๋๋ค.
ย
%
๋ ๊ฐ๋ณํฌ๊ธฐ๋จ์๋ก์จ ๋ฐฑ๋ถ์จ์ ๋ํ๋ด๋ ๋จ์์
๋๋ค. %๋ ๊ธฐ๋ณธ ์ค์ ๋ ํฌ๊ธฐ์์ ์๋์ ์ผ๋ก ํฌ๊ธฐ๋ฅผ ์ง์ ํฉ๋๋ค. ์ด๊ธฐ ์ค์ ๋ ํฌ๊ธฐ๋ 100%์
๋๋ค.ย
๊ธฐ๋ณธ px์ ํฌ๊ธฐ๊ฐ 16px์ด๋ผ ํ์ผ๋ ํฐํธ์ ํฌ๊ธฐ๋ฅผ 75%๋ผ ์ ํ ๊ฒฝ์ฐ,
16px * 0.75 = 12px๊ฐ ๋๋ค. ์์ธํ ๋ด์ฉ์ ์๋ ์์ ๋ฅผ ํตํด์ ์ค๋ช
ํ๋๋ก ํ๊ฒ ์ต๋๋ค.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body { font-size: 30px; } div { font-size: 50%; } p { font-size: 110%; } </style> </head> <body> <!-- body์ ํฌ๊ธฐ์ธ 30px์ ๋ฐ๋ฅธ๋ค. --> %์ ์ฒ์ ํฌ๊ธฐ๋ 30px ์ ๋๋ค. <div> <!-- ๋ถ๋ชจ body์ ํฌ๊ธฐ์ธ 30px์ div์ ํฌ๊ธฐ์ธ 0.5์ ๊ณฑํ๋ค. --> <br>%์ ํฌ๊ธฐ๋ 30 * 0.5 = 15px ์ ๋๋ค. </div> <!-- ๋ถ๋ชจ body์ ํฌ๊ธฐ์ธ 30px์ p ํฌ๊ธฐ์ธ 1.1์ ๊ณฑํ๋ค. --> <p>p์ ํฌ๊ธฐ๋ 30 * 1.1 = 33px ์ ๋๋ค.</p> </body> </html>
[์คํํ๋ฉด]
ย
ย
%์์์ ๊ฐ 100%์ 1์ด๋ค. ์ฆ, ๋ถ๋ชจ์ px๊ฐ์ 30px๋ก ์ง์ ํ๊ณ , ๊ทธ ์๋ ์์ div์ ๊ฐ์ 50%๋ฅผ ์ฃผ๊ฒ ๋๋ฉด 30px * 0.5 = 15px๊ฐ ๋ฉ๋๋ค.
๋ถ๋ชจ์ ํฌ๊ธฐ & (์์์ %๊ฐ/100) = ์์์ด ๊ฐ์ง๊ฒ ๋ px ๊ฐ
์ด๋ฅผ ๋ณดํธํํ๋ฉด ์์ ๊ณต์์ด ์ฑ๋ฆฝํ๊ฒ ๋ฉ๋๋ค. em๊ณผ ๊ฐ์ด ๊ฐ๋ณํฌ๊ธฐ๋จ์์ด๊ธฐ ๋๋ฌธ์ ๋ถ๋ชจ์ ํฌ๊ธฐ์ ๋ฐ๋ผ ์์์ ํฌ๊ธฐ ๊ฐ์ด ๋ฌ๋ผ์ง๊ฒ ๋ฉ๋๋ค.
ย
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ font-size: 10px; } .one{ font-size: 32px; } .two{ font-size: 2em; } .three{ font-size: 2rem; } .four{ width: 50%; height: 100px; background: red; } .five{ width: 50vw; /*vh(๋์ด), vw(๋์ด)*/ height: 100px; background: aqua; } .six{ width: 500px; } </style> </head> <body> <!-- font-size : 16px --> <div class="two"> <!-- font-size : 32px --> <div class="two"> <!-- font-size : 64px --> <div class="two"> <!-- font-size : 128px --> hello </div> </div> </div> <!-- font-size : 16px --> <div class="two"> <!-- font-size : 32px --> <div class="two"> <!-- font-size : 64px --> <div class="three"> <!-- font-size : 32px --> hello </div> </div> </div> <div class="six"> <div class="four">hello</div> </div> <div class="four"></div> <div class="five">hello</div> <div class="six"> <div class="five">hello</div> </div> <h2>๊ณ ์ ํฌ๊ธฐ ๋จ์</h2> <p>px</p> <h2>๊ฐ๋ณ ํฌ๊ธฐ ๋จ์</h2> <p>em, rem, %, vw, vh</p> </body> </html>
ย
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ font-size: 10px; } .one{ font-size: 32px; } .two{ font-size: 2em; } .three{ font-size: 2rem; } .four{ width: 50%; height: 100px; background: red; } .five{ width: 50vw; /*vh(๋์ด), vw(๋์ด)*/ height: 100px; background: aqua; } .six{ width: 500px; } </style> </head> <body> <!-- font-size : 16px --> <div class="two"> <!-- font-size : 32px --> <div class="two"> <!-- font-size : 64px --> <div class="two"> <!-- font-size : 128px --> hello </div> </div> </div> <!-- font-size : 16px --> <div class="two"> <!-- font-size : 32px --> <div class="two"> <!-- font-size : 64px --> <div class="three"> <!-- font-size : 32px --> hello </div> </div> </div> <div class="six"> <div class="four">hello</div> </div> <div class="four"></div> <div class="five">hello</div> <div class="six"> <div class="five">hello</div> </div> <h2>๊ณ ์ ํฌ๊ธฐ ๋จ์</h2> <p>px</p> <h2>๊ฐ๋ณ ํฌ๊ธฐ ๋จ์</h2> <p>em, rem, %, vw, vh</p> </body> </html>
2. width, height
3. border, radius
border๋ ์๋์ ๊ฐ์ property๋ฅผ ๊ฐ์ง๋๋ค.
- border-width - ์ ์ ๋๊ป์ ๊ด๋ จ๋ ์์ฑ์ ๋๋ค.
- border-style - ์ ์ ๋ชจ์๊ณผ ๊ด๋ จ๋ ์์ฑ์ ๋๋ค.
- border-color - ์ ์ ์๊น๊ณผ ๊ด๋ จ๋ ์์ฑ์ ๋๋ค.
- initial - ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ค์ ํฉ๋๋ค.
- inherit - ๋ถ๋ชจ ์์์ ์์ฑ๊ฐ์ ์์๋ฐ์ต๋๋ค.
ย
์์ ๊ฐ์ ์์ฑ์ ์๋ ์ฝ๋ ์์๋ก ์์ฑํ์๋ฉด ๋ฉ๋๋ค.
border: border-width border-style border-color | initial | inherit
ย
border-width๋ถํฐ ํ๋์ฉ ์์ธํ ์ค๋ช
๋๋ฆฌ๊ฒ ์ต๋๋ค.
ย
๋จผ์ border-width๋ ์๋์ ๊ฐ์ ๋ฐฉ๋ฒ์ผ๋ก ์ค์ ์ ์ง์ ํ ์ ์์ต๋๋ค.
- px - ์์ฑ ๊ฐ์ ์ง์ ํฝ์ ๋จ์๋ก ์ง์ ํฉ๋๋ค.
- medium - ์ค๊ฐ ๊ตต๊ธฐ๋ก ํ์๋ฉ๋๋ค.
- thin - ์ค์ ์ผ๋ก ํ์๋ฉ๋๋ค.
- thick - ๊ตต์ ์ ์ผ๋ก ํ์๋ฉ๋๋ค.
ย
๋ค์์ผ๋ก border-style์ ์ค๋ช
๋๋ฆฌ๊ฒ ์ต๋๋ค. ์ ์ ํํ๋ ์ค์ , ์ ์ , ํ์ ๋ฑ ๋ค์ํ๊ฒ ์ค์ ํ ์ ์์ผ๋ฉฐ ์์ ์์จ ์๋ ์์ต๋๋ค.
- none - ์ ์ ์์ฑ๋๋ค.
- solid - ์ค์ ์ ๋๋ค.
- dotted - ์ ์ ์ ๋๋ค.
- dashed - ํ์ ์ผ๋ก ๋ฐ๋์ง์ ๊ณผ ๊ฐ์ ์ ์ ๋๋ค.
- double - ์ด์ค์ ์ ๋๋ค.
- groove - ์ ์ด ์์ชฝ์ผ๋ก ํ์ธ ์ ์ ๋๋ค.
- ridge - ๋ณผ๋กํ๊ฒ ์ ์ฒด๊ฐ์ด ์๋ ์ ์ ๋๋ค.
- inset - ํ ๋๋ฆฌ๊ฐ ์ ์ฒด์ ์ผ๋ก ์์ผ๋ก ๋ค์ด๊ฐ ๋ณด์ด๋ ํํ์ ๋๋ค.
- outset - inset์ ๋ฐ๋์ ๋๋ค.
ย
๋ง์ง๋ง์ border-color์
๋๋ค. ์๊น์ ์ข
๋ฅ์ ๋ํด์๋ ๋ง์ด ์์๊ธฐ๋๋ฌธ์ ํ
๋๋ฆฌ top, bottom, left, right์ ์๊น์ ์ฃผ๋ ๋ฐฉ๋ฒ์ ๋ํด์ ์๋ ค๋๋ฆฌ๊ฒ ์ต๋๋ค.
[1] border-color: red; [2] border-color: red green; [3] border-color : red green blue; [4] border-color : red green blue yellow;
[1]๊ณผ ๊ฐ์ด ํ ๊ฐ์ ๊ฐ์ ์ฌ์ฉํ๋ฉด ๋ค ๋ฉด์ ๋์ผํ ์์์ด ์ ์ฉ๋ฉ๋๋ค.
[2]์ ๊ฐ์ด ๋ ๊ฐ์ ๊ฐ์ ์ฌ์ฉํ๋ฉด (top bottom), (left right)์ ์ ์ฉ๋ฉ๋๋ค.
[3]๊ณผ ๊ฐ์ด ์ธ ๊ฐ์ ๊ฐ์ ์ฌ์ฉํ๋ฉด (top), (left right), (bottom)์ ์ ์ฉ๋ฉ๋๋ค.
[4]์ ๊ฐ์ด ๋ค ๊ฐ์ ๊ฐ์ ์ฌ์ฉํ๋ฉด top, right, bottom, left์ ์ ์ฉ๋ฉ๋๋ค.
ย
์ง์ ํ
๋๋ฆฌ์ ์ค์ ์ ๋ฃ๋์ฝ๋์์ ์ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฌ๋๋ฆฌ๊ณ ํ
๋๋ฆฌ๋ ๋ง๋ฌด๋ฆฌํ๊ฒ ์ต๋๋ค.
<!doctype html> <html> <head> <style type="text/css"> div { margin: 10px 0px; font-size: 13px; } .one { border: 4px ridge red; } .two { border: thick solid green; } .three { border: thin dotted blue; } .four { border: medium inset; border-color: yellow green } </style> </head> <body> <div class="one"> <p> border: 4px none red;</p> </div> <div class="two"> <p>border: thick solid green;</p> </div> <div class="three"> <p>border: thin dotted blue;</p> </div> <div class="four"> <p>border: medium inset; <br> border-color: yellow green</p> </div> </body> </html>
ย
ย
์ด๋ฒ์๋ radius๋ฅผ ๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค. ๋ณดํต์ radius: 50%๋ก 4๊ตฐ๋ฐ ๋ชจ๋ radius๋ฅผ ์ฃผ๊ธฐ๋ ํ๋๋ฐ, ์ดํด๋ฅผ ๋๊ธฐ ์ํด ์ผ์ชฝ ์๋จ์๋ง ๋ถ์ฌํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
์๋๋ฅผ ๋ณด๋ฉด 50px์์ ์ ์ด ๊บพ์ด๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค. ์ด ์์ฑ์ ์ฌ์ฉํด ๋ชจ์๋ฆฌ๋ฅผ ๊น๊ฑฐ๋ ๋ํ์ ๋ง๋ค๊ธฐ๋ ํฉ๋๋ค.
<!DOCTYPE html> <html> <head> <style type="text/css"> div { width: 100px; height: 100px; background-color: darkgreen; } .one { border: 1px solid red; border-top-left-radius: 50px; } </style> </head> <body> <div class="one"></div> </body> </html>
4. margin, padding
์ ๊ทธ๋ฆผ์ฒ๋ผ ๋ฐ์ค๋ชจ๋ธ์ ๊ตฌ์ฑํ๋ ์์ฑ๋ค์ ํฉํด BOX ์์ฑ ์ด๋ผ๊ณ ํฉ๋๋ค. ์ด ์์ฑ๋ค ์ค์์ width์ height ์์ฑ์ ๋จ์ด ๊ทธ๋๋ก ๊ฐ๋ก์ ์ธ๋ก์ ๊ธธ์ด๋ฅผ ์๋ฏธํฉ๋๋ค. margin๊ณผ padding์ ์ฌ๋ฐฑ์ ํฌ๊ธฐ๋ฅผ ์๋ฏธํ๊ณ , border๋ ํ
๋๋ฆฌ๋ฅผ ๋ํ๋
๋๋ค. ๊ฐ ์์ฑ์ ํฌ๊ธฐ(์ฌ์ด์ฆ)๋ฅผ ์ ์ด์ฃผ๊ณ , ๋จ์๋ฅผ ์ ์ด์ฃผ๋ฉด ๋ฉ๋๋ค. ์์ธํ ์ค๋ช
์ ์๋ ์์ ๋ฅผ ํตํด์ ์ค๋ช
ํ๊ฒ ์ต๋๋ค.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body { font-size: 30px; } p:nth-child(1) { font-size: 100%; } p:nth-child(2) { font-size: 0.5em; } p:nth-child(3) { font-size: 50%; } div:nth-child(4) { width: 50%; height: 100px; background-color: #FFD9EC; font-size: 50%; } div:nth-child(5) { width: 30%; height: 150px; background-color: #E3C4FF; font-size: 50%; } </style> </head> <body> <!-- ๊ฐ p๋ณ ์์ฑ์ ์ง์ ํ๋ค. --> <p>์ด ๋ฒ ์์ ์์๋ width์ height์ ์์ฑ์ ๋ํด์ ์์๋ณธ๋ค.</p> <!-- ์ฒซ๋ฒ์งธ p์ ์์ฑ์ ๋ฐ๋ฅธ๋ค. --> <p>1. width๋ ๊ฐ๋ก์ ๊ธธ์ด๋ค.</p> <!-- ๋๋ฒ์งธ p์ ์์ฑ์ ๋ฐ๋ฅธ๋ค. --> <p>2. height๋ ์ธ๋ก์ ๊ธธ์ด์ด๋ค.</p> <!-- ์ธ๋ฒ์งธ p์ ์์ฑ์ ๋ฐ๋ฅธ๋ค. --> <div> <!-- ์ฒซ๋ฒ์งธ div์ ์์ฑ์ ๋ฐ๋ฅธ๋ค. --> <br/><br/> ๊ฐ๋ก width๋ 50%์ด๊ณ , ์ธ๋ก height๋ 100%์ด๋ค. </div> <div> <!-- ๋๋ฒ์งธ div์ ์์ฑ์ ๋ฐ๋ฅธ๋ค. --> <br/><br/> ๊ฐ๋ก width๋ 30%์ด๊ณ , ์ธ๋ก heigth๋ 150px์ด๋ค. </div> </body> </html>
[์คํํ๋ฉด]
์ฒซ๋ฒ์งธ div์ width์ height๋ ๊ฐ๊ฐ 50%์ 100px ์
๋๋ค. ๋๋ฒ์งธ div์ width์ height๋ ๊ฐ๊ฐ 30%์ 150px ์
๋๋ค. ์ฒซ๋ฒ์งธ div์ ๊ฐ๋ก๋ณด๋ค ๋๋ฒ์งธ div์ ๊ฐ๋ก๊ฐ ๋ ์์ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค. ๋ํ ์ฒซ๋ฒ์งธ div์ ์ธ๋ก๋ณด๋ค ๋๋ฒ์งธ div์ ์ธ๋ก๊ฐ ๋ ๊ธธ์ด์ง ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
- margin ๊ณผ padding ์์ฑ
padding : ๋ณธ๋ฌธ ๋ด์ฉ๊ณผ border ์ฌ์ด์ ์ฌ๋ฐฑ
border : ์ (์ ์ ๊ตต๊ธฐ๋ฅผ ๋ค์ํ๊ฒ ์ง์ ํ ์ ์์ผ๋ฉฐ, ์ ์ ๊ทธ๋ฆฌ์ง ์์ ์๋ ์์)
margin : border์ ๋ฐ๊นฅ๊ณผ์ ์ฌ๋ฐฑ
'P-B-M' ์ ์์๋ก ๊ธฐ์ตํ๋ฉด ์ข์ต๋๋ค. padding์ ์์์ ํ
๋๋ฆฌ ์์ชฝ๊ณผ ์ฝํ
์ธ ์ฌ์ด์ ๊ณต๊ฐ์ ํ๋ณดํ๋ ๋ฐ๋ฉด์, margin์ ์์์ ํ
๋๋ฆฌ ์ธ๋ถ์ ํฌ๋ช
ํ ๊ณต๊ฐ์ ํ๋ณดํฉ๋๋ค.
์ด๋ margin์์ญ์ padding์์ญ๊ณผ๋ ๋ฌ๋ฆฌ background-color ์์ฑ์ผ๋ก ์ค์ ๋ ๋ฐฐ๊ฒฝ์์ ์ํฅ์ ๋ฐ์ง ์๊ณ ํญ์ ํฌ๋ช
ํ ์์ ์ ์งํฉ๋๋ค. ๋ํ margin๊ณผ padding ๋ชจ๋ -top(์๋จ ์ฌ๋ฐฑ), -right(์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ), -bottom(ํ๋จ ์ฌ๋ฐฑ), -left(์ผ์ชฝ ์ฌ๋ฐฑ)์ ๋ฐฉ์์ผ๋ก ๊ฐ ์์ญ์ ํฌ๊ธฐ๋ฅผ ๋ฐฉํฅ๋ณ๋ก ๋ฐ๋ก ์ค์ ํ ์ ์์ต๋๋ค.
์์ ๋กญ๊ฒ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๋ฉฐ ๋ค์ํ๊ฒ ์ค์ตํด๋ณด์ธ์!
ย
ย
ย
1. margin
margin์ ์๋์ ๊ฐ์ property๋ฅผ ๊ฐ์ง๋๋ค.
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
selector{ margin: 10px, 15px, 20px, 25px; }
์์ ๊ฒฝ์ฐ 12์๋ถํฐ 3์, 6์, 9์ ๋ฐฉํฅ์ผ๋ก ์ ์ฉ๋ฉ๋๋ค. ํ๋๋ง ๋ฃ์ ๊ฒฝ์ฐ 4๋ฐฉํฅ ๋ชจ๋ ์ ์ฉ๋๋ฉฐ 2๊ฐ๋ฅผ ๋ฃ์ ๊ฒฝ์ฐ ์ํ, ์ข์ฐ๊ฐ ์ ์ฉ๋ฉ๋๋ค.
selector{ margin: 10px, 20px, 25px; }
์์ ๊ฐ์ด ์ฌ์ฉํ์ค ๊ฒฝ์ฐ ์ง์ด ๋ง์ง ์์์ ์๋ํ์ง ์์ผ์ค ๊ฒ ๊ฐ์ง๋ง 10px์ top์ผ๋ก 20px์ ์ข์ฐ๋ก, 25px์ bottom์ผ๋ก ์ ์ฉ๋ฉ๋๋ค.
๋ง์ง์ value๋ก ์ค ์ ์๋ ๊ฐ์ ์๋์ ๊ฐ์ต๋๋ค. w3school์์ ์ค์ต(https://www.w3schools.com/cssref/playit.asp?filename=playcss_margin&preval=auto)ํด๋ณด์ค ์ ์์ต๋๋ค.
- length : px, cm ๋ฑ ๊ณ ์ ๋ ๊ธธ์ ๋๋ค.
- % : em, rem, % ๋ฑ ๊ฐ๋ณ ๊ธธ์ด์ ๋๋ค.
- initial : ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ค์ ํฉ๋๋ค.
- inherit : ๋ถ๋ชจ ์์์ ์์ฑ๊ฐ์ ์์๋ฐ์ต๋๋ค.
- auto : ๋ถ๋ชจ ์์์ ์ํ ๋ฐฉํฅ์ผ๋ก margin์ ์๋์ผ๋ก ๊ณ์ฐํฉ๋๋ค.
์ฌ๊ธฐ์ ์๋์ ๊ฐ์ด ์ฝ๋ฉํด๋ณด์๋ฉด ์ข์ฐ ๊ฐ์ด ์๋์ผ๋ก ๊ณ์ฐ๋์ด ์ค์ ์ ๋ ฌ ๋จ์ ๋ณด์ค ์ ์์ต๋๋ค.
<html> <head> <style> div { border: 10px solid blue; width: 200px; margin: auto; } </style> </head> <body> <div>hello world</div> </body> </html>
ย
** ๋ง์ง ๊ฒน์นจ ํ์ (margin collapsing) **
๋ง์ง ๊ฒน์นจ ํ์์ด๋?
- ์์์ ์์์ ์ฌ์ด์ ๋ง์ง ํ(margin-top) ํน์ ๋ง์ง ๋ฐํ (margin-bottom)์ ๊ณต๊ฐ์ด ์์ ๊ฒฝ์ฐ ๋ ๋์ ๊ฐ์ ๋ง์ง ๊ฐ์ด ์ ์ฉ๋๋ ํ์
<div class="first"></div> <div class="second"></div>
div{ width:100px; height:100px; border:1px solid black; } .first{ margin-bottom:30px; } .second{ margin-top:60px; } /* ๋ง์ง ๊ฐ์ด ๋์ ์ชฝ์ ๋ง์ง๋ง ์ ์ฉ๋ฉ๋๋ค. */
ย
- ๋ถ๋ชจ ์์์ ์์ ์์๊ฐ ์กด์ฌํ ๋, ์์ ์์์ ๋ง์ง ํ ํน์ ๋ง์ง ๋ฐํ ๊ฐ์ด ๋ถ๋ชจ์ ๋์ด์ ์ํฅ์ ๋ฏธ์น์ง ์๋ ํ์
<div class="parent"> <div class="child"></div> </div>
.parent{ background-color:yellow; } .child{ width:100px; height:100px; margin-top:50px; background-color:red; } /* ๋ถ๋ชจ์ ๋์ด๋ฅผ ๋ฐ๋ก ์ง์ ํ์ง ์์ผ๋ฉด ์์์ ๋์ด๋งํผ ๋ถ๋ชจ์ ๋์ด๊ฐ ์ง์ ๋ฉ๋๋ค. ํ์ง๋ง ์์ ๊ฐ์ ๊ฒฝ์ฐ ์์์ ๋ง์ง ํ, ๋ฐํ ๊ฐ์ด ๋ถ๋ชจ์ ๋์ด์ ์ํฅ์ ๋ฏธ์น์ง ์๊ฒ ๋ฉ๋๋ค. */
์๋ ๊ทธ๋ฆผ์ฒ๋ผ .child ์์์ ๋ง์ง ๊ฐ์ด ๋ถ๋ชจ ์์ญ์ ๋์ด์๊ณ ์๋ ๋ชจ์ต์ ํ์ธํ ์ ์์ต๋๋ค. ์ด๋ฐ ํ์์ ํด๊ฒฐํ์ง ์๋๋ค๋ฉด ์ฌ๋ฌ๋ถ์ ์๊ฐ๊ณผ ๋ค๋ฅธ UI๊ฐ ๊ตฌ์ฑ๋ ๊ฐ๋ฅ์ฑ์ด ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ๋ถ๋ชจ์ ์์์์ ๋ชจ๋์๊ฒ ๋ง์งํ์ ์ฃผ๊ณ ์ถ์ ๊ฒฝ์ฐ ๋ฎ์ ๊ฐ์ ๋ง์ง ํ ๊ฐ์ด ์์๋์ด ๋ฒ๋ฆฝ๋๋ค.
์ด์ ๊ฐ์ ํ์์ ํด๊ฒฐํ๋ ๋ฐฉ๋ฒ์ ๋ช๊ฐ์ง ์๊ฐํด ๋๋ฆฌ๊ฒ ์ต๋๋ค.
- ๋ถ๋ชจ ์์์ overflow ์์ฑ ๊ฐ์ ์ ์ฉํด์ค๋๋ค.
- ๋ถ๋ชจ ์์์ display: inline-block ๊ฐ์ ์ ์ฉํด์ค๋๋ค.
- ๋ถ๋ชจ ์์์ border ๊ฐ์ ์ ์ฉํด์ค๋๋ค.
์ด ์ธ ๊ฐ์ง ๋ฐฉ๋ฒ ์ค์ ์ํฉ์ ๊ฐ์ฅ ์๋ง๋ ๋ฐฉ๋ฒ์ ์ด์ฉํ์๋ฉด ๋๊ฒ ์ต๋๋ค.
ย
2. padding
padding์ margin๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ์๋์ ๊ฐ์ property๋ฅผ ๊ฐ์ง๋๋ค.
- padding
- padding-top
- padding-right
- padding-bottom
- padding-left
๋ถ์ฌํ๋ ๋ฐฉ๋ฒ์ margin๊ณผ ๊ฐ์ผ๋ฏ๋ก ์๋ตํ๋๋ก ํ๊ฒ ์ต๋๋ค. ๋ค๋ง value๋ก ์ฌ ์ ์๋ ๊ฐ ์ค auto๋ ์์ต๋๋ค.
margin์ ํ
๋๋ฆฌ ๋ฐ์ ์์นํ๋ฉฐ, ๋ฐ์ ์ฌ๋ฐฑ์ ๋ง๋ค์ด์ค๋๋ค. ๊ฐ ๋ฉด์ ๋ํ ๊ฐ์ ์ง์ ํ ๋๋ margin-๋ฐฉํฅ(top, right, bottom, left)์ ์ฌ์ฉํฉ๋๋ค. ๋ชจ๋ ๋ฐฉํฅ์ ํ๋ฒ์ ๋ฐ๊พธ๊ณ ์ถ๋ค๋ฉด margin: 1px,
2px, 3px, 4px; ๋ก ๋ํ๋ด๋ฉด top, right, bottom, left ๋ฐฉํฅ ์์ผ๋ก ๊ฐ ๋ฉด์ ๋ํ ๊ฐ์ด ๋ฐ๋๋๋ค.
hello world๊ฐ ๋ค์ด์๋ ์ฌ๊ฐํ ๋ฐ์ค๋ฅผ ๊ทธ๋ ค๋ณด๋ฉด์ margin๊ณผ padding์ ๋ํด ์ค๋ช
๋๋ฆฌ๋๋ก ํ๊ฒ ์ต๋๋ค.
5.overflow
overflow
ย ์์ฑ์ ์์์ ์ฝํ
์ธ ๊ฐ ๋๋ฌด ์ปค๋ค๋ ๊ฒฝ์ฐ ์์๋ฅผ ์ด๋ป๊ฒ ์ฒ๋ฆฌํ ์ง ์ง์ ํฉ๋๋ค.ย overflow-x
,ย overflow-y
์ ์ถ ๋ณ๋ก ๊ฐ์ ์ค์ ํ ์ ์์ต๋๋ค.ย
์๋ ์ฝ๋์์๋ ๋ฒํผ์์ ์ด๋ฏธ์ง๊ฐ ๋ฒํผ์ ํฌ๊ธฐ๋ณด๋ค ๋ ํฝ๋๋ค.
ย
<button> ์คํ์ผ์ overflow:hidden ์์ฑ์ ์ถ๊ฐํ๋ฉด ๋ฒํผ์ ํฌ๊ธฐ๋งํผ ์ด๋ฏธ์ง๋ฅผ ์๋ผ๋ฒ๋ฆฝ๋๋ค.
overflow
ย ์์ฑ์ ์ฒซ ๋ฒ์งธย overflow-x
, ๋ ๋ฒ์งธ ๊ฐ์ย overflow-y
๋ฅผ ์ง์ ํฉ๋๋ค. ํ๋๋ง ์ฌ์ฉํ๋ฉด ์ง์ ํ ๊ฐ์ ์ ์ถ ๋ชจ๋์ ์ ์ฉํ๋ ์ถ์ฝํ์ด ๋ฉ๋๋ค.button{ /* x์ถ์ ์จ๊ธฐ๊ณ , y์ถ์ ์จ๊ธฐ์ง๋ง ์คํฌ๋กค์ ์ ๊ณตํ์ฌ ์๋ฆฐ ๋๋จธ์ง ๋ถ๋ถ์ ํ์ธ ํ ์ ์๊ฒํฉ๋๋ค. */ overflow:hidden visible; width:100px; height:30px; }
ย
5.1 overflow ์ค์ ์์ฑ
visible
overflow ์์ฑ์ ๊ธฐ๋ณธ ๊ฐ์
๋๋ค. ์ฝํ
์ธ ๋ฅผ ์๋ฅด์ง ์์ต๋๋ค.
ย
hidden
์ฝํ
์ธ ๋ฅผ ์์์ ํฌ๊ธฐ๋งํผ ๋ง์ถ๊ธฐ ์ํด ์๋ผ๋
๋๋ค. ์คํฌ๋กค ๋ฐ๋ฅผ ์ ๊ณตํ์ง ์์ต๋๋ค.
ย
scroll
์ฝํ
์ธ ๋ฅผ ์์์ ํฌ๊ธฐ๋งํผ ๋ง์ถ๊ธฐ ์ํด ์๋ผ๋
๋๋ค. ์๋ ค์ง ๋๋จธ์ง ๋ถ๋ถ์ ํ์ธ ํ ์ ์๋๋ก ์คํฌ๋กค ๋ฐ๋ฅผ ์ ๊ณตํฉ๋๋ค.
ย
6. background
์นํ์ด์ง์ ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ ๋ img ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ๊ณผ CSS์ background ์์ฑ์ ์ฌ์ฉํ๋
๋ฐฉ๋ฒ ๋ ๊ฐ์ง๋ฅผ ์ฃผ๋ก ์ฌ์ฉํฉ๋๋ค.
ํ๊ทธ๋ ์นํ์ด์ง์ ์ปจํ
์ธ ์ด๋ฉฐ background ์์ฑ์ ์ปจํ
์ธ ๋ฅผ ๊พธ๋ฏธ๊ธฐ ์ํ ์ฉ๋๋ก ๋ง์ด ์ฐ์
๋๋ค. background์ ์ธ๋ถ์์ฑ์๋ ์๋์ ๊ฐ์ ๊ฒ์ด ์์ต๋๋ค.
ํฌ๋กฌ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๊ทธ๋ฅ background๋ฅผ ์ฌ์ฉํ์ ๋์ ์ผ์ผ์ด ์ง์ ํด์ฃผ์์ ๋์ ์ฐจ์ด๋ฅผ ๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
ย
1) background-image : url("์ด๋ฏธ์งํ์ผ")
2) background-repeat
- repeat
- no-repeat
- repeat-x
- repeat-y
- round
- space
4) background-position
ย
ย
.home-header { background-image: url("apple.jpg"); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
ย
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>๋ณด๊ฐ์ค๋ช </title> <style> div { width: 425px; height: 200px; margin: 20px; background-image: url("https://www.tvn-2.com/nacionales/Imagen-ilustrativa-gato-medio-bosque_18585331.jpg"); background-size: 100px auto; border: 4px solid black; } .repeat { /* ๋ฐ๋ณต */ background-repeat: repeat; } .repeat-x { /* x์ถ๋ง ๋ฐ๋ณต */ background-repeat: repeat-x; } .repeat-y { /* y์ถ๋ง ๋ฐ๋ณต */ background-repeat: repeat-y; } .no-repeat { /* ๋ฐ๋ณต ์์*/ background-repeat: no-repeat; } .round { /* ์ด๋ฏธ์ง ์งค๋ฆฌ์ง ์๊ฒ, ์ด๋ฏธ์ง ํฌ๊ธฐ ๋ณํ๋ฅผ ์ค์ ๊ฐ๊ฒฉ ์์ด ๋ฐ๋ณต*/ background-repeat: round; } .space { /* ์ด๋ฏธ์ง ์งค๋ฆฌ์ง ์๊ฒ ๋ฐ๋ณต, ์ด๋ฏธ์ง ํฌ๊ธฐ๋ ์ ์งํ์ฑ๋ก ๊ฐ๊ฒฉ ์์ด ๋ฐ๋ณต*/ background-repeat: space; } </style> </head> <body> <div class="repeat"></div> <div class="repeat-x"></div> <div class="repeat-y"></div> <div class="no-repeat"></div> <div class="round"></div> <div class="space"></div> </body> </html>
7. font
font-family๋ฅผ ์ฌ์ฉํ๋ฉด CSS๋ฅผ ์ ์ฉํ์ฌ ๊ธ๊ผด์ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค. ์ด๋ ๊ธ๊ผด์ ์ฌ๋ฌ ๊ฐ๊ฐ ์ง์ ๊ฐ๋ฅ ํ๋ฐ ์ฌ๋ฌ ๊ฐ๋ฅผ ์ง์ ํ๋ ์ด์ ๋ ํด๋น ์์ฒด๊ฐ ์์ ๊ฒฝ์ฐ ๊ทธ ๋ค์ ๊ธ๊ผด์ด ์ฐจ์ ์ฑ
์ผ๋ก ์ฌ์ฉ๋๋๋ก ํด์ค๋๋ค.
font-size๋ฅผ ์ฌ์ฉํ๋ฉด CSS๋ฅผ ์ ์ฉํ์ฌ ๊ธ๊ผด์ ํฌ๊ธฐ๋ฅผ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค. ๊ธ๊ผด์ ์ง์ ํ๋๋ฐ ์ผ๋ฐ์ ์ธ ๋ฐฉ๋ฒ 3๊ฐ์ง๋ px, %, em ๋จ์๋ค์ด ์์ต๋๋ค. px ๋จ์๋ ๊ฐ์ฅ ๋ง์ด ํํ๋๋ ๋ฐฉ๋ฒ์ผ๋ก ์ง์ ๋ ์ซ์๋ ํฐํธ์ ๋์ด๊ฐ ๋ฉ๋๋ค. % ๋จ์๋ ๋ถ๋ชจ ์์์ ํฐํธ ํฌ๊ธฐ๊ฐ ๊ธฐ์ค์ด ๋์ด %๋ก ํฌ๊ธฐ๋ฅผ ์ง์ ํด ์ค๋๋ค. em ๋จ์๋ ๋ถ๋ชจ ์์์ ์๋ ํ
์คํธ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค์ผ๋ก ํ
์คํธ ํฌ๊ธฐ๋ฅผ ๋ณ๊ฒฝํฉ๋๋ค. W3C์์ ๊ถ์ฅํ๋ ๋จ์๋ก ๋ฐฐ์(2๋ฐฐ, 3๋ฐฐ, - n๋ฐฐ)๋ฅผ ์๋ฏธํฉ๋๋ค.
- font-weight์ ํ ์คํธ๋ฅผ ๊ตต์ ๊ธ๊ผด๋ก ํํํ ์ ์์ต๋๋ค. normal์ ์ผ๋ฐ ์คํ์ผ, bold๋ ํ ์คํธ๋ฅผ ๊ตต๊ฒ ์ง์ ํฉ๋๋ค.
- text-transform์ ํ ์คํธ๋ฅผ ๋๋ฌธ์๋ ์๋ฌธ์๋ก ํํํ ์ ์์ต๋๋ค. uppercase๋ ๋๋ฌธ์, lowercase๋ ์๋ฌธ์, capitalize๋ ๊ฐ ๋จ์ด์ ์ฒซ ๊ธ์๋ฅผ ๋๋ฌธ์๋ก ์ง์ ํฉ๋๋ค.
- font-style์ ํ ์คํธ๋ฅผ ๊ธฐ์ธ๊ธฐ ๊ธ๊ผด๋ก ํํํ ์ ์์ต๋๋ค. normal์ ์ผ๋ฐ ์คํ์ผ, italic์ ์ดํ๋ฆญ์ฒด, oblique๋ ์ค๋ธ๋ฆญ์ฒด๋ก ์ง์ ํฉ๋๋ค.
- text-align์ ํ ์คํธ์ ์ ๋ ฌ์ ํํํฉ๋๋ค. left๋ ์ผ์ชฝ, right๋ ์ค๋ฅธ์ชฝ, center๋ ๊ฐ์ด๋ฐ, justify๋ ๋ง์ง๋ง ์ค์ ์ ์ธํ๊ณ ์์ชฝ์ผ๋ก ์ ๋ ฌ ํฉ๋๋ค.
- text-decoration์ ๋ฐ์ค ์ ํํํ ์ ์์ต๋๋ค. none์ ํจ๊ณผ์ ๊ฑฐ, underline์ ๋ฐ์ค์ถ๊ฐ, overli
1. Font-size
font๊ฐ ๋ถ์ property๋ ์ผ๋ง๋ ์์๊น์? ์ฐ์ p ํ๊ทธ๋ก ๊ฐ๋จํ๊ฒ ๋ฌธ์๋ฅผ ๋ง๋ค์ด ํฌ๋กฌ ๊ฐ๋ฐ์ ๋๊ตฌ๋ก ์ด์ด๋ณด์์ต๋๋ค.
์์ ์ ํ ๋ฒํผ์ ๋๋ฅด์ ๋ค์ hello world๋ฅผ ํด๋ฆญํ์๊ณ ๊ฐ๋ฐ์ ๋๊ตฌ์์ Computed๋ฅผ ํด๋ฆญํด์ฃผ์ธ์. ๊ทธ ๋ค์ Show all์ ๋๋ฅด๋ฉด ๊ฐ์ง ์ ์๋ property๊ฐ ๋ชจ๋ ๋์ต๋๋ค. ์ฌ๊ธฐ์ font๊ฐ ๋ถ์ property๋ฅผ ์ฐพ์๋ณด๊ฒ ์ต๋๋ค.
์ฌ๊ธฐ์ ๋ณด๋ค ๋ง์ ์ ๋ณด๋ฅผ ์ต๋ํ ์ ์์ต๋๋ค. 1.3.2๋ถํฐ๋ ํด๋น ์ฐฝ์ ์ด์ง ์์ ๊ฒ์
๋๋ค.
๋ฐ๋ก ์์๋ณผ ์ ์๋ property์ value๋ก๋ ๋ง์ ๊ณ ๋ ํฐํธ๋ฅผ ์ฌ์ฉํ๊ณ ์๊ณ size๋ 16px, font-weight์ 400์ด๊ตฐ์.
์ฌ๊ธฐ์ font-size๊ฐ ๊ฐ์ง ์ ์๋ value๋ ์๋์ ๊ฐ์ต๋๋ค. ๊ฐ๊ฐ์ Test๋ w3schools์์ ํ ์ ์์ต๋๋ค.(https://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=medium)
- medium : ์น๋ธ๋ผ์ฐ์ ์์ ์ ํ ๊ธฐ๋ณธ ๊ธ์ํฌ๊ธฐ์ ๋๋ค.
- xx-small, x-small, small, large, x-large, xx-large : ์ด๋ฆ์์ ์ ์ ์๋ฏ์ด ๊ธฐ๋ณธ ๊ธ์ ํฌ๊ธฐ์์ ์์ ๊ฐ๋ถํฐ ํฐ ๊ฐ์ ์์ ๋๋ค.
- smaller, larger : ๋ถ๋ชจ ์์์ ์ํฅ์ ๋ฐ๋ ์๋์ ๊ธ์ ํฌ๊ธฐ์ ๋๋ค.
- length : px, cm ๋ฑ ๊ณ ์ ๋ ๊ธธ์ ๋๋ค.
- % : em, rem, % ๋ฑ ๊ฐ๋ณ ๊ธธ์ด์ ๋๋ค.
- initial : ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ค์ ํฉ๋๋ค.
- inherit : ๋ถ๋ชจ ์์์ ์์ฑ๊ฐ์ ์์๋ฐ์ต๋๋ค.
ย
2. font-family
- family-name : ๊ถ์, ๊ตด๋ฆผ, arial๊ฐ์ ๊ธ๊ผด ์ด๋ฆ์ ์ฌ์ฉํฉ๋๋ค. ์ง์ ํ ๊ธ๊ผด์ด ์ฌ์ฉ์์ ์ปดํจํฐ์ ์ค์น๋์ด ์์ง ์์ ๊ฒฝ์ฐ, ๊ธ๊ผด์ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ๊ฐ์ผ๋ก ํ์๋ฉ๋๋ค.
- initial : ๋ถ๋ชจ์ ์์ฑ์ ์์๋ฐ์ง ์๊ณ , ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ด๊ธฐํํฉ๋๋ค.
- inherit : ๋ถ๋ชจ์ ์์ฑ์ ์์ ๋ฐ์ต๋๋ค.
Web font (https://fonts.google.com/)
font-family์์ ๋ง์๋๋ ธ๋ฏ์ด ์ง์ ๊ธ๊ผด์ด ์ค์น๋์ง ์์ ์ ๊ธฐ๋ณธ๊ฐ์ผ๋ก ํ๊ธฐ๋ฉ๋๋ค. ์ด ๋ web fonts๋ฅผ ์ฌ์ฉํ๋ฉด ์ฌ์ฉ์์ ์ปดํจํฐ์ ์ค์น๋์ด ์์ง ์์ ๊ธ๊ผด์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
web fonts๋ ์ํ๋ font๊ฐ ์๋ ๊ณณ์ผ๋ก ์ฐ๊ฒฐํ์ฌ, ์ธ๋ถ ์คํ์ผ์ ๋ถ๋ฌ์์ ์ฌ์ฉํ๋ ๋ฐฉ์์ ์ฑํํ๊ณ ์์ต๋๋ค. ์ ๋ช
ํ web fonts๋ก๋ google font๊ฐ ์์ต๋๋ค.
์ฌ์ฉ๋ฐฉ๋ฒ์ ์๋ ์ฝ๋๋ฅผ ์ฐธ๊ณ ํ์๊ธธ ๋ฐ๋๋๋ค.
// ์ฌ์ฉ์์1 : href ์ฐธ๊ณ <head> <link href = 'http://fonts.googleapis.com/css?family=Open+Sans:400.300' rel='stylesheet' type='text/css'> <style type = "text/css"> h1 {font-family: 'Open Sans', sans-serif;}</style> </head>
// ์ฌ์ฉ์์2 : url ์ฐธ๊ณ <style type = "text/css"> @import url(http://fonts.googleapis.com/css?family=Open+Sans:400.300); h1 {font-family: 'Open Sans', sans-serif;} </style>
ย
์ถ์ฒ ์น ํฐํธ ์ฌ์ดํธ
Google fonts
๊ตฌ๊ธ ํฐํธ๋ ๊ฐ์ฅ ๋ํ์ ์ธ ์น ํฐํธ ์ฌ์ดํธ์
๋๋ค. ์ด๊ณณ์์๋ ๋ผ์ด์ ์ค์ ๋ํ ์ค๋ช
์ ์ ๊ณตํ๋ฉฐ, ์ํ๋ ํฐํธ ๊ตต๊ธฐ ์คํ์ผ์ ์ ํํ์ฌ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๋๋
๋๋๋ ์์
์ฉ ๋ฌด๋ฃ ํ๊ธ ํฐํธ ์ฌ์ดํธ๋ก, ์์
์ ์ผ๋ก ์ฌ์ฉํ ์ ์๋ ๋ฌด๋ฃ ํ๊ธ ํฐํธ๋ฅผ ๋ชจ์ ๋์ ์ฌ์ดํธ์
๋๋ค. ๋ง์ ๋ถ๋ค์ด ์ฆ๊ฒจ ์ฌ์ฉํ๋ ๋ฐฐ๋ฌ์ ๋ฏผ์กฑ ํฐํธ ๋ฑ ๋ค์ํ ํ๊ธ ํฐํธ๋ฅผ ์ ๊ณตํ ๋ฟ๋ง ์๋๋ผ ๋ผ์ด์ ์ค์ ๋ํ ์์ธํ ์ค๋ช
๋ ๊ธฐ์ฌ๋์ด ์์ต๋๋ค.
ย
Adobe Fonts
์ด๋๋น ํฐํธ์์๋ ๋ค์ํ ์น ํฐํธ๋ฅผ ์ ๊ณตํฉ๋๋ค. Adobe Creative Cloud ์ ๋ฃ ๊ตฌ๋
์๋ผ๋ฉด ๋ฌด์ ํ์ผ๋ก ์ฌ์ฉํ์ค ์ ์์ต๋๋ค.
ย
๋ค์ด๋ฒ ํ๊ธํ๊ธ ์๋ฆ๋ต๊ฒ ๊ธ๊ผด ๋ชจ์
๋ค์ด๋ฒ๊ฐ ๊ฐ๋ฐํ ๊ธ๊ผด์ ๋ค์ด๋ก๋ํ๊ฑฐ๋ ์น ํฐํธ URL์ ํตํด ์ฌ์ฉํ ์ ์์ต๋๋ค. ์์ฃผ ์ฌ์ฉ๋๋ ๋ํ์ ์ธ ๊ธ๊ผด์๋ ๋๋๊ธ๊ผด์ด ์์ต๋๋ค.
ย
์ถ์ฒ ์น ํฐํธ
Noto Sans Korean
ย
Gmarket Sans
ย
Spoqa Hans Sans Neo(์คํฌ์ปค ํ ์ฐ์ค ๋ค์ค)
ย
๋ฅ์จ Lv.1 ๊ณ ๋
ย
๋๋์คํ์ด
ย
์ฟ ํค๋ฐ
ย
Rix์ด์ ๋์ฒด
ย
font format
font format ์ด๋ ํฐํธ๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ด๋ฉฐ, ๋ธ๋ผ์ฐ์ ๋ณ๋ก ์๋ก ๋ค๋ฅธ ํฌ๋งท์ ์ง์ํ๊ธฐ ๋๋ฌธ์ ๋ธ๋ผ์ฐ์ ๋ณ ์ง์ ์ ๋ณด๋ฅผ ์์ ๋ ํ์๊ฐ ์์ต๋๋ค.
ย
- eot : ๋ง์ดํฌ๋ก์ํํธ๊ฐ ์น์์ ์ฌ์ฉํ๊ธฐ ์ํด ์ ์ํ ๊ธ๊ผด ํฌ๋งท์ ๋๋ค. IE ์์๋ง ์ง์ ๊ฐ๋ฅํฉ๋๋ค.
- woff : ์ฌ๋ฌ ํ์ฌ๋ค์ ํ์ ์ผ๋ก ์ ์๋ ํฌ๋งท์ด๋ฉฐ ๊ฐ์ฅ ๋๋ฆฌ ์ฌ์ฉ๋๋ ์น ๊ธ๊ผด ํฌ๋งท์ ๋๋ค.
- otf : ์ด๋๋น์ ๋ง์ดํฌ๋ก์ํํธ๊ฐ ํ๋ ฅํด์ ๋ง๋ TTF์ ๊ฐ์ ํ์ ๋๋ค.
- ttf : ์ ํ๊ณผ ๋ง์ดํฌ๋ก์ํํธ๊ฐ ๊ณ ์ํ ๋ฒกํฐ ๊ธ๊ผด ํฌ๋งท์ ๋๋ค. ๋๋ถ๋ถ์ ์น ๋ธ๋ผ์ฐ์ ์์ ์น ๊ธ๊ผด๋ก TTF๋ฅผ ์ง์ํฉ๋๋ค.
- svg : ๋ฒกํฐ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ SVG๋ฅผ ํ์ฉํ ๊ธ๊ผด ํํ์ ๋๋ค.
- woff2 : WOFF ํฌ๋งท์ ๊ฐ์ ํด 30% ์ ๋ ๋ ์์ ๊ธ๊ผด ํ์ผ๋ก ์์ถํ ์ ์๋๋ก ํ์ต๋๋ค. ํฐํธ์ ์ฉ๋์ ์ค์ด๋๋ฐ ํจ๊ณผ์ ์ ๋๋ค.
ย
๋ธ๋ผ์ฐ์ ๋ณ ํฌ๋งท ์ง์ ์ ๋ณด
Name
eot
woff
ttf/otf
svg
woff2
ย
3. font-weight
font-weight๋ ๊ธ์ ๊ตต๊ธฐ๋ฅผ ์ค์ ํ๋ ์์ฑ์
๋๋ค.
- normal - ๊ธฐ๋ณธ๊ฐ์ด๋ฉฐ ๋ณดํต ๊ตต๊ธฐ์ ๋๋ค.
- bold - ๊ตต์ ๊ตต๊ธฐ์ ๋๋ค.
- bolder - ์์๋ ๊ฐ๋ณด๋ค ๊ตต์ ๊ตต๊ธฐ์ ๋๋ค.
- lighter - ์์๋ ๊ฐ๋ณด๋ค ์์ ๊ตต๊ธฐ์ ๋๋ค.
- number- ์ซ์๋ก ๊ตต๊ธฐ๋ฅผ ์ง์ ํ๋ฉฐ 100,200,300,400๊ณผ ๊ฐ์ ์ซ์๋ฅผ ์ด์ฉํฉ๋๋ค.
- initial- ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ค์ ํฉ๋๋ค.
- inherit- ๋ถ๋ชจ ์์์ ์์ฑ๊ฐ์ ์์๋ฐ์ต๋๋ค.
ย
๊ตต๊ธฐ๊ฐ ๋์ผํ๋๋ผ๋ ๊ธ์์ฒด์ ๋ฐ๋ผ์ ์ฐจ์ด๊ฐ ๋ ์ ์์ต๋๋ค. ์ด ์ ์ ์ํ๋ฉฐ ์์๋ฅผ ๋ณด์ฌ๋๋ฆฌ๊ณ ๋ง๋ฌด๋ฆฌํ๋๋กํ๊ฒ ์ต๋๋ค!
<!doctype html> <html> <head> <meta charset="utf-8"> <style> div { } .weight-normal { font-weight: normal; } .weight-bold { font-weight: bold; } .weight-100 { font-weight: 100; } .weight-900 { font-weight: 900; } </style> </head> <body> <div> <p class="weight-normal">font-weight normal</p> <p class="weight-bold">font-weight bold</p> <p class="weight-100">font-weight 100</p> <p class="weight-900">font-weight 900</p> </div> </body> </html>
ย
google font
- ์ฒซ๋ฒ์งธ ๋ฐฉ๋ฒ
<--link--> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
body { font-family : 'Poppins', sans-serif; }
- ๋๋ฒ์งธ ๋ฐฉ๋ฒ
<style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); body { font-family : 'Poppins', sans-serif; } </style>
ย
google icon font
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<i class="far fa-file-"></i>
ย
fontasome
// example <i class="fas fa-bug"></i>
ย
bootstrap font
bootstrap font๋ ์์ ๋งจ ๋ง์ง๋ง ๋ถ๋ถ์ ๋ฃ์ด๋์์ต๋๋ค.
... ์ค๋ต ... <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css" /> ... ์ค๋ต ... <i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue"></i>
XEIcon
8. opacity
opacity๋ ์์์ ํฌ๋ช
๋๋ฅผ ์ง์ ํ ์ ์์ต๋๋ค. ์ด๋ ํฌ๋ช
๋๊ฐ ๋ค์ด๊ฐ ์์ ์์ ๋ด์ฉ๋ฌผ๋ ํจ๊ป ํฌ
๋ช
ํด์ง๋๋ค. ๊ฐ์ 0.0 ๊ณผ 1.0 ์ฌ์ด์ ์ซ์๋ฅผ ์ง์ ํ ์ ์์ผ๋ฉฐ ๋ง์ฝ ๊ฐ์ด 0.5๋ผ๋ฉด ํฌ๋ช
๋๋ 50%๋ผ๊ณ ํ ์ ์์ต๋๋ค.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>opacity</title> <style> .box { width: 200px; height: 100px; background: pink; } .box-opacity1 { position: absolute; top: 0; opacity: 0.8; } .box-opacity2 { position: absolute; top:100px; opacity: 0.5; } .box-opacity3 { position: absolute; top:200px; opacity: 0.2; } </style> </head> <body> <h1>h<br>e<br>l<br>l<br>o</h1> <div class="box box-opacity1"></div> <div class="box box-opacity2"></div> <div class="box box-opacity3"></div> </body> </html>
9. color
- color : red, #000, #000000, rgb(0, 0, 0), rgba(100, 100, 100, 0.3), transparent
HTML์์ ์์ ์ด๋ฆ, RGB๊ฐ, HEX๊ฐ์ผ๋ก ์์์ ์ง์ ํ ์ ์์ต๋๋ค. HTML ์์ํ ํ์ด์ง์์(https://html-color-codes.info/Korean/) ์ฌ๋ฌ ์์ ๊ฐ์ ํ์ธํ์ค ์ ์์ต๋๋ค.
ย
1. ์์ ์ด๋ฆ
๋ธ๋ผ์ฐ์ ๋ 140 ๊ฐ์ง ์์ ์ด๋ฆ์ ์ง์ํฉ๋๋ค. ๋ค๋ฅธ ํํ๋ฐฉ์์ ๋นํด ์๊ฐ ์ ํ์ ์
๋๋ค. MDN ๋ฌธ์์์๋ ํ์ธ ๊ฐ๋ฅํฉ๋๋ค. ์์ ์ด๋ฆ ๋ง๊ณ ๋ ๋ค์ ๋ฐฉ๋ฒ์ผ๋ก color๋ฅผ ํํํ ์ ์์ต๋๋ค.
โป ์ฐธ๊ณ - https://www.w3schools.com/colors/colors_names.asp
2. RGB๊ฐ
๋น์ 3์์์ธ ๋นจ๊ฐ์(Red), ์ด๋ก์(Green), ํ๋์(Blue)๋ฅผ ํผํฉํ์ฌ ์์ ๋ํ๋ด๋ ๋ฐฉ์.
RGB ๊ฐ์ 0 ~ 255์ ๊ฐ์ผ๋ก ํํ๋ฉ๋๋ค.
<head> <title>Color-RGB</title> <style> .box {width: 200px; height: 100px; background-color: RGB(102, 205,170)} </style> </head> <body> <div class="box">box</div> </body>
[์คํํ๋ฉด]
ย
3. HEX ๊ฐ(16์ง์)
HEX ๊ฐ์ 16์ง์ 6์๋ฆฌ ์ฝ๋๋ก ์์์ ํํํ๋ ๋ฐฉ์์
๋๋ค. 6์๋ฆฌ ์ฝ๋๋ ๊ฐ๊ฐ 2์๋ฆฌ์ฉ ๋นจ๊ฐ์, ๋
น์, ํ๋์์ ๋ํ ๊ฐ์ ํํํฉ๋๋ค. ์๋ฅผ ๋ค์ด ๋นจ๊ฐ์์ #FF0000, ๋ณด๋ผ์์ #800080์ผ๋ก ํํ๋ฉ๋๋ค.
- COD
<head> <title>Color-HEX</title> <style> .box {width: 200px; height: 100px; background-color: #F08080; } </style> </head> <body> <div class="box">box</div> </body>
ย
- ์คํํ๋ฉด
ย
ย
ย
color๊ฐ ๋ถ๋ ํ๋กํผํฐ๋ 4๊ฐ๊ฐ ์์ต๋๋ค. ์ฌ๊ธฐ์ background-color์ ๊ฐ์ด color๊ฐ ๋ค์ ๋ถ๋ ๊ฒ์ ์ ์ธํฉ๋๋ค.
- color : content์ ์์ ๋ํ๋ ๋๋ค. ๊ธ์์์ด๋ผ๊ณ ์๊ฐํ์๋ฉด ๋์ญ๋๋ค.
- color-interpolation
- color-interpolation-filters
- color-rendering
color๊ฐ ๊ฐ์ง ์ ์๋ value๋ ์๋์ ๊ฐ์ต๋๋ค.
- color : red, #000, #000000, rgb(0, 0, 0), rgba(100, 100, 100, 0.3), transparent
- initial : ์ด๊ธฐ ์ธํ ๊ฐ์ ๊ฐ์ ธ์ต๋๋ค.
- inherit : ๋ถ๋ชจ ์์์ ์์ฑ๊ฐ์ ์์๋ฐ์ต๋๋ค.
color๊ฐ ๊ฐ์ง ์ ์๋ value์ ๋ํ ์์ธํ ๋ด์ฉ์ WEBDIR ์ฌ์ดํธ์ ๋ธ๋ก๊ทธ(https://webdir.tistory.com/406) ๊ธ์ ์ฐธ๊ณ ๋ฐ๋๋๋ค.