์ ์ฒด ๊ธ
[css] 04. ๋ ์ด์์ ํฌ์ง์ ๋ - margin ๊ฒน์นจ ํ์
ํ ๋ฐํ ์ด ๋ง๋ฌผ๋ฆฌ๋ฉด ๊ฐ์ด ํฐ ๊ฑธ๋ก ์ ์ฉ๋จ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์๋ ์ฌ๋ฐฑ์ ๋๋ ค์ฃผ๊ฑฐ๋ ์ธ๋ผ์ธ ๋ธ๋ก์ ์ ์ฉํด์ผ ํจ
[CSS] 04. ๋ ์ด์์ ํฌ์ง์ ๋
๋ฐ์ค ๋ชจ๋ธ 1) ๋ธ๋ก ๋ ๋ฒจ ๋ธ๋ก ๋ ๋ฒจ ์์๋ ์ ํ ์ค ๋ฐ๊ฟ์ด ๋ค์ด๊ฐ ๋ค๋ฅธ ์์๋ค์ ๋ค๋ฅธ ์ค๋ก ๋ฐ์ด๋ด๊ณ ํผ์ ํ ์ค์ ์ฐจ์ง 2) ์ธ๋ผ์ธ ๋ ๋ฒจ ๋ฐ์ค ๋ชจ๋ธ์ผ๋ก ๊ตฌ์ฑ๋๊ณ ํ์ฒ๋ผ ์ฌ๊ฐํ ๊ฐ์ ํํ๋ก ๋ง๋ค์ด์ง width, height ๊ณ์ฐ magin, border, padding ์ ํฉ์ฐํด์ค์ผ ํจ width ์์๋ ์ ์ ๋๊ป์ padding์ด ํฌํจ๋์ด ์์์ผ๋ก ์ด๋ฅผ ๊ฐํด์ผ ํจ ์ฐ์ฐ์ ํจ์ฌ ์ฌ์ margin์ ํฌํจ๋์ง ์๋๋ค. min-height min-width ์๋์ผ๋ก contet์ ๋์ด๊ฐ ๋์ด๋จ ์์ ๋ ๊ฒ ๊ทธ๋ฅ height๋ฅผ ์ฃผ๋ฉด ๋์ด๋ณด๋ค ๋ง์ ๋ด์ฉ์ ๋ด์ผ๋ฉด ๋์น๋ค๋ ๋ฌธ์ ๊ฐ ์์ ์ width, height ์์ฑ์ ๋ฌด์๋๋ฉฐ, padding์ ๋ฐ์๋๊ณ , margin์ ์ข์ฐ ๊ฐ๊ฒฉ๋ง ๋ฐ์์ด ๋๊ณ ์ํ ๊ฐ๊ฒฉ์ ๋ฐ์์ด..
[CSS] 03. ๋ฐฐ๊ฒฝ ๋ฐ ์ด๋ฏธ์ง ๊ด๋ จ ์คํ์ผ
background-color ์์์ ๋ฐฐ๊ฒฝ ์์ ์ค์ ํ๋์ ๊ฐ์ ์ฌ์ฉํด ์ค์ background-image ์์์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์ค์ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๊ฐ ์ ์ผ๋ฉด ๊ธฐ๋ณธ์ ์ผ๋ก ๋ฐ๋ณต ๋ฐฐ๊ฒฝ์ ๋ง์ฐ์ค ์ฐ์ธก์ ๋๋ฅด๋ฉด ๋ค์ด๋ก๋๊ฐ ๋์ง ์์ .bg1 { background-image: url("bg1.png"); } background - repeat ๋จ์ถํ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์ด๋ป๊ฒ ๋ฐ๋ณตํ ์ง๋ฅผ ์ค์ background์ผ๋ก no-repeat ์ฌ์ฉ ๊ฐ๋ฅ ๋ฐฐ๊ฒฝ ๋ ๊ฐ ์ฌ์ฉ ๊ฐ๋ฅ .bg1 { background-image: url("bg1.png"); } .bg2 {background-image: url("bg1.png"); background-repeat: repeat-x; } .bg3 {background-image: url("b..
[CSS]
font-family ์๋ฐ ์คํฌ๋ฆฝํธ๋ ์๋ฐ์ ์ ์ฌํ์ฌ ๋ณ์๋ช ์ -(ํ์ดํ)์ ์ค ์ ์์. ์คํฌ๋ฆฝํธ๋ก ๊ณ ์น ๋, -(ํ์ดํ)์ด ๋ค์ด๊ฐ ๊ฒ์ -์ ๋นผ๊ณ ๋ท ๋จ์ด์ ์ฒซ ๊ธ์๋ฅผ ๋๋ฌธ์๋ก ์์ ํจ font-family -> fontFamily๋ก ์ฌ์ฉํ๋ค. Sans-Serif ๊ธ๊ผด์ ๊ฑฐ์ ๋ชจ๋ os์์ ์ง์์ ํด์ค arial ์ ์ ๋ชฉ์ ๋ง์ด ์ฌ์ฉํ๋ ๊ธ๊ผด @font-face ์์ฑ ํด๋ผ์ด์ธํธ์๊ฒ ์๋ ํฐํธ๋ ์ด์ฉํ ์ ์๋๋ก ์ง์ํด์ค Web Fonts 1) CDN ๋ฐฉ์ ์น์์ ํฐํธ๋ฅผ ๊ฐ์ ธ์์ผ ํ๋ฏ๋ก ์๋๊ฐ ๋๋ฆฌ์ง๋ง ์์ฃผ ๊ฐ๋จํ๋ค๋ ์ฅ์ ์ค๋ฌด์์๋ ์ฌ์ฉํ์ง ์๋ ๋ฐฉ์ CDN์์ import @import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css); C..