STUDY/CSS (4) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ CSS - text text๋ก ์์ํ๋ ๊ธ์์์ฑ 1. text-align : ์ํ ์ ๋ ฌ 2. text-decoration : ๊ธ์์ ์ฌ๋ฌ์ค ์ง์ 3. text-indent : ๋ค์ฌ์ฐ๊ธฐ ์ง์ 4. text-transform : ์๋ฌธ ๋/์๋ฌธ์ ๋ณ๊ฒฝ 1. text-align text-align: left; : ์ผ์ชฝ์ ๋ ฌ text-align: center; : ๊ฐ์ด๋ฐ ์ ๋ ฌ text-align: right; : ์ค๋ฅธ์ชฝ์ ๋ ฌ text-align: justify; : ์์ชฝ์ ๋ ฌ * inputํ๊ทธ ์์์๋ ์ฌ์ฉ ๊ฐ๋ฅ *tableํ๊ทธ ์์์๋ ์ฌ์ฉ ๊ฐ๋ฅ 2.text-decoration text-decoration : overline; : ๊ธ์ ์์ ์ค text-decoration : line-through; : ๊ธ์ ์ค๊ฐ์ ์ค(์ทจ์์ ) tex.. CSS - font 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๋ฅผ ์ค์ .. CSS - ์ ํ์๋ฅผ ์ด์ฉํด์ css ์ ์ฉ 1. tag์ ํ์ - tag ๊ทธ๋๋ก ์ ํ์๋ก ํ์ฉ. ๊ฐ์ tag๋ ๋์ผํ ์คํ์ผ๋ก ๋ชจ๋ ์ ์ฉ ๋จ. ์๋์ ์ฉ, ๊ฐ์ ์ ์ฉ. 2. id์ ํ์ - #id๊ฐ ํํ๋ก ์ ํ์๋ก ํ์ฉ. id๊ฐ์ด ์ค๋ณต์ ์ฉ ๋ถ๊ฐํ ํน์ง์ด ์์ผ๋ฏ๋ก ์คํ์ผ๋ ์ค๋ณต์ ์ฉ ๋ถ๊ฐ. ์ฃผ๋ก ๊ตฌ์กฐ์ ์ธ ๋ชฉ์ ์ ์ฌ์ฉ ๋จ. 3. class์ ํ์ - .class๊ฐ ํํ๋ก ์ ํ์๋ก ํ์ฉ. class๊ฐ์ด ์ค๋ณต์ ์ฉ์ด ๊ฐ๋ฅํ๋ฏ๋ก ์ฌ๋ฌ ์์์ ๊ฐ์ ์คํ์ผ์ ์ฉ ๊ฐ๋ฅ. ์ฃผ๋ก ๋์์ธ์ ์ธ ๋ชฉ์ ์ ์ฌ์ฉ ๋จ. li ํ๊ทธ์ ๊ฐ๊ฐ id์ class ํ๊ทธ๋ก ๊ตฌ๋ถํด์ค ๋ค, ์ style ํ๊ทธ์์ id ํ๊ทธ๋ #์ ์ด์ฉํด์, class ํ๊ทธ๋ . ์ ์ด์ฉํด์ ํ์ฉํด์ค๋ค. ์ธ๋ถํ์ผ์์๋ ๋๊ฐ์ด ์ ์ฉ ํ ์ ์์ ์ ์ฉํ๊ณ ์ถ์ ํ๊ทธ์ ํด๋์ค๋ฅผ ๋ถ์ฌํด์ฃผ๊ณ , ํด๋์ค๋ฅผ ๋ถ์ฌํด์คฌ์ผ๋ . ์ ์ฌ์ฉํด์.. CSS - css๋ฅผ ์ ์ฉํ๋ 3๊ฐ์ง ๋ฐฉ๋ฒ 1. External Css ์ธ๋ถ ํ์ผ ๋ฐฉ์ - css์คํ์ผ ์์ค๋ฅด ์ธ๋ถ ํ์ผ๋ก ๋ ๋ฆฝ ์์ผ ์์ฑ ํ ์น๋ฌธ์์ ์ฐ๊ฒฐํ์ฌ ์ ์ฉ. - ์น๋ฌธ์์ head ํ๊ทธ ๋ด์ link ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ์ธ๋ถ css ํ์ผ์ ์ฐ๊ฒฐ ์์ผ ์ค. bodyํ๊ทธ ์์ ์๋ background color, font-size, lint-height ๋ฅผ ๋ณ๊ฒฝ background color : ๋ฐฐ๊ฒฝ์ font-size : ๊ธ์ ํฌ๊ธฐ lint-height : ์ค ๋์ด 2. Internal CSS ์น๋ฌธ์ ๋ด์ฅ ๋ฐฉ์ - ์น๋ฌธ์์ head ํ๊ทธ ๋ด์ ์คํ์ผ ์์ค๋ฅผ ์์ฑ. test-align : ๊ธ์ ์ ๋ ฌ start : ์ผ์ชฝ์ ๋ ฌ end : ์ค๋ฅธ์ชฝ์ ๋ ฌ center : ๊ฐ์ด๋ฐ ์ ๋ ฌ justify : ์์ชฝ ์ ๋ ฌ 3. Inline CSS ์ธ๋ผ์ธ๋ฐฉ์ - ์น๋ฌธ์.. ์ด์ 1 ๋ค์