border : ๊ฐ ์์์ ํ ๋๋ฆฌ๋ฅผ ๋ณ๊ฒฝ
border ๋ค์ ๋ค๋ฅธ ์์๋ฅผ ๋ถ์ฌ์ ์ฌ์ฉ ๊ฐ๋ฅ
border-left : ํ ๋๋ฆฌ์ ์ผ์ชฝ๋ถ๋ถ์ ๋ณ๊ฒฝ
12px solid #335 : ์ผ์ชฝ ํ ๋๋ฆฌ ๋๊ป๋ฅผ 12px, ๊ตต๊ฒ, #335์๊น๋ก ๋ณ๊ฒฝ
padding : ์ฌ๋ฐฑ
0.2em 0.5em : ์ธ๋ก๋ฐฉํฅ 0.2em, ๊ฐ๋ก๋ฐฉํฅ 0.5em
*์ฌ๊ธฐ์ em์ ์๋ ๋จ์๋ก ์์ฆ ๋ง์ด ์ฌ์ฉ๋๋ ๋ฐ์ํ ์น์ฌ์ดํธ์์ ์ด์ฉ๋๋ค.
font-size์ ๋น๋กํด์ ์ ๋์ ์ผ๋ก ๋ณ๊ฒฝ๋จ.
(px๋ pt๋ ์ ๋ ๋จ์)
1. font-size
sectionํ๊ทธ์์ id๋ฅผ ๋ถ์ฌํด์ค ๋ค, #์ ํ์๋ฅผ ์ด์ฉํ์ฌ section ํ๊ทธ ์์ font-size๋ฅผ ์ค์ ํด์ค๋ค.
๊ฐ๊ฐ pํ๊ทธ์์ class๋ฅผ ๋ถ์ฌํด์ฃผ๊ณ . ์ ํ์๋ฅผ ์ด์ฉํด pํ๊ทธ ์์ font-size๋ฅผ ์ค์ ํด์ค๋ค.
2. font-weight
sectionํ๊ทธ์์ id๋ฅผ ๋ถ์ฌํด์ค ๋ค, #์ ํ์๋ฅผ ์ด์ฉํ์ฌ section ํ๊ทธ ์์ font-weight๋ฅผ ์ค์ ํด์ค๋ค.
๊ฐ๊ฐ pํ๊ทธ์์ class๋ฅผ ๋ถ์ฌํด์ฃผ๊ณ . ์ ํ์๋ฅผ ์ด์ฉํด pํ๊ทธ ์์ font-weight๋ฅผ ์ค์ ํด์ค๋ค.
3. font - style
sectionํ๊ทธ์์ id๋ฅผ ๋ถ์ฌํด์ค ๋ค, #์ ํ์๋ฅผ ์ด์ฉํ์ฌ section ํ๊ทธ ์์ font-style๋ฅผ ์ค์ ํด์ค๋ค.
๊ฐ๊ฐ pํ๊ทธ์์ class๋ฅผ ๋ถ์ฌํด์ฃผ๊ณ . ์ ํ์๋ฅผ ์ด์ฉํด pํ๊ทธ ์์ font-style๋ฅผ ์ค์ ํด์ค๋ค.
4. font-family
4-1. ๋ด์ฅ ํฐํธ ์ฌ์ฉ
sectionํ๊ทธ์์ id๋ฅผ ๋ถ์ฌํด์ค ๋ค, #์ ํ์๋ฅผ ์ด์ฉํ์ฌ section ํ๊ทธ ์์ font-family๋ฅผ ์ค์ ํด์ค๋ค.
๊ฐ๊ฐ pํ๊ทธ์์ class๋ฅผ ๋ถ์ฌํด์ฃผ๊ณ . ์ ํ์๋ฅผ ์ด์ฉํด pํ๊ทธ ์์ font-famliy๋ฅผ ์ค์ ํด์ค๋ค.
* ๊ธ๊ผด ์ข ๋ฅ๋ฅผ ํ์ธํ๊ณ ์ถ์ผ๋ฉด http://www.w3schools.com/css/css_font.asp ์์ ํ์ธ
4-2. ๊ตฌ๊ธ ํฐํธ ์ฌ์ฉํ๊ธฐ
๊ตฌ๊ธ์์ ์ ๊ณตํ๋ ํฐํธ๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ์ฐ์ google font์ ์ ์ํด์ค๋ค.
์ํ๋ ํฐํธ๊ฐ ์๋ค๋ฉด ๊ฒ์์ฐฝ์ ์ด์ฉ, ์๋ค๋ฉด ์๋์ ๋์์๋ ํฐํธ์ค์์ ๋ง์์ ๋๋ ํฐํธ๋ฅผ ํด๋ฆญํด์ค๋ค.
ํด๋ฆญํ๋ฉด ํฐํธ์ ๋ํ ์ค๋ช ๋ค์ด ์ ํ์๋๋ฐ, ์๋๋ก ๋ด๋ ค๊ฐ์ styles ์์ญ์ผ๋ก ๊ฐ๋ฉด ๊ตต๊ธฐ์ ๋ฐ๋ผ์ ์ ํํ ์ ์๋ค.
download๋ฅผ ๋๋ฅด๋ฉด ๋ชจ๋ ๊ตต๊ธฐ์ ๊ธ๊ผด์ด ์ ์ฅ๋๋ค.
css์ ์ ์ฉํ๊ธฐ ์ํด์๋ ์ํ๋ style์์ select this style์ ๋๋ฌ์ค๋ค.
์ค๋ฅธ์ชฝ ์๋จ์ view selected families๋ฅผ ๋๋ฌ์ฃผ๋ฉด ๋ด๊ฐ selectํ ๊ธ๊ผด๋ค์ด ์ ์ฅ๋์ด ์๋๋ฐ,
์ฌ๋ฌ๊ฐ์ง๋ ํ๋ฒ์ ์ฌ์ฉ ๊ฐ๋ฅํ๋ค.
๋งํฌํ๊ทธ์ import ๋๊ฐ์ง ๋ฐฉ๋ฒ์ด ์ด๋ฒ์๋ ๋งํฌ ํ๊ทธ๋ฅผ ์ ํํ ๋ค์ ํ๋จ์ ์ฝ๋๋ฅผ ๋ณต์ฌํด์ ์ฌ์ฉํ๋ฉด ๋๋ค.
linkํ๊ทธ๋ฅผ ๋ณต์ฌํด์ ์ฌ์ฉํ๊ณ ์ ํ๋ ํ์ผ์ head ๋ถ๋ถ์ ๋ถ์ฌ๋ฃ๊ธฐ ํด์ค๋ค,
๊ตฌ๊ธ ํฐํธ๋ฅผ ์ฌ์ฉํ๊ณ ์ ํ๋ ๊ฐ๊ฐ pํ๊ทธ์์ class๋ฅผ ๋ถ์ฌํด์ค๋ค.
. ์ ํ์๋ฅผ ์ด์ฉํด pํ๊ทธ ์์ font-famliy๋ฅผ ์ค์ ํด์ค๋ค.
๊ฐ๊ฐ ์์ฑ์ ๊ตฌ๊ธํฐํธ์ link ํ๊ทธ ์ฝ๋ ๋ฐ์ css rules to specify families ๋ฅผ ์ฌ์ฉํด์ ์ฌ์ฉํ๊ณ ์ ํ๋ ํ๊ทธ์ ๋ง์ถฐ์ ์์ฑํ๋ฉด ๋๋ค.
'STUDY > CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
CSS - text (0) | 2022.05.13 |
---|---|
CSS - ์ ํ์๋ฅผ ์ด์ฉํด์ css ์ ์ฉ (0) | 2022.04.29 |
CSS - css๋ฅผ ์ ์ฉํ๋ 3๊ฐ์ง ๋ฐฉ๋ฒ (0) | 2022.04.29 |