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

์ „์ฒด ๊ธ€507

์ž„์‹ ์ค‘ ์ฒ ๋ถ„์„ญ์ทจ ์ค‘์š”์„ฑ * ์ž„์‹  ์ค‘๊ธฐ(4๊ฐœ์›”์ดํ›„)๊ฐ€ ๋˜๋ฉด ์—„๋งˆ์˜ ํ˜ˆ์•ก์ด ์•„๊ธฐ์—๊ฒŒ ์ „๋‹ฌ๋ฉ๋‹ˆ๋‹ค. ์ด๋•Œ๋Š”, ํ‰์†Œ๋ณด๋‹ค ๋น ๋ฅธ ์†๋„๋กœ ํ˜ˆ์•ก์ด ์ „๋‹ฌ๋˜์–ด, ํ‰์†Œ ๊ฑด๊ฐ•ํ•˜๋˜ ์—ฌ์„ฑ๋“ค๋„, ์‰ฝ๊ฒŒ ํ”ผ๊ณคํ•จ์„ ๋А๋ผ๊ฑฐ๋‚˜ ์ง€์น˜๊ฑฐ๋‚˜ ์–ด์ง€๋Ÿฌ์›€์ฆ์„ ๋А๋ผ๊ฒŒ ๋˜๊ฑฐ๋‚˜ ์‹ค์ œ๋กœ ๋นˆํ˜ˆ์ด ์ƒ๊ธฐ๊ธฐ ์‰ฝ์Šต๋‹ˆ๋‹ค ๊ทธ๋ž˜์„œ, ์ž„์‹ ์ค‘๊ธฐ ๋ถ€ํ„ฐ๋Š” ์‹์‚ฌ์‹œ์— ์ฒ ๋ถ„์ด ๋งŽ์ด ํ•จ์œ ๋œ ์‹ํ’ˆ์„ ์ฑ™๊ฒจ ๋จน๋Š” ์‹์Šต๊ด€์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ, ์Œ์‹์œผ๋กœ๋งŒ ์ฒ ๋ถ„์„ ์„ญ์ทจํ•˜๊ธฐ์—๋Š” ํ•œ๊ณ„๊ฐ€ ์žˆ๊ณ , ์ฒ ๋ถ„์˜์–‘์ด ๋ถ€์กฑํ•˜๊ธฐ์— ๋ถ€์กฑํ•œ ๋ถ€๋ถ„์€ ์ฒ ๋ถ„์ œ ์„ญ์ทจ๋ฅผ ํ†ตํ•ด ์ฑ„์›Œ ์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค ์ž„์‹ ์ค‘๊ธฐ๊ฐ€ ๋˜๋ฉด, ๊ฑฐ์˜ ์ž…๋ง์ด ๋๋‚˜๊ฒŒ ๋˜์–ด ์ฒ ๋ถ„์ œ๋ฅผ ์„ญ์ทจํ•˜๋Š”๋ฐ ์–ด๋ ค์›€์ด ์—†์ง€๋งŒ ๊ฐ„ํ˜น, ์ž…๋ง์„ ์˜ค๋ž˜ํ•˜๋Š” ์‚ฐ๋ชจ๋‹˜์˜ ๊ฒฝ์šฐ์—๋Š” ๋นˆ์†์— ๋จน์–ด์•ผํ•˜๋Š” ์ฒ ๋ถ„์ œ ์„ญ์ทจ๊ฐ€ ์–ด๋ ค์šด ๊ฒฝ์šฐ๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿด๋• ์‹์‚ฌ ์ค‘๊ฐ„์— ๋“œ์‹œ๊ฑฐ๋‚˜ ์•„๋‹ˆ๋ฉด, ๋‹น๋ถ„๊ฐ„์€ ์‹ํ’ˆ์œผ๋กœ ์„ญ์ทจ๋ฅผ ํ•ด์ฃผ์‹œ๋Š”๊ฒƒ์ด ์ข‹์Šต๋‹ˆ.. 2017. 8. 10.
๊ฐ„ํŽธ๋ ˆ์‹œํ”ผ ์ดˆ๊ณ„๊ตญ์ˆ˜ ์ด๋ฒˆ์ฃผ ๊ธˆ์š”์ผ (8/11)์ด๋ฉด ๋ง๋ณต ์ด๋ผ๊ณ  ํ•˜๋„ค์š”. ๋ณต๋‚ ์€ ์ดˆ๋ณต, ์ค‘๋ณต, ๋ง๋ณต์ด ์žˆ๋Š”๋ฐ ์ผ๋…„์ค‘ ๊ฐ€์žฅ ๋”์šด๋‚ (์‚ผ๋ณต๋”์œ„)์„ ๋œปํ•ฉ๋‹ˆ๋‹ค. ๊ฐ€์žฅ ๋”์šด๋‚  ์ข‹์€์Œ์‹์„๋จน๊ณ  ๋”์œ„์—์ง€์นœ ๋ชธ์„ ์ข‹๊ฒŒํ•˜์—ฌ ๋”์šด์—ฌ๋ฆ„์„ ๊ฑด๊ฐ•ํ•˜๊ฒŒ ๋ณด๋‚ด์ž๋Š”, ์˜๋ฏธ ์ž…๋‹ˆ๋‹ค. ๋‹ˆ๋ชจ๋ง˜์€_ ์ดˆ๋ณต์—” ๋‹ญํ•œ๋งˆ๋ฆฌ. ์ค‘๋ณต์—” ์˜ค๋ฆฌํƒ• ์œผ๋กœ ๋ชธ๋ณด์‹ ์„ ์ž˜ํ–ˆ์–ด์š”. ์ด์ œ ์˜ฌ์—ฌ๋ฆ„ ๋งˆ์ง€๋ง‰ ๋ณต๋‚ ์ธ ๋ง๋ณต์ธ๋ฐ ์–ด๋–ค์Œ์‹์œผ๋กœ ๋ชธ๋ณด์‹ ์„ ํ• ๊นŒ ๊ณ ๋ฏผ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋ณต๋‚ ์—” ์–ด๋”œ๊ฐ€๋‚˜ ์†๋‹˜์ด ๋งŽ์•„์š”. ์ €๋ฒˆ์— ๊ฒฝ์šฐ์—๋„ ๊ทธ๋žฌ์—ˆ๊ณ  ์ค„์„ ์„œ์„œ ๊ธฐ๋‹ค๋ ธ๋‹ค๊ฐ€ ์‹์‚ฌํ•˜๋‹ค๋ณด๋ฉด ์‹œ๊ฐ„์ด ๋„ˆ๋ฌด ๋Šฆ์–ด์ ธ์„œ ์˜คํžˆ๋ ค ๋” ํ”ผ๊ณคํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ, ์ด๋ฒˆ์—” ์ง‘์—์„œ ๋งŒ๋“ค์–ด ๋จน๊ธฐ๋กœ ํ–ˆ์–ด์š”. ๋‹ˆ๋ชจ์•„๋น ์™€ ์ƒ์˜ํ•œ๊ฒฐ๊ณผ ์ด๋ฒˆ์—” ์ดˆ๊ณ„๊ตญ์ˆ˜ ๋กœ ๋ฉ”๋‰ด๋ฅผ ์„ ์ • ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ณ„์† ๋”์šด์Œ์‹์œผ๋กœ ๋ชธ๋ณด์‹ ์„ ํ–ˆ์œผ๋‹ˆ ์ด๋ฒˆ์—” ์‹œ์›ํ•˜๊ฒŒ ๋จน๊ณ  ์‹ถ์—ˆ๋˜ ๋ชจ์–‘์ด์˜ˆ์š”. ์ธํ„ฐ๋„ท์ƒ์— ๋‚˜.. 2017. 8. 9.
CSS overflow ์ง€์ •์˜์—ญ ์™ธ ์ฒ˜๋ฆฌ CSS overflow๋Š” ์ง€์ •ํ•œ ํ•ด๋‹น์˜์—ญ ์™ธ์— ๋‚ด์šฉ์ด ๋„ˆ๋ฌด ๊ธธ์–ด์ ธ์„œ ๋ถ€๋ถ„์— ๋งž์ง€ ์•Š์•„ ๊ทธ ํ•ด๋‹น์˜์—ญ์™ธ์— ๋„˜์–ด๊ฐ„ ์š”์†Œ๋“ค์„ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•  ๊ฒƒ์ธ๊ฐ€์— ๊ด€ํ•œ CSS์ž…๋‹ˆ๋‹ค. ํ”„๋กœ๊ทธ๋žจ์ƒ์—์„œ ์ง€์ •์˜์—ญ์— ๊ธ€์ž์ œํ•œ ์ˆ˜๋ฅผ ์ฃผ๊ธฐ๋„ ํ•˜์ง€๋งŒ ๋””์ž์ธ์ ์œผ๋กœ ๋ณผ๋•Œ ์œ ๋™์ ์ธ ๋””์ž์ธ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด ์‚ฌ์ดํŠธ๋ฅผ ์กฐ๊ธˆ๋” ์˜ค๋ž˜๋ณผ ์ˆ˜ ์žˆ๊ฒŒ๋” ํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ์š”์†Œ์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. overflow ์†์„ฑvisible - ๊ธฐ๋ณธ๊ฐ’์ด๋ฉฐ ์˜ค๋ฒ„๋œ ์˜์—ญ์ด ์ž˜๋ฆฌ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์ง€์ •์—ญ์—ญ ๋ฐ–์— ๊ทธ๋Œ€๋กœ ๋‚˜์˜ค๊ฒŒ๋ฉ๋‹ˆ๋‹ค. width:200px; height:50px; overflow:visible; background:#ccc ์œ„์™€๊ฐ™์ด ์ง€์ •์˜์—ญ width-200px, height-50px์— ๋„˜์–ด์„œ ๋ฐ–์œผ๋กœ ๊ทธ๋Œ€๋กœ ๋…ธ์ถœ์ด ๋ฉ๋‹ˆ๋‹ค. hidden - ์˜ค๋ฒ„๋œ ์˜์—ญ์ด ์ž˜๋ฆฌ๊ณ  ๋‚ด์šฉ์ด ๋ณด์—ฌ.. 2017. 8. 9.
CSS3 Transition ํŠธ๋žœ์ง€์…˜ ๋ณ€ํ˜•์˜ ์‹œ์ž‘ css3 ํŠธ๋žœ์ง€์…˜์†์„ฑ์ด ์žˆ๊ธฐ์ „์—๋Š” ์›นํŽ˜์ด์ง€ ์•ˆ์—์„œ์˜ ๋™์ ์ธ ๋ถ€๋ถ„์€ adobe flash๊ฐ€ ๋‹ด๋‹นํ•˜๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ตฌ๊ธ€ํฌ๋กฌ์ด๋‚˜ ์• ํ”Œ์‚ฌ์—์„œ ํ”Œ๋ž˜์‰ฌ๋ฅผ ์ง€ํ–ฅํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด์œ ์ธ ์ฆ‰์Šจ ๋ณด์•ˆ๊ด€๋ จ๋ฌธ์ œ๋„ ์žˆ์œผ๋ฉด์„œ ์›นํ‘œ์ค€์— ์–ด๊ธ‹๋‚˜๊ณ  ๋ชจ๋ฐ”์ผ์— ์ตœ์ ํ™” ๋˜์ง€ ๋ชปํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์‚ฌ์‹ค ํ”Œ๋ž˜์‰ฌ๋Š” ๋™์ ์ธ ์š”์†Œ์— ๋ถˆ๊ณผํ–ˆ์ง€ ๊ฐ์ข… ๋ฉ”๋‰ด๋‚˜ ์‚ฌ์ดํŠธ์— ์‚ฌ์šฉํ•˜๋Š”๊ฑด ์ ํ•ฉํ•˜์ง€ ๋ชปํ–ˆ๋˜๊ฑด ์‚ฌ์‹ค์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋™์ ์ธ ์š”์†Œ๋ฅผ ๋‹จ์ง€ ์ด ํŠธ๋žœ์ง€์…˜์ด๋‚˜ ์• ๋‹ˆ๋ฉ”์ด์…˜ CSS๋งŒ์œผ๋กœ ์ปค๋ฒ„๊ฐ€ ๋๋‹ค๋Š” ์‚ฌ์‹ค์ž…๋‹ˆ๋‹ค. ์‹œ๋Œ€์˜ ํ๋ฆ„์ธ ๋งŒํผ ๋”์šฑ ๊ฐ„์†Œํ™”๋˜๊ณ  ๋”์šฑ ์‰ฝ๊ณ  ์ •๊ตํ•ด์กŒ์Šต๋‹ˆ๋‹ค. ์šฐ์„ ์€ ํŠธ๋žœ์ง€์…˜์—๊ด€ํ•ด ๋จผ์ € ํฌ์ŠคํŒ…ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ํŠธ๋žœ์ง€์…˜์€ ์ง€์ •ํ•œ ์†์„ฑ์—์„œ ๋˜๋‹ค๋ฅธ ์ง€์ •๊ฐ’(์‹œ๊ฐ„) ๋™์•ˆ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ๋ณ€๊ฒฝ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์™œ ์˜ˆ๋ฅผ ๋“ค์–ด ๋ฒ„ํŠผ๊ฐ’์ด ๊ธฐ๋ณธ ๋ธ”๋ž™์ด๊ณ  ๋งˆ์šฐ์Šค ์˜ค๋ฒ„ํ–ˆ์„์‹œ์— ๊ทธ.. 2017. 8. 8.
CSS position ์š”์†Œ์˜ ์œ„์น˜์ •์˜ CSS position ์š”์†Œ์˜ ์œ„์น˜์ •์˜๊ฐ ์š”์†Œ๋“ค๊ณผ ๊ฐ์ฒด๋“ค์„ ์ฝ”๋”ฉํ•˜๋‹ค๋ณด๋ฉด position์„ ์ ์ ˆํžˆ ์ž˜ ์‚ฌ์šฉํ•ด์•ผ ํ•  ๋•Œ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค.์ผ๋‹จ ์–ด๋– ํ•œ ์†์„ฑ๋“ค์ด ์žˆ๋Š”์ง€ ๋จผ์ € ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.positionstatic - ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์ˆœ์„œ๊ทธ๋Œ€๋กœ ํ‘œํ˜„์ด ๋ฉ๋‹ˆ๋‹ค.absolute - ์ •์ ์ธ ์š”์†Œ๊ฐ€ ์•„๋‹Œ ์ƒ๋Œ€์ ์œผ๋กœ ๋ฐฐ์น˜๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. ๋งˆ์น˜ ๋ ˆ์ด์–ด์ฒ˜๋Ÿผ ํ˜ผ์ž ๋– ๋‹ค๋‹ˆ๋Š” ์š”์†Œ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.relative - ์ƒ๋Œ€์ ์œผ๋กœ ๋ฐฐ์น˜๋˜๋ฉด์„œ CSS์˜ ์˜ํ–ฅ์„ ๋ฐ›์Šต๋‹ˆ๋‹ค.fixed - ๋ธŒ๋ผ์šฐ์ €์— ์˜ํ–ฅ์„ ๋ฐ›์œผ๋ฉฐ ํฌ๊ธฐ์— ์ƒ๊ด€์—†์ด ์œ„์น˜๊ฐ€ ๊ณ ์ •์ด๋ฉ๋‹ˆ๋‹ค.inherit - ๋ถ€๋ชจ์š”์†Œ์—์„œ ์˜ํ–ฅ์„ ๋ฐ›์Šต๋‹ˆ๋‹ค. ๋ถ€๋ชจ์š”์†Œ ๊ทธ๋Œ€๋กœ css์˜ ์˜ํ–ฅ์„ ๋ฐ›์Šต๋‹ˆ๋‹ค. ํฌ์ง€์…˜css์˜ ์ค‘์š” ํ•ต์‹ฌ ํฌ์ธํŠธ๋Š” 3๊ฐ€์ง€ ์ •๋„์ž…๋‹ˆ๋‹ค. absolute, relative, fixed์ž…๋‹ˆ๋‹ค.absolute๋Š” ๋””์ž์ธ์—.. 2017. 8. 7.
ํ˜ผ์ž๋จน๋Š” ์ซ„๋ณถ์ด โ€‹์ฆ‰์„๋–ก๋ณถ์ด๋‚˜ ์ซ„๋ณถ์ด ๊ฒฝ์šฐ์—๋Š” ํ˜ผ์ž์„œ ์‚ฌ๋จน์œผ๋Ÿฌ ๊ฐ€๊ธฐ๊ฐ€ ์–ด๋ ต์ฃ  ใ…œ ๋–ก๋ณถ์ด ํ•˜๋‚˜ ํ•ด๋จน์œผ๋ คํ•ด๋„ ํ•„์š”ํ•œ ์ฑ„์†Œ๋“ค๊ณผ ๋–ก, ์–ด๋ฌต, ๋‹น๋ฉด๋“ค์ด ํ•„์š”ํ•œ๋ฐ ํ•ด๋จน๊ณ  ๋‚จ์€ ์žฌ๋ฃŒ๋Š” ๋ฒ„๋ ค์ง€๊ณ  ์•„๊นŒ์›Œ์„œ ์–‘์„ ๋งŽ์ด์žก๊ณ  ์š”๋ฆฌ๋ฅผ ํ•˜๋‹ค๋ณด๋ฉด ๋˜ ๋‚จ์•„์„œ ๋ฒ„๋ ค์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋‹ˆ๋ชจ๋„ค ๊ฐ€์กฑ๋„ ๋‘์‹๊ตฌ ์ด๊ธฐ์— ๋งˆํŠธ์—์„œ ์žฅ์„๋ณด๊ณ  ์Œ์‹์„ ํ•˜๊ฒŒ๋˜๋ฉด ์žฌ๋ฃŒ๊ฐ€ ๋งŽ์ด ๋ฒ„๋ ค์ ธ์š” ๊ทธ๋ž˜์„œ ์˜จ๋ผ์ธ ํ‘ธ๋“œ๋ชฐ์„ ์ž์ฃผ ์• ์šฉํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์ €๊ธฐ๋งŽ์ด ๊ตฌ๋งคํ•ด๋ดค์ง€๋งŒ ๋–ก๋ณถ์ด๋Š” ํ‘ธ๋”ฉํŒฉํ† ๋ฆฌ๊ฐ€ ์ง„๋ฆฌ์ธ๋“ฏ ํ•ฉ๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ ํ‘ธ๋”ฉํŒฉํ† ๋ฆฌ ์ถ”์–ต์˜ ์ซ„๋ณถ์ด ์ˆœํ•œ๋ง› ๋ง›์€๋ชจ๋‘ ์„ธ๊ฐ€์ง€์ธ ๊ฒƒ ๊ฐ™์•„์š”. ๋งค์šด๋ง›, ์ˆœํ•œ๋ง›, ์งœ์žฅ๋ง› ์ „์— ๋งค์šด๋ง›๋„ ๋จน์–ด๋ดค๋Š”๋ฐ ์ •๋ง ๋งค์› ์Šต๋‹ˆ๋‹ค .. ์ž„์‹ ์ค‘ ์ด๊ธฐ์— ์ˆœํ•œ๋ง›์œผ๋กœ ! ์ฃผ๋ฌธํ–ˆ์–ด์š” . ๋ฐฐ์†ก์€ ๊ธฐ๋ณธ 2ํ‹€์•ˆ์— ์˜ค๋Š”๊ฒƒ ๊ฐ™์•„์š”. ์ด์ œ๋ถ€ํ„ฐ ๋ฆฌ๋ทฐํ•ด ๋“œ๋ฆฝ๋‹ˆ๋‹ค ์ถ”์–ต์˜ ์ซ„๋ฉด๋–ก๋ณถ์ด 600g ๊ฐ€๊ฒฉ์ด 4,900.. 2017. 8. 7.