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

Lect & Tip111

๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๋‚ ์งœ์„ ํƒ ํผ bootstrap 4.3 datepicker โœˆ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 4.3 ๋‚ ์งœ ์„ ํƒ ํผ: ๊ฐ„ํŽธํ•œ ๋ฐ์ดํ„ฐ ํ”ผ์ปค ์‚ฌ์šฉํ•˜๊ธฐ ์„œ๋ก  ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ ์›น ๊ฐœ๋ฐœ์„ ํŽธ๋ฆฌํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์ฃผ๋Š” ํ›Œ๋ฅญํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ํŠนํžˆ ๋“œ๋กญ๋‹ค์šด์ด๋‚˜ ๋ฐ์ดํ„ฐ ํ”ผ์ปค์™€ ๊ฐ™์€ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‰ฝ๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์ด ํฐ ์žฅ์ ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋ฒ„์ „ ์—…๊ทธ๋ ˆ์ด๋“œ ๊ณผ์ •์—์„œ ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 4.3์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๋ฉด์„œ ๋งˆ์ฃผํ•  ์ˆ˜ ์žˆ๋Š” ์Šคํƒ€์ผ ๊ด€๋ จ ์ด์Šˆ์™€ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ, ๋‚ ์งœ ์„ ํƒ์„ ์œ„ํ•œ ๋ฐ์ดํ„ฐ ํ”ผ์ปค ๊ตฌํ˜„์— ์ค‘์ ์„ ๋‘˜ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 4.3 ์—…๊ทธ๋ ˆ์ด๋“œ์˜ ์Šคํƒ€์ผ ๋ณ€ํ™” ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 4.3์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๋ฉด ๊ธฐ์กด์˜ ์Šคํƒ€์ผ์ด ์กฐ๊ธˆ ํํŠธ๋Ÿฌ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์ค‘์—์„œ๋„ ํŠนํžˆ ๋‚ ์งœ ์„ ํƒ์„ ์œ„ํ•œ ๋ฐ์ดํ„ฐ ํ”ผ์ปค์˜ ์Šคํƒ€์ผ์ด ์˜ˆ์ „๊ณผ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”์šฑ.. 2019. 7. 25.
โœˆjquery hover function ์‚ฌ์šฉ ์˜ˆ ์ œ์ด์ฟผ๋ฆฌ ์ด๋ฒคํŠธ ์ค‘์—์„œ ๊ฝค ํ”ํ•˜๊ฒŒ ์‚ฌ์šฉ๋˜๋Š” ์ด๋ฒคํŠธ ๋ฉ”์†Œ๋“œ๊ฐ€ ๋ฐ”๋กœ hover๋‹ค. ํŠน์ • ์—˜๋Ÿฌ๋จผํŠธ ์œ„์— ๋งˆ์šฐ์Šค๊ฐ€ ์œ„์น˜ํ•˜๊ฑฐ๋‚˜ ๋ฒ—์–ด๋‚ฌ์„ ๋•Œ์˜ ์ด๋ฒคํŠธ๋ฅผ ์ •์˜ํ•œ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ mouseenter, mouserover๋ฅผ ํ•œ ๋ฒˆ์— ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋‹ค. CSS์˜ :hover ์„ ํƒ์ž๋ฅผ ์ด์šฉํ•œ ๊ฒƒ๊ณผ ๊ฐ™์€ ์ด๋ฒคํŠธ๋ฅผ ํƒ€๊ธฐ ๋•Œ๋ฌธ์—, ํ‚ค๋ณด๋“œ๋กœ ์•ต์ปค์— ์œ„์น˜ํ–ˆ์„ ๋•Œ๋Š” ๋™์ž‘ํ•˜์ง€ ์•Š๋Š”๋‹ค. jquery hover function ์‚ฌ์šฉ ์˜ˆ $(document).ready(function(){ //2depth menu showing when menu is collapsed var hoverMenu = $('.lnb .lnb1depth >li'); hoverMenu.hover( function () { var menuInitH = $('#menu.. 2019. 7. 25.
๋“œ๋กญ๋‹ค์šด ์‚ฌ์šฉ์„ ์œ„ํ•œ popper.js ๋‹ค์šด๋กœ๋“œ for bootstrap 4.3 dropdown components โœˆ ๋“œ๋กญ๋‹ค์šด ์‚ฌ์šฉ์„ ์œ„ํ•œ popper.js ๋‹ค์šด๋กœ๋“œ for bootstrap 4.3 dropdown components ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 3.x ๊นŒ์ง€๋Š” popper.js๋Š” ํ•„์ˆ˜๊ฐ€ ์•„๋‹ˆ์—ˆ๋‹ค. ํ•˜์ง€๋งŒ 4.3์—์„œ๋Š” ๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด๋งŒ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ•ด๋„, popper.js๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค. ๊ฐ€์žฅ ์†์‰ฌ์šด ๋ฐฉ๋ฒ•์€ cdn์„ ์ด์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด์ง€๋งŒ, ๋กœ์ปฌ์— ํŒŒ์ผ์ด ์žˆ์–ด์•ผ๋งŒ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. ์ด๋Ÿด ๋•Œ ๋‹ค์šด๋กœ๋“œ๋ฅผ ๋ฐ›์•„์•ผ ํ•˜๋Š”๋ฐ popper.js๋งŒ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์œผ๋ฉด ๋™์ž‘ํ•˜์ง€ ์•Š๊ณ  ์—๋Ÿฌ๋ฅผ ๋‚ธ๋‹ค. popper.js.map ํŒŒ์ผ๋„ ๊ฐ™์ด ํ•„์š”๋กœ ํ•œ๋‹ค. ๋ณดํ†ต ๋‘ ํŒŒ์ผ์€ ๊ฐ™์€ ํด๋”์— ๋†“์ด๊ธฐ ๋•Œ๋ฌธ์— cdn์—์„œ ๋‹ค์šด ๋ฐ›์„ ๋•Œ popper.js๋ฅผ ๋จผ์ € ๋‹ค์šด๋ฐ›๊ณ , ๋’ค์— .map์„ ๋ถ™์—ฌ์ฃผ๋ฉด popper.js.map ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค. https:.. 2019. 7. 23.
โœˆcss3 background-size:cover contain ์†์„ฑ ie7, i8 ํ•ต background-size-polyfill with ์งค : ์Šคํƒ€ํ‚น ํ•˜์ดํž 2016.08.09 11:11 IE EDGE๊นŒ์ง€ ๋‚˜์™€ ์žˆ๋Š” ์„ธ์ƒ์—์„œ ์—ฌ์ „ํžˆ IE7 ๋ฒ„์ „์— ๋Œ€ํ•œ ํ•˜์œ„ ํ˜ธํ™˜ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์„ ํ•ด์ค˜์•ผ ํ•˜๋Š” ๊ฒƒ์ด ์งœ์ฆ์ด ๋‚˜์ง€๋งŒ... UI๋Š” ์•ˆ ๋˜๋Š” ๊ฒƒ๋„ ๋˜๊ฒŒ ํ•˜๋Š” ์‹ ์„ฑํ•œ ์ง์—…! ๋ธŒ๋ผ์šฐ์ €๋“ค์ด ๋ฏธ์ณ ๋‚ ๋›ฐ๋”๋ผ๋„ ํ•ต์ด๊ฑด ๋ญ๊ฑด ์จ์„œ ์ž˜ ๋งž์ถฐ๋ณด์ž. ์ด ๋ฒˆ์— ์†กํŒŒ๊ตฌ๋ฆฝ ํ†ตํ•ฉ๋„์„œ๊ด€ ์ค‘์— ๊ฐ€๋ฝ์‹œ์žฅ ๋„์„œ๊ด€์ด ์˜คํ”ˆํ•˜๋Š”๋ฐ ๋งž์ถฐ์„œ ์†กํŒŒ๊ตฌ๋ฆฝ ๊ฐ€๋ฝ๋ชฐ ๋„์„œ๊ด€์˜ ๋””์ž์ธ ์ˆ˜์ •์ด ์‚ด์ง ์žˆ์—ˆ๋‹ค. ๊ธฐ์กด์˜ ์†กํŒŒ๊ตฌ๋ฆฝ๋„์„œ๊ด€๋“ค์€ BG๊ฐ€ repeat-x๋กœ ๋ฐ˜๋ณต๋˜๊ธฐ ๋•Œ๋ฌธ์—, ๋ณ„ ์‹ ๊ฒฝ์„ ์“ฐ์ง€ ์•Š์•˜์ง€๋งŒ, ์ขŒ์šฐ๋กœ ๊ทธ๋ผ๋ฐ์ด์…˜ ๋˜๋Š” BG๊ฐ€ ๊น”๋ฆฌ๋Š” ๋””์ž์ธ์œผ๋กœ ๊ฒฐ์ •์ด ๋˜์—ˆ๋‹ค. ๋‹น์—ฐํžˆ repeat-x๋ฅผ ์“ธ ์ˆ˜๋Š” ์—†๋‹ค. #topheader{ width:100%; height:90px; z-index:999; background:url(.... 2019. 7. 22.
โœˆ favicon.ico ํŒŒ๋น„์ฝ˜ ๋งŒ๋“ค์–ด์„œ ํ™ˆํŽ˜์ด์ง€์— ๋ถ™์ด๊ธฐ 2014๋…„์— ์ž‘์„ฑ๋œ ๊ธ€์ž…๋‹ˆ๋‹ค. ํ‹ฐ์Šคํ† ๋ฆฌ ํŒŒ๋น„์ฝ˜์€ ํŒŒ๋น„์ฝ˜์„ ๋งŒ๋“  ๋’ค ๋ธ”๋กœ๊ทธ ์„ค์ •์— ์—…๋กœ๋“œ๋งŒ ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ๋ญ๋“ ์ง€ ๊ฒธ์‚ฌ๊ฒธ์‚ฌ ํ•˜๋Š” ๊ฑธ ์ข‹์•„ํ•˜๋Š” ํƒ€์ž…์ด๋ผ. ๋„ค์ด๋ฒ„ ๋ธ”๋กœ๊ทธ์—์„œ ํ‹ฐ์Šคํ† ๋ฆฌ๋กœ ์ด์‚ฌ๋ฅผ ์˜ค๋ฉด์„œ ๋„ค์ด๋ฒ„์—์„œ๋Š” ๋ฝ๋‚ผ ์ˆ˜ ์—†์—ˆ๋˜ ๊ธฐ๋Šฅ๋“ค์„ ์‹ญ๋ถ„ ํ™œ์šฉํ•ด๋ณด๋Š” ๊น€์— ์ €์ฒ˜๋Ÿผ ์ดˆ๋ณด๊ฐ€ ๊ฐ‘๊ฐ‘ํ•ดํ•˜๊ณ  ๊ฐ€๋ ค์šด ๊ฒƒ์„ ์ง์ ‘ ํ•ด๋‚˜๊ฐ€๋ฉด์„œ ์˜ฌ๋ ค๋ด…๋‹ˆ๋‹ค. ๊ต‰์žฅํžˆ ์ƒ์„ธํ•˜๊ฒŒ ์„ค๋ช…ํ•ด์ฃผ์‹œ๋Š” ๋‹ค๋ฅธ ๋ถ„๋“ค์˜ ๊ธ€๋“ค๋„ ๋งŽ์ง€๋งŒ, ์›Œ๋‚™์— ์•„๋Š”๊ฒŒ ๋งŽ์œผ์…”์„œ ๋“ค ๊ทธ๋Ÿฐ์ง€ ๊ฐ„๋‹จํ•œ ๊ฒƒ ๊นŒ์ง€ ์„ธ๋ฐ€ํ•˜๊ฒŒ ์ƒ์„ธํ•˜๊ฒŒ ์“ฐ๋‹ค ๋ณด๋ฉด ๋˜๋ ค ์–ด๋ ต๊ฒŒ ๋Š๊ปด์ง€๋”๊ตฐ์š”. ๊ทธ๋ž˜์„œ ์ €๋Š” ํ•ต์‹ฌ๋งŒ ์ถ”๋ ค๋ด…๋‹ˆ๋‹ค. ํŒŒ๋น„์ฝ˜์„ ๋‹ค๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. 1. favicon.ico๋ผ๋Š” ํŒŒ์ผ์„ ๋งŒ๋“ ๋‹ค. 2. ์‚ฌ์ดํŠธ์— ์˜ฌ๋ ค๋‘”๋‹ค. 3. ์‚ฌ์ด์— ๋ฅผ ์‚ฝ์ž…ํ•œ๋‹ค. 1.favicon.ico ๋งŒ๋“ค๊ธฐ ํฌํ† ์ƒต์œผ๋กœ ๋งŒ๋“ค์–ด๋„ ๋˜๊ณ . ht.. 2019. 7. 21.
โœˆ jquery animate ์‚ฌ์šฉ์˜ˆ jquery animate ์‚ฌ์šฉ์˜ˆ .animate() ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜๋ฉด html Element ์ƒ์˜ ๊ฐ์ฒด ์›€์ง์ž„์„ ๋ถ€์—ฌํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ฐ˜๋“œ์‹œ CSS ์†์„ฑ ๋งต ๋ฐ์ดํ„ฐ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•œ๋‹ค. ์›€์ง์ž„์— ๊ด€๋ จ๋œ ์†์„ฑ๋“ค์€ ๋‹จ์ˆ˜ ์ˆ˜์น˜ ๊ฐ’(single numeric value)์„ ์ด์šฉํ•œ๋‹ค. ์ฆ‰, width, height, left, margin ๋“ฑ์— ์ด์šฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ color๊ฐ™์€ ๊ฐ’์—๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. .animate( properties [, duration] [, easing] [, complete] ) Returns : jQuery Duration์€ ์ง€์†์‹œ๊ฐ„์ด๋ฉฐ, complete์—๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์ง€์ •ํ•ด์„œ, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋™์ž‘ ์ดํ›„ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋‹จ, ์ด ํ•จ์ˆ˜์—๋Š” ์ธ์ž๊ฐ’์„ ๋„˜๊ฒจ ์ค„ ์ˆ˜๋Š” ์—†๋‹ค. .animate(.. 2019. 7. 17.