CSS(28)
-
7-4. CSS ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์ฐ์ต๋ฌธ์ 1,2,3
* ์ฐ์ต๋ฌธ์ 1 ์น ๋์์ธ ํธ๋ ๋๋ฅผ ๋ฐ๋ผ์ก๋ ๋น๋ฒ ๋๊ณต๊ฐ! ๊ทธ๋ํฝ ํ๋ก๊ทธ๋จ์ผ๋ก ์น ๋์์ธ ์์๋ฅผ ์ผ์ผ์ด ๋ง๋ค์ด ์น์ฌ์ดํธ๋ฅผ ์ ์ํ๋ ์๋๋ ์ง๋ฌ๋ค. ์ด์ ๋ชจ๋ฐ์ผ, ํ๋ธ๋ฆฟ, PC ๋ฑ ๋ฉํฐ ๋๋ฐ์ด์ค์ ํ ๋ฒ์ ์ ์ฉํ ์ ์๋ ์น ๋์์ธ ๋ฐฉ๋ฒ์ ์์์ผ ํ๋ค. ๋ฐ๋ก ์ฝ๋ฉ์ ์ด์ฉํ ์น ๋์์ธ์ด๋ค. * ์ฐ์ต๋ฌธ์ 2 ์น ๋์์ธ ํธ๋ ๋๋ฅผ ๋ฐ๋ผ์ก๋ ๋น๋ฒ ๋๊ณต๊ฐ! ๊ทธ๋ํฝ ํ๋ก๊ทธ๋จ์ผ๋ก ์น ๋์์ธ ์์๋ฅผ ์ผ์ผ์ด ๋ง๋ค์ด ์น์ฌ์ดํธ๋ฅผ ์ ์ํ๋ ์๋๋ ์ง๋ฌ๋ค. ์ด์ ๋ชจ๋ฐ์ผ, ํ๋ธ๋ฆฟ, PC ๋ฑ ๋ฉํฐ ๋๋ฐ์ด์ค์ ํ ๋ฒ์ ์ ์ฉํ ์ ์๋ ์น ๋์์ธ ๋ฐฉ๋ฒ์ ์์์ผ ํ๋ค. ๋ฐ๋ก ์ฝ๋ฉ์ ์ด์ฉํ ์น ๋์์ธ์ด๋ค. * ์ฐ์ต๋ฌธ์ 3 ๋ํ์ธ๋ก ์ฌ ์์ต๊ธฐ์ ๋ชจ์ง ์ ์ ์ ์ฌ๋ฌ๋ถ์ ๊ธฐ๋ค๋ฆฝ๋๋ค ๋ชจ์ง๋ถ์ผ ์๋์ด์(0๋ช ) : ํ๋ด ์์์ ๋ผ๋์ค ๋ฐฉ์ก์ผ๋ก ๋ณด๋ ์คํ๋..
2021.10.14 -
7-3. CSS ๊ทธ๋ผ๋ฐ์ด์ ํจ๊ณผ๋ก ๋ฐฐ๊ฒฝ ๊พธ๋ฏธ๊ธฐ (linear-gradient, radial-gradient)
1. ์ ํ ๊ทธ๋ผ๋ฐ์ด์ ์ ํ ๊ทธ๋ผ๋ฐ์ด์ ์ด๋ ์์์ด ์์ง, ์ํ ๋๋ ๋๊ฐ์ ๋ฐฉํฅ์ผ๋ก ์ผ์ ํ๊ฒ ๋ณํ๋ ๊ฒ์ ๋งํ๋ค. linear-gradient ๋ ์์์ด ์ด๋ ๋ฐฉํฅ์ผ๋ก ๋ฐ๋๋์ง ๊ทธ๋ฆฌ๊ณ ์ด๋ค ์์์ผ๋ก ๋ฐ๋๋์ง ์๋ ค์ค์ผํ๋ค. linear-gradient ( to ๋๋ , , ...); 1๏ธโฃ ๋ฐฉํฅ : ๊ทธ๋ผ๋ฐ์ด์ ๋ฐฉํฅ์ ์ง์ํ ๋๋ ๋ ์ง์ ์ ๊ธฐ์ค์ผ๋ก to ์์ฝ์ด์ ํจ๊ป ์ฌ์ฉํ๋ค. ์์ฝ์ด๋ ์ต๋ 2๊ฐ๊น์ง ์ฌ์ฉ๊ฐ๋ฅํ๋ค. ์์ฝ์ด๋ ์ํ ๋ฐฉํฅ left, right ์์ง ๋ฐฉํฅ top, bottom ex) ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ : to right ์ผ์ชฝ ์๋์์ ์ค๋ฅธ์ชฝ ์ : to right top 2๏ธโฃ ๊ฐ๋ : ๊ฐ๋๋ ์ ํ ๊ทธ๋ผ๋ฐ์ด์ ์์ ์์์ด ๋ฐ๋๋ ๋ฐฉํฅ์ ์๋ ค์ฃผ๋ ๋ฐฉ๋ฒ์ด๋ค. ๊ฐ๋๋ ๊ทธ๋ผ๋ฐ์ด์ ์ด ๋๋๋ ๋ถ๋ถ์ด๊ณ ๊ฐ์ de..
2021.10.14 -
7-2. CSS ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์ง์ ( background-image, background-repeat, background-position, background-origin, background-attachment ๋ฑ )
1. background-image background-image ๋ ์น ์์์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ ๋ ์ฌ์ฉํ๋ ์์ฑ์ด๋ค. background-image : url ('์ด๋ฏธ์ง ํ์ผ ๊ฒฝ๋ก') ์ด๋ฏธ์ง ํ์ผ ๊ฒฝ๋ก๋ ํ์ฌ ์น ๋ฌธ์ ๊ธฐ์ค์ผ๋ก ์๋ ๊ฒฝ๋ก๋ฅผ ์ง์ ํ๊ฑฐ๋, http:// ๋ก ์์ํ๋ ์ ๋ ๊ฒฝ๋ก๋ฅผ ์ฌ์ฉํ ์๋ ์๋ค. 2. background-repeat background-repeat ์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ๋ฐ๋ณต ๋ฐฉ๋ฒ์ ์ง์ ํ๋ ์์ฑ์ด๋ค. background-repeat ์์ฑ๊ฐ 1๏ธโฃ repeat : ๋ธ๋ผ์ฐ์ ํ๋ฉด์ ๊ฐ๋ ์ฐฐ ๋๊น์ง ๊ฐ๋ก์ ์ธ๋ก๋ก ๋ฐ๋ณตํ๋ค. (๊ธฐ๋ณธ๊ฐ) 2๏ธโฃ repeat-x : ๋ธ๋ผ์ฐ์ ํ๋ฉด ๋๋น์ ๊ฐ๋ ์ฐฐ ๋ ๊น์ง ๊ฐ๋ก๋ก ๋ฐ๋ณตํ๋ค. 3๏ธโฃ repaet-y : ๋ธ๋ผ์ฐ์ ํ๋ฉด ๋๋น์ ๊ฐ๋ ์ฐฐ ๋ ..
2021.10.13 -
7-1. CSS ๋ฐฐ๊ฒฝ์๊ณผ ๋ฐฐ๊ฒฝ ๋ฒ์ ์ง์ (background-color, background-clip)
1. backgroud-color background-color : ๋ฐฐ๊ฒฝ์์ ์ง์ ํ๋ ์์ฑ์ด๋ค. background-color ๋ ์์์ ์ค๋ช ํ 16์ง์๋ rgb๊ฐ ๋๋ ์์ ์ด๋ฆ์ ์ฌ์ฉํด์ ์ง์ ํ๋ค. ์ด๋ค ๋ฐฉ๋ฒ์ ์ฌ์ฉํ ์ง๋ ์ฌ์ฉ์๊ฐ ์ ํํ๊ธฐ ๋๋ฆ์ผ๋ก ์์์ ์ธ๋ฐํ ์กฐ์ ํ๊ณ ์ถ๋ค๋ฉด 16์ง์๊ฐ์ ์ฌ์ฉํ๊ณ , ํฌ๋ช ๋๋ ํจ๊ป ์กฐ์ ํ๊ณ ์ถ๋ค๋ฉด rgba ํ๊ธฐ๋ฒ์ ์ฌ์ฉํ๋ค. 2. background-clip background-clip : ๋ฐฐ๊ฒฝ์์ ์ ์ฉ ๋ฒ์๋ฅผ ์กฐ์ ํ๋ ์์ฑ์ด๋ค. ๋ฐ์ค๋ชจ๋ธ ๊ด์ ์์ ๋ฐฐ๊ฒฝ์ ์ ์ฉ ๋ฒ์๋ฅผ ์กฐ์ ํ ์๋ ์๋ค. ๋ฐ์ค๋ชจ๋ธ์ ๊ฐ์ฅ ์ธ๊ณฝ์ธ ํ ๋๋ฆฌ๊น์ง ์ ์ฉํ ์ง, ํ ๋๋ฆฌ๋ฅผ ๋นผ๊ณ ํจ๋ฉ ๋ฒ์๊น์ง ์ ์ฉํ ์ง, ์๋๋ฉด ๋ด์ฉ ๋ถ๋ถ์๋ง ์ ์ฉํ ์ง ์ ํํ ์ ์๋ค. backgroud-clip ์์ฑ๊ฐ 1๏ธโฃ borde..
2021.10.13 -
6-7. CSS ๊ธฐ์ด ์ฐ์ต๋ฌธ์ 1,2,3
* ์ฐ์ต๋ฌธ์ 1 * ์ฐ์ต๋ฌธ์ 2 ๊ฐ์์ง ์ฉํ ์ค๋นํ๊ธฐ ๊ฐ์์ง ์ง ๊ฐ์์ง๊ฐ ํธํ ์ด ์ ์๋ ํฌ๊ทผํ ์ง์ด ํ์ํฉ๋๋ค. ๊ฐ์์ง์ ์ง์ ๊ฐ์์ง๊ฐ ๋ค ํฐ ํ์๋ ๊ณ์ ์ธ ์ ์๋ ์ง์ผ๋ก ๊ตฌ์ ํ์ธ์.์ง์ ๊ตฌ์ ํ์ค ๋๋ ๋ฐ์์ง์ด ์ ๋์ด ์๋์ง, ์ธํ์ด ๊ฐํธํ ์ ํ์ธ์ง ๊ผญ ํ์ธํ์๊ณ ๊ณ ๋ฅด์๋ ๊ฒ์ด ์ข์ต๋๋ค. ๊ฐ์์ง ๋จน์ด ๊ฐ์์ง์ ๋จน์ด๋ ๊ผญ ์ด๋ฆฐ ๊ฐ์์ง์ฉ์ผ๋ก ๋์์๋ ์ฌ๋ฃ๋ฅผ ์ ํํ์ธ์. ๊ฐ์์ง๋ค์ ์ฌ๋์ ๋นํด ์ฑ์ฅ์๋๊ฐ 8๋ฐฐ์ ๋ ๋น ๋ฅด๋ต๋๋ค. ๋ฐ๋ผ์ ๊ฐ์์ง์๊ฒ๋ ์ฑ์ฅ์๋์ ๋ง๋ ์ฌ๋ฃ๋ฅผ ๊ธ์ฌํ์ ์ผ ํฉ๋๋ค. ์ฌ๋์ด ๋จน๋ ์์์ ๋จน๊ฒ ๋๋ฉด ์๋ ๊ณผ ํฅ์ ๋ฃ์ ์ ๋ง์ด ์ต์ํด์ง๊ณ , ๋น๋ง์ด ๋ ๊ฐ๋ฅ์ฑ์ด ๋งค์ฐ ๋์์ง๋๋ค. ๊ฐ์์ง์ฉ ์ฌ๋ฃ๋ ์ํ 12๊ฐ์๊น์ง ๊ธ์ฌํ์ ์ผ ํฉ๋๋ค. ๋ฐฅ๊ทธ๋ฆ, ๋ฌผ๋ณ ๋ฐฅ๊ทธ๋ฆ์ ์ฝ๊ฒ ๋์ด์ง์ง ์๋๋ก ๋ฐ๋ฅ์ด ๋์ ๊ฒ..
2021.10.12 -
6-5. CSS 3๋จ ๋ ์ด์์ ๋ง๋ค๊ธฐ_์ฐ์ต๋ฌธ์ 1,2
* ์ฐ์ต๋ฌธ์ 1 html ์ฌ์ดํธ ์ ๋ชฉ ์ฌ์ด๋๋ฐ ๋ณธ๋ฌธ ์ฌ์ด๋๋ฐ ํธํฐ CSS * { margin:0; padding:0; box-sizing: border-box; } #container { width: 1200px; margin: 20px auto; } #header { width: 100%; height: 120px; background-color: #acacac; } #left-sidebar { width: 250px; height: 600px; float: left; background-color:#e9e9e9; } #contents { width: 800px; height: 600px; float: left; background-color:#f7f7f7; } #right-sidebar { width..
2021.10.12 -
6-4. CSS ๋ ์ด์์ ๋ง๋ค๊ธฐ, display, float โญโญ
1. display display ์์ฑ์ ์ฌ์ฉํ๋ฉด ๋ธ๋ก ๋ ๋ฒจ ์์์ ์ธ๋ผ์ธ ๋ ๋ฒจ ์์๋ฅผ ์๋ก ๋ฐ๊ฟ์ ์ฌ์ฉํ ์ ์๋ค. display ์์ฑ์ ์ฃผ๋ก ์น ๋ฌธ์์ ๋ด๋น๊ฒ์ด์ ์ ๋ง๋ค๋ฉด์ ๋ฉ๋ด ํญ๋ชฉ์ ๊ฐ๋ก๋ก ๋ฐฐ์นํ ๋ ๋ง์ด ์ฌ์ฉํ๊ณ , ์ด๋ฏธ์ง๋ฅผ ํ ํํ๋ก ๋ฐฐ์นํ ๋ ์ฌ์ฉํ๋ค. display ์์ฑ๊ฐ 1๏ธโฃ block : ์ธ๋ผ์ธ ๋ ๋ฒจ ์์๋ฅผ ๋ธ๋ก ๋ ๋ฒจ ์์๋ก ๋ง๋ ๋ค. 2๏ธโฃ inline : ๋ธ๋ก ๋ ๋ฒจ ์์๋ฅผ ์ธ๋ผ์ธ ๋ ๋ฒจ ์์๋ก ๋ง๋ ๋ค. 3๏ธโฃ inline-block : ์ธ๋ผ์ธ ๋ ๋ฒจ ์์์ ๋ธ๋ก ๋ ๋ฒจ ์์์ ์์ฑ์ ๋ชจ๋ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ ๋ง์ง๊ณผ ํจ๋ฉ์ ์ง์ ํ ์ ์๋ค. 4๏ธโฃ none : ํด๋น ์์๋ฅผ ํ๋ฉด์ ํ์ํ์ง ์๋๋ค. 2. float float ์์ฑ์ ์น ์์๋ฅผ ๋ฌธ์ ์์ ๋ ์๊ฒ ๋ง๋ ๋ค. float ์์ฑ๊ฐ 1๏ธโฃ l..
2021.10.12 -
6-3. CSS margin, padding
1. margin margin ์ ์์ ์ฃผ๋ณ์ ์ฌ๋ฐฑ์ ์๋ฏธํ๋ค. ๋ฐ๋ผ์ ๋ง์ง์ ์ด์ฉํ๋ฉด ์์์ ์์ ์ฌ์ด์ ๊ฐ๊ฒฉ์ ์กฐ์ ํ๋ค. margin : | | auto ์ด๋์๋ top, right, bottom, left ์์ผ๋ก ๊ฐ์ ์ง์ ํ๋๊น ์์๋ฅผ ์ ์๊ณ ์์ด์ผ ํ๋ค. ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ฐ์ ๋๊ตฌ์์ ์ด๋ฅผ ์ข ๋ ์์ธํ ํ์ธํ ์ ์์ผ๋ ๊ฑฐ๊ธฐ์ ์ฐธ๊ณ ํ๊ธฐ! margin์ ์ด์ฉํด์ ์น ๋ฌธ์๋ฅผ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌํ ์ ์๋ค. ๋ฐฐ์นํ ์์์ ํฌ๊ธฐ๊ฐ ์ ํด์ ธ ์๊ณ , margin-left์ margin-right ์์ฑ๊ฐ์ auto๋ก ์ง์ ํด์ฃผ๋ฉด ๋๋ค! ๊ทธ๋ฆฌ๊ณ ๋ง์ง์ด ๊ฒน์ณ์ง๋ ํ์์ ๋ง์ง ์ค์ฒฉ ์ด๋ผ๊ณ ํ๋ค. 2. padding padding ์ด๋ ์ฝํ ์ธ ์์ญ๊ณผ ํ ๋๋ฆฌ ์ฌ์ด์ ์ฌ๋ฐฑ์ ๋งํ๋ค. padding ์ญ์ ๊ฐ๋ฐ์ ๋๊ตฌ์์ ๋ณด๋๊ฒ ์ ํํ..
2021.10.12 -
6-2. CSS ํ ๋๋ฆฌ ์คํ์ผ box-style, border-width, border-color, border- radius
* ๋ฐ์ค ๋ชจ๋ธ ๋ฐฉํฅ top -> right -> bottom -> left ๋ก ์๊ณ๋ฐฉํฅ์ด๋ค!!! 1. border-style 1๏ธโฃ none : ํ ๋๋ฆฌ๊ฐ ์๋ ๊ฒ์ผ๋ก ๊ธฐ๋ณธ๊ฐ์ด๋ค. 2๏ธโฃ hidden : ํ ๋๋ฆฌ๋ฅผ ๊ฐ์ถ๋ ๊ฒ์ด๋ค. 3๏ธโฃ solid : ํ ๋๋ฆฌ๋ฅผ ์ค์ ์ผ๋ก ํ์ํ๋ค. 4๏ธโฃ dotted : ํ ๋๋ฆฌ๋ฅผ ์ ์ ์ผ๋ก ํ์ํ๋ค. 5๏ธโฃ dashed : ํ ๋๋ฆฌ๋ฅผ ์งง์ ์ง์ ์ผ๋ก ํ์ํ๋ค. 6๏ธโฃ double : ํ ๋๋ฆฌ๋ฅผ ์ด์ค์ ์ผ๋ก ํ์ํ๋ค. 7๏ธโฃ groove : ํ ๋๋ฆฌ๋ฅผ ์กฐ๊ฐํ ๊ฒ์ฒ๋ผ ํ์ํ๋ค. 8๏ธโฃ inset 9๏ธโฃ outset ๐ ridge : ํ ๋๋ฆฌ๋ฅผ ์ฐฝ์์ ํ์ด๋์จ ๊ฒ์ฒ๋ผ ํ์ํ๋ค. 2. border-width border-width : ํ ๋๋ฆฌ์ ๋๊ป๋ฅผ ์ง์ ํ๋ ์์ฑ์ด๋ค. border-width :..
2021.10.12 -
6-1. CSS ๋ฐ์ค ๋ชจ๋ธ, padding, margin, border
1. ๋ธ๋ก ๋ผ๋ฒจ ์์, ์ธ๋ผ์ธ ๋ผ๋ฒจ ์์ 1๏ธโฃ ๋ธ๋ก ๋ผ๋ฒจ ์์ : ํ๊ทธ๋ฅผ ์ฌ์ฉํด ์์๋ฅผ ์ฝ์ ํ์ ๋ ํผ์ ํ ์ค์ ์ฐจ์งํ๋ ๊ฒ์ ๊ฐ๋ฆฌํจ๋ค. ์ฆ, ๋๋น๊ฐ 100%๋ผ๋ ๋ป!์ผ๋ก ์ผ์ชฝ์ด๋ ์ค๋ฅธ์ชฝ์ ๋ค๋ฅธ ์์๊ฐ ์ฌ ์ ์๋ค. , , 2๏ธโฃ ์ธ๋ผ์ธ ๋ผ๋ฒจ ์์ : ๋ธ๋ก ๋ผ๋ฒจ ์์์๋ ๋ค๋ฅด๊ฒ ํ ์ค์ ์ฐจ์งํ์ง ์๋๋ค. ์ฝํ ์ธ ๋งํผ๋ง ์์ญ์ ์ฐจ์งํ๊ณ ๋๋จธ์ง ๊ณต๊ฐ์๋ ๋ค๋ฅธ ์์๊ฐ ์ฌ ์ ์์ด, ํ ์ค์ ์ธ๋ผ์ธ ๋ ๋ฒจ ์์๋ฅผ ์ฌ๋ฌ๊ฐ ํ์ํ ์ ์๋ค. , , 2. ๋ฐ์ค ๋ชจ๋ธโญโญ ๋ฐ์ค ๋ชจ๋ธ์ ์ฝํ ์ธ ์์ญ, ๋ฐ์ค์ ์ฝํ ์ธ ์์ญ ์ฌ์ด์ ์ฌ๋ฐฑ์ธ ํจ๋ฉ padding, ๋ฐ์ค์ ํ ๋๋ฆฌ ๊ทธ๋ฆฌ๊ณ ์ฌ๋ฌ ๋ฐ์ค ๋ชจ๋ธ ์ฌ์ด์ ์ฌ๋ฐฑ์ธ ๋ง์ง margin ๋ฑ์ ์์๋ก ๊ตฌ์ฑ๋๋ค. ๋ง์ง๊ณผ ํจ๋ฉ์ ๋ค๋ฅธ ์ฝํ ์ธ ์ฌ์ด์ ๊ฐ๊ฒฉ์ด๋ ๋ฐฐ์น ๋ฑ์ ๊ณ ๋ คํ ๋๋ ์ค์ํ ๊ฐ..
2021.10.12 -
5-6. CSS ๊ธฐ์ด ์ฐ์ต๋ฌธ์ 1,2,3,4
์ฐ์ต๋ฌธ์ 1 ์ต์ ์น ๋์์ธ ํธ๋ ๋ ๋ฐ์ํ ์น ๋์์ธ - ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์ ์ต์ ํํ๋ค ํ๋ซ ๋์์ธ - ์ ์ฒด์์ ํ๋ฉด์ผ๋ก ํ์คํฌ๋ฆฐ ๋ฐฐ๊ฒฝ - ์ฝํ ์ธ ์ ์ง์ค ์ ํ์ด์ง ์ฌ์ดํธ - ํ ํ์ด์ง์ ๋ชจ๋ ๋ด์ฉ์ ๋ด๋ค ํจ๋ด๋์ค ์คํฌ๋กค๋ง - ๋์ ์ธ ํจ๊ณผ๋ก ๊ฐํ ์ธ์์! ์น ํฐํธ - ์น ํ์ดํฌ๊ทธ๋ํผ๋ฅผ ๋ฐ์ณ์ฃผ๋ ๊ธฐ์ ์ฐ์ต๋ฌธ์ 2 ์น ๊ฐ๋ฐ ๊ธฐ์ด ์ฐ์ต๋ฌธ์ 3 2019 ๊ตญ๋ฏผ ๋ ์์คํ ๊ตฌ๋ถ ์ฑ์ธ ๋ ์์ ์ข ์ด์ฑ 6.1๊ถ 11.8๊ถ ์ ์์ฑ 1.2๊ถ 7.1๊ถ ์ค๋์ค๋ถ 0.2๊ถ 5.5๊ถ ์ฐ์ต๋ฌธ์ 4 ํ์ธํ์ธ์ ์ฃผ๋ฌธ ๋ฐ ๋ฐฐ์ก ์คํ 2์ ์ด์ ์ฃผ๋ฌธ๊ฑด์ ๋น์ผ ๋ฐ์กํฉ๋๋ค 2์ ์ดํ ์ฃผ๋ฌธ๊ฑด์ ๋ค์๋ ๋ฐ์กํฉ๋๋ค(์ฃผ๋ง ์ ์ธ) ๊ตํ ๋ฐ ํ๋ถ ๋ถ๋ง์กฑ์ 100% ํ๋ถํด ๋๋ฆฝ๋๋ค ๊ณ ๊ฐ์ผํฐ๋ก ์ ํ์ฃผ์ธ์ ๊ณ ๊ฐ์ผํฐ 0000-0000 ์๋ด์๊ฐ : ์ค์ 9์ ~ ..
2021.10.10 -
5-5. CSS ๋ชฉ๋ก, ํ ์คํ์ผ
1๏ธโฃ ๋ชฉ๋ก ์คํ์ผ 1. list-style-type ์์ฑ list-style-type ์์ฑ์ ๋ถ๋ฆฟ ๋ชจ์๊ณผ ๋ฒํธ ์คํ์ผ์ ์ง์ ํ๋ ์์ฑ์ด๋ค. list-style-type ์์ฑ๊ฐ disc : ์ฑ์ด ์ ๋ชจ์ circle : ๋น ์ ๋ชจ์ square : ์ฑ์ด ์ฌ๊ฐํ ๋ชจ์ decimal : 1๋ถํฐ ์์ํ๋ ์ญ์ง์ decimal-leading-zero : ์์ 0์ด ๋ถ๋ 10์ง์ lower-roman : ๋ก๋ง ์ซ์ ์๋ฌธ์ upper-roman : ๋ก๋ง ์ซ์ ๋๋ฌธ์ lower-alpha, lower-latin : ์ํ๋ฒณ ์๋ฌธ์ upper-alpha, upper-latin : ์ํ๋ฒณ ๋๋ฌธ์ none: ๋ถ๋ฆฟ์ด๋ ์ซ์๋ฅผ ์์ค๋ค. 2. list-style-image list-style-image ์์ฑ์ ๋ถ๋ฆฟ ๋์ ์ด๋ฏธ์ง๋ฅผ..
2021.10.10