๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐Ÿ“จ Web/-- HTML & CSS16

[CSS] ์–ด๋–ค ์š”์†Œ๊ฐ€ ์•ž์œผ๋กœ ๋‚˜์˜ฌ์ง€ z-index ๋กœ ์ˆ˜์ง ์œ„์น˜๋ฅผ ์ •ํ•ด๋ณด์ž. ์ง€๋‚œ ์‹œ๊ฐ„ ์šฐ๋ฆฌ๋Š” CSS์˜ position์†์„ฑ์œผ๋กœ ์š”์†Œ๋ฅผ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๊ณณ์— ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ๋ฐฐ์› ๋‹ค. ๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๋Š” fixed, absolute, relative, sticky๋“ฑ๋“ฑ์„ ์•Œ์•„๋ณด์•˜๊ณ , ๊ทธ ๊ฒฐ๊ณผ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š”๋Œ€๋กœ HTML Elements๋ฅผ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค. ์˜ค๋Š˜์€ ์ง€๋‚œ ์‹œ๊ฐ„ ๋ฐฐ์› ๋˜ Position์„ ํ† ๋Œ€๋กœ ๋ฐฐ์น˜๋ฅผ ๋งˆ์ณค์„ ๋•Œ z-index๋กœ ์–ด๋–ค ์š”์†Œ๊ฐ€ ์•ž์œผ๋กœ ์˜ฌ์ง€๋ฅผ ์ •ํ•ด๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ–๊ฒ ๋‹ค. z-index mdn์—์„œ๋Š” z-index๋ฅผ ์œ„์™€ ๊ฐ™์ด ์ด์•ผ๊ธฐ ํ•œ๋‹ค. z์ถ•์˜ ์ˆœ์„œ๋ฅผ ์ง€์ •ํ•œ๋‹ค. ์ด ๋ง์ด ๋ฌด์Šจ ๋ง์ผ๊นŒ? ์šฐ๋ฆฌ๋Š” ์ผ๋ฐ˜์ ์ธ HTML ๋ฌธ์„œ๋ฅผ ๋ˆˆ์œผ๋กœ ๋ณผ ๋•Œ๋Š” 2D๋กœ ๋ณด๊ธฐ ๋•Œ๋ฌธ์— X์ถ•๊ณผ Y์ถ•๋งŒ ์ธ์‹ํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด z-index ๋ฅผ ์„ค์ •ํ•˜๋ฉด ์กฐ๊ธˆ ๋” ์ž…์ฒด์ ์œผ๋กœ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ๊ฒŒ๋˜๊ณ  ๊ทธ.. 2020. 10. 16.
[CSS] ์š”์†Œ๋ฅผ ์›ํ•˜๋Š” ๊ณณ์— ๋ฐฐ์น˜ํ•˜๊ธฐ position ์†์„ฑ :: static, relative, absolute, fixed, sticky CSS์—์„œ HTML Elements๋ฅผ ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๊ณณ์— ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์—๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฐฉ๋ฒ•๋“ค์ด ์กด์žฌํ•œ๋‹ค. display ์†์„ฑ์œผ๋กœ ์˜์—ญ์„ ๋‚˜๋ˆ ์„œ ๋ฐฐ์น˜๋ฅผ ํ•  ์ˆ˜๋„ ์žˆ๊ณ , box-sizing๊ณผ ๊ฐ™์€ ๋ฐฉ๋ฒ•์œผ๋กœ ๋ฐฐ์น˜๋ฅผ ํ•  ์ˆ˜๋„ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋Ÿฌํ•œ ๋ฐฉ๋ฒ•๋“ค์—๋Š” ๋งŽ์€ ์ œ์•ฝ์‚ฌํ•ญ๋“ค์ด ์กด์žฌํ•˜๋ฉฐ, ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๋Œ€๋กœ ๋™์ž‘์‹œํ‚ค๊ธฐ ์œ„ํ•ด์„œ๋Š” Css์˜ ๋ถ€๋ชจ, ์ž์‹๊ฐ„์˜ ๊ด€๊ณ„๋ฅผ ํŒŒ์•…ํ•ด์ค˜์•ผ ํ•œ๋‹ค. ํ•˜์ง€๋งŒ position์†์„ฑ์„ ์ด์šฉํ•œ๋‹ค๋ฉด ์กฐ๊ธˆ ๋” ์•„๋ฆ„๋‹ต๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ์š”์†Œ๋ฅผ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๊ณณ์— ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ๋‹ค. ์‚ฌ์ „ ์ค€๋น„ ๋ณธ๊ฒฉ์ ์ธ ์ด์•ผ๊ธฐ์— ์•ž์„œ ์šฐ๋ฆฌ๋Š” ์ด๋ฒˆ ์‹œ๊ฐ„์— ์Šคํฌ๋กค์ด ์žˆ๋Š” ์˜์—ญ์ด ํ•„์š”ํ•˜๋ฏ€๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ™”๋ฉด์„ ๋จผ์ € ๊ตฌ์„ฑํ•ด ๋†“๊ณ  ์‹ค์Šต์„ ์ง„ํ–‰ํ•  ๊ฒƒ์ด๋‹ค. index.html index.css body { background: #cfd8dc; d.. 2020. 10. 15.
[CSS] CSS ์ž‘์—…์‹œ์— ๊ผญ ๊ฑฐ์ณ์•ผํ•˜๋Š” ํ•„์ˆ˜ ๊ณผ์ • :: CSS Reset, HTML ์š”์†Œ ์ดˆ๊ธฐํ™”, ๋ฆฌ์…‹ css ์˜ค๋Š˜์€ ์›น ๊ฐœ๋ฐœ์—์„œ CSS ํŒŒํŠธ๋ฅผ ์ž‘์—…ํ•  ๋•Œ ๊ฑฐ์ณ์•ผํ•˜๋Š” ํ•„์ˆ˜ ๊ณผ์ •์ธ *Reset Css *์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋ ค ํ•œ๋‹ค. CSS Reset css reset์€ HTML Element์˜ Default ๊ฐ’๋“ค์„ ์—†์• ์ฃผ๋Š” ์ž‘์—…์ด๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ margin, font, padding, line, size๋“ฑ๋“ฑ๊ณผ ๊ฐ™์€ ์†์„ฑ์˜ ๊ฐ’๋“ค์„ 0 ๋˜๋Š” none์œผ๋กœ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค. ์œ„์—์„œ ๋ณด์ด๋‹ค ์‹ถ์ด Firefox3์™€ IE7์ด ๋ณด์—ฌ์ง€๋Š” ๋ฐฉ์‹์ด ๋‹ฌ๋ผ ๊ฐœ๋ฐœ์ž๊ฐ€ ์˜๋„ํ•œ ๋Œ€๋กœ ์›น์ด ๋ณด์—ฌ์ง€์ง€ ์•Š์„ ๋•Œ๊ฐ€ ์žˆ๋‹ค. ์ด ๊ฒฝ์šฐ ์œ„์—์„œ ๋งํ•œ ๋“ฏ์ด ๋ชจ๋“  Element์˜ ์†์„ฑ ๊ฐ’๋“ค์„ ์—†์• ์•ผ ํ•œ๋‹ค. ์™œ? ์›น ํ‘œ์ค€์„ ์ง€ํ‚ค๋ฉฐ ์ž‘์—…ํ•ด์•ผ ํ•˜๋Š” ํ˜„๋Œ€ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ IE๊ฐ€ ์•„๋‹Œ ๋‹ค๋ฅธ ์—ฌ๋Ÿฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๊ฐœ๋ฐœ์ž๊ฐ€ ์˜๋„ํ•œ ๋Œ€๋กœ ๋ณด์—ฌ์ ธ์•ผ ํ•œ๋‹ค๋Š” ์š”๊ตฌ์‚ฌํ•ญ์€ ์„ ํƒ ์‚ฌํ•ญ์ด ์•„๋‹Œ ํ•„.. 2020. 10. 6.
[CSS] Css Box-Model๊ณผ box-sizing์˜ border-box ์†์„ฑ ์ง€๋‚œ ์‹œ๊ฐ„์— ์šฐ๋ฆฌ๋Š” box-model์˜ ํฌ๊ธฐ ์†์„ฑ์„ ๊ตฌํ•˜๋Š” ์ž‘์—…์„ ํ–ˆ์—ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ง€๋‚œ ์‹œ๊ฐ„์—๋„ ๋ง ํ–ˆ๋“ฏ์ด ๋ฐ•์Šค ๋ชจ๋ธ๋ง์„ ์ ์šฉํ•œ ํ›„ ๋ฐ˜์‘ํ˜• ์›น์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ํฌ๊ธฐ์˜ ๋‹จ์œ„๋ฅผ px๊ฐ€ ์•„๋‹Œ % ๋‹จ์œ„๋กœ ์ ์šฉํ–ˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž. ๊ทธ๋Ÿผ ์•„๋ž˜์˜ Element์˜ ์†์„ฑ ๊ฐ’ ๋‹จ์œ„๋Š” px๊ฐ€ ์•„๋‹Œ %๊ฐ€ ๋˜์–ด์•ผ ํ•œ๋‹ค. ๊ทธ๋Ÿผ ์ •๋ง ์ •๋ง ์ •๋ง ๋ณต์žกํ•ด์ง„๋‹ค. ํž˜๋“ค๊ฒŒ ์šฐ๋ฆฌ๋Š” border, margin, padding ๊ฐ’์„ ๊ตฌํ•ด์„œ ( ๋ฌผ๋ก  ๊ทธ๋ ‡๊ฒŒ ํž˜๋“ค์ง„ ์•Š์ง€๋งŒ ) width์™€ height์˜ ๊ณ„์‚ฐ์‹์— ๋Œ€์ž…ํ•˜์—ฌ ๊ตฌํ–ˆ์ง€๋งŒ ์ด ๊ณ„์‚ฐ์‹์ด %๊ฐ€ ๋“ค์–ด๊ฐ€๋ฉด ๋‹จ์ˆœ + ๊ณ„์‚ฐ์œผ๋กœ ํž˜๋“ค๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฌธ์ œ์ ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ๋ฐฉ๋ฒ•์ด์žˆ๋‹ค. ๋ฐ”๋กœ Box-sizing์ด๋‹ค. box-sizing ์œ„์˜ ์ ˆ๋Œ€ ๋‹จ์œ„์—์„œ ์ƒ๋Œ€ ๋‹จ์œ„๋กœ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฌธ์ œ์ ์„ ํ•ด๊ฒฐํ•˜๊ธฐ .. 2020. 10. 5.