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

์ „์ฒด ๊ธ€40

์ฑ… ์ถ”์ฒœ ๋ชจ๋˜ ์›น์„ ์œ„ํ•œ JavaScript + jQuery ์ž…๋ฌธ ์œค์ธ์„ฑ ์ €์žํ•œ๋น›๋ฏธ๋””์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์™„๋ฒฝ ๊ฐ€์ด๋“œ๋ฐ์ด๋น„๋“œ ํ”Œ๋ž˜๋„ˆ๊ฑด ์ €์ž์ธ์‚ฌ์ดํŠธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋”ฉ ๊ธฐ๋ฒ•๊ณผ ํ•ต์‹ฌ ํŒจํ„ด์Šคํ† ์–€ ์Šคํ…ŒํŒŒ๋…ธํ”„ ์ €์ž์ธ์‚ฌ์ดํŠธ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์•Œ๋ ˆ์Šค ๋งฅ์นด์šฐ ์ €์žํ•œ๋น›๋ฏธ๋””์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์„ฑ๋Šฅ ์ตœ์ ํ™”๋‹ˆ์ฝœ๋ผ์Šค ์ž์นด์Šค ์ €์žํ•œ๋น›๋ฏธ๋””์–ด 2012. 9. 25.
์›น์„ ๋งŒ๋“ค์–ด๊ฐ€๋Š”๋ฐ ์žˆ์–ด์„œ ์ˆ™์ง€ํ•ด์•ผํ•  ์›น ์ ‘๊ทผ์„ฑ[๋””์ž์ธ] ๋””์ž์ธ์— ์•ž์„œ ๋ฐ˜๋“œ์‹œ ์ˆ™์ง€ํ•ด์•ผ ํ•  ์‚ฌํ•ญ์ƒ‰์ƒ์œผ๋กœ ํ‘œํ˜„๋œ ์ •๋ณด๋Š” ์ƒ‰์ƒ์„ ๋ฐฐ์ œํ•˜์—ฌ๋„ ์›ํ•˜๋Š” ๋‚ด์šฉ์„ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค.์ „๊ฒฝ์ƒ‰๊ณผ ๋ฐฐ๊ฒฝ์ƒ‰์€ ์ถฉ๋ถ„ํ•œ ๋Œ€๋น„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์•ผ ํ•œ๋‹ค.ํ…์ŠคํŠธ๋Š” ์‰ฝ๊ฒŒ ์ฝ์„ ์ˆ˜ ์žˆ๋„๋ก ์ถฉ๋ถ„ํ•œ ํฌ๊ธฐ๋„ ์ œ๊ณต๋˜์–ด์•ผ ํ•œ๋‹ค.(KADO์˜ ํ’ˆ์งˆ๋งˆํฌ ์ธ์ฆ ๊ธฐ์ค€์— ์˜ํ•˜๋ฉด ํŒ๋…ํ•˜๊ธฐ ์‰ฌ์šด ํ…์ŠคํŠธ์˜ ์ถฉ๋ถ„ํ•œ ์ตœ์†Œ ํฌ๊ธฐ๋Š” 12px๋กœ ์ •์˜ํ•˜๊ณ  ์žˆ์Œ.์ด์šฉ์— ์‹œ๊ฐ„์ œํ•œ์ด ์žˆ๋Š” ์ฝ˜ํ…์ธ ์˜ ๊ฒฝ์šฐ ๊ฒฝ๊ณ  ๋ฐ ์‹œ๊ฐ„์กฐ์ ˆ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜์—ฌ์•ผ ํ•œ๋‹ค.ํŒ์—…์ฐฝ์„ ๋ถˆํ•„์š”ํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„์•ผ ํ•œ๋‹ค.๊ฐ ๋งํฌ์˜ ๋ชฉํ‘œ ์œ„์น˜๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ํ•˜์—ฌ์•ผ ํ•œ๋‹ค. ์ƒ‰์ƒ์œผ๋กœ ํ‘œํ˜„๋œ ์ •๋ณด๋Š” ์ƒ‰์ƒ์„ ๋ฐฐ์ œํ•˜์—ฌ๋„ ์›ํ•˜๋Š” ๋‚ด์šฉ์„ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•จ. ๋„ํ˜•์˜ ๋ชจ์–‘์„ ๋‹ฌ๋ฆฌ ํ•˜์—ฌ ์ƒ‰ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋„ํ˜•์˜ ๋ชจ์–‘์œผ๋กœ ๊ตฌ๋ถ„์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•จ. ๋ช…๋„ ๋Œ€๋น„๋Š” ์ตœ์†Œ 4.51:1์„ ์œ ์ง€ํ•ด์•ผ ํ•จ๋ฐฐ๊ฒฝ์ƒ‰์ด.. 2012. 9. 25.
์›น์„ ๋งŒ๋“ค์–ด๊ฐ€๋Š”๋ฐ ์žˆ์–ด์„œ ์ˆ™์ง€ํ•ด์•ผํ•  ์›น ์ ‘๊ทผ์„ฑ[ํ”„๋กœ๊ทธ๋žจ] ํ”„๋กœ๊ทธ๋žจ ๊ฐœ๋ฐœ์— ์•ž์„œ ๋ฐ˜๋“œ์‹œ ์ˆ™์ง€ํ•ด์•ผ ํ•  ์‚ฌํ•ญ.๋ถˆํ•„์š” ํ•˜๊ฑฐ๋‚˜ ๊ณผ๋„ํ•˜๊ฒŒ ๋งŽ์€ ํ”„๋ ˆ์ž„์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„์•ผ ํ•œ๋‹ค.ํ‚ค๋ณด๋“œ๋งŒ์œผ๋กœ ๋ชจ๋“  ์ฝ˜ํ…์ธ ๋ฅผ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค.๊ฐ ์„œ์‹ ์ œ์–ด ์š”์†Œ๋ฅผ ์„ค๋ช…ํ•˜๋Š” ๋ ˆ์ด๋ธ”์„ ์‚ฌ์šฉํ•˜์—ฌ์•ผ ํ•œ๋‹ค.ํ‚ค๋ณด๋“œ๋งŒ์œผ๋กœ๋„ ์˜จ๋ผ์ธ ์„œ์‹ ์ž…๋ ฅ ๋ฐ ์„œ์‹ ๊ฐ„ ์ด๋™์ด ๊ฐ€๋Šฅํ•˜์—ฌ์•ผ ํ•œ๋‹ค.์Šคํฌ๋ฆฝํŠธ, ์• ํ”Œ๋ฆฟ, ํ”Œ๋Ÿฌ๊ทธ์ธ ๋“ฑ ๋ถ€๊ฐ€ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์˜ํ•œ ์ฝ˜ํ…์ธ ๋Š” ์ž์ฒด์ ์ธ ์ ‘๊ทผ์„ฑ์„ ์ง€๋‹ˆ๊ณ  ์žˆ์–ด์•ผ htmlํŽ˜์ด์ง€์— ํ”„๋กœ๊ทธ๋žจ์„ ์ž…ํžˆ๋ฉด์„œ ์˜ฌ๋ฐ”๋ฅธ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ์ตœ๊ทผ ๊ฐœ๋ฐœ๋œ ์‚ฌ์ดํŠธ๋Š” ๋Œ€๋ถ€๋ถ„ XHTML 1.0 Transitional ํ˜•์‹ ์ด์ง€๋งŒ ๊ฐœ๋ฐœ์ž ๋Œ€๋ถ€๋ถ„์€ ๊ทธ์— ๋งž๋Š” ํƒœ๊ทธ ์ง€์‹์ด ์—†์Œ. ์ตœ์ดˆ ๋งŒ๋“ค์–ด์ง„ html ๋ฌธ์„œ์™€ ํ•จ๊ป˜ ๊ฐœ๋ฐœ๊ณผ ์—ฐ๊ด€๋œ ํƒœ๊ทธ ๊ฐ€์ด๋“œ๋ผ์ธ ์ œ๊ณต ํ•„์š”. - DTD๊ฐ€ XHTMLํ˜•์‹์ผ ๋•Œ์—๋Š” ๋‹ซ๊ธฐ์™€ ๋”ฐ์˜ดํ‘œ๋ฅผ ์ƒ๋žตํ•  .. 2012. 9. 25.
min-height:100% ๋ฅผ ์ด์šฉํ•ด์„œ footer๋ฅผ ํ™”๋ฉด์•„๋ž˜์— ๊ณ ์ •ํ•˜๊ธฐ /* html */headercontainer footer /* css */ html, body{width:100%height:100%}html{width:100%;height:100%}body{width:100%;height:100%} html๊ณผ body์— height:100%๋ฅผ ์ ์šฉ์‹œํ‚ต๋‹ˆ๋‹ค. #header{width:100%;height:50px;position:relative;z-index:20;overflow:hidden;background-color:#fcc} ๋ฐฑ๊ทธ๋ผ์šด๋“œ์ปฌ๋Ÿฌ๋Š” ์ž˜ ๋จนํ˜”๋Š”์ง€ ํ™•์ธ์„ ์œ„ํ•œ๊ฒƒ์ผ๋ฟ์ž…๋‹ˆ๋‹ค.๋†’์ด๊ฐ’์„ ๊ผญ header์— ์ •ํ•ด์ฃผ์–ด์•ผ๋˜๋ฉฐ position์ด ํ•„์ˆ˜๋กœ ์žˆ์–ด์•ผ์ง€ container๊ฐ€ ์˜ฌ๋ผ์™”์„๋•Œ z-index๋ฅผ ์ด์šฉํ•ด์„œ container์œ„์— ์˜ฌ๋ผ์˜ฌ์ˆ˜์žˆ์Šต๋‹ˆ๋‹ค.(z-index์˜ .. 2012. 9. 18.