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

๋ถ€ํŠธ์ŠคํŠธ๋žฉ6

๋ถ€ํŠธ์ŠคํŠธ๋žฉ width grid incorrect ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์„ ํ™œ์šฉํ•œ ์›น ๋””์ž์ธ์—์„œ ๊ฐ€๋กœ ํญ ์กฐ์ ˆ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ์„ ์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด์ฃผ๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋•Œ๋•Œ๋กœ, ํŠนํžˆ ์ƒˆ๋กœ ์‹œ์ž‘ํ•˜๋Š” ๋ถ„๋“ค์—๊ฒŒ๋Š” ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์ด๋‚˜ ์ปจํ…Œ์ด๋„ˆ ์‚ฌ์šฉ์— ์žˆ์–ด ํ˜ผ๋ž€์„ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ ๊ฐ€๋กœ ํญ(width) ๊ด€๋ จ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ ์ดํ•ด ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์€ ์ปจํ…Œ์ด๋„ˆ, ํ–‰(row), ๊ทธ๋ฆฌ๊ณ  ์—ด(column) ์„ธ ๊ฐ€์ง€ ์ฃผ์š” ๊ตฌ์„ฑ ์š”์†Œ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋“ค์€ ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์„œ๋กœ ํ•จ๊ป˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ, .row ํด๋ž˜์Šค๋Š” ๊ฐ€๋กœ ๋ฐฉํ–ฅ์˜ ์—ฌ๋ฐฑ์„ ๋งŒ๋“ค์–ด๋‚ด๋Š”๋ฐ, ์ด๋Š” ์—ด๋“ค์ด ์ ์ ˆํ•œ ๊ฐ„๊ฒฉ์„ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด ์—ฌ๋ฐฑ์€ .row๊ฐ€ ๋ถ€๋ชจ ์š”์†Œ์˜ ๊ฒฝ๊ณ„๋ฅผ ๋ฒ—์–ด๋‚˜.. 2023. 10. 22.
โœˆ bootstrap selectpicker multiple js ์ˆ˜์ • ์ „์ฒด์„ ํƒ ํ•ด์ œ ๋ณ€๊ฒฝ css bootstrap selectpicker multiple js ์ˆ˜์ • ์ „์ฒด์„ ํƒ ํ•ด์ œ ๋ณ€๊ฒฝ. ์ด ์ œ๋ชฉ์„ ๋ญ๋ผ๊ณ  ์„ค๋ช…ํ•ด์•ผ ํ• ์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค. ์•„๋ฌดํŠผ ์š”์ง€๋Š” ์ด๋ ‡๋‹ค. ๋ถ€ํŠธ์ŠคํŠธ๋žฉ4์˜ selectpicker multiple ์˜ต์…˜์„ ์‚ฌ์šฉํ•  ๋•Œ ๋””ํดํŠธ๋กœ ์ฃผ์–ด์ง€๋Š” ๋ชจ๋‘์„ ํƒ ๋ชจ๋‘ํ•ด์ œ ํ† ๊ธ€ ๋˜๋Š”๊ฒŒ ํด๋ผ์ด์–ธํŠธ ๋งˆ์Œ์— ์•ˆ๋“ค์—ˆ๋‚˜๋ณด๋‹ค. ๋ชจ๋“  option์ด ์„ ํƒ๋˜๋ฉด ๋ชจ๋‘ ํ•ด์ œ๋˜๋Š” ๊ฒƒ์€ ๋‹น์—ฐํ•˜์ง€๋งŒ ํ•˜๋‚˜์˜ ์˜ต์…˜๋งŒ ์„ ํƒํ•ด๋„ ๋ชจ๋‘ํ•ด์ œ๋กœ ๋ฐ”๋€Œ๋Š” ๊ฒƒ์ด ํด๋ผ์ด์–ธํŠธ๋Š” ์ดํ•ด๊ฐ€ ์•ˆ๋œ ๋ชจ์–‘์ด๋‹ค. ๊ทธ๋ž˜์„œ ํด๋ผ์ด์–ธํŠธ๋Š” ์ „์ฒด๊ฐ€ ์•„๋‹Œ ์˜ต์…˜์„ ์„ ํƒํ•˜๋ฉด ์ „์ฒด์˜ต์…˜์€ ๋ณ€ํ•˜์ง€ ์•Š๊ณ , ์ „์ฒด์˜ต์…˜์„ ์„ ํƒํ•˜๋ฉด ๋ชจ๋“  ์˜ต์…˜๋„ ์ฒดํฌ๊ฐ€ ๋œ ๊ฒƒ ์ฒ˜๋Ÿผ ๋ณด์ด๊ฒŒ ํ•ด ๋‹ฌ๋ผ๋Š” ๊ฒƒ์ด๋‹ค. ๊ธฐ๋ณธ์ ์ธ ์…€๋ ‰ํŠธํ”ผ์ปค์˜ ํƒœ๊ทธ ๊ตฌ์กฐ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. ๊ทธ๋ฃน๋ช… ๊ทธ๋ฃน์„ค๋ช… ๋ถ€์„œ๋ช… ์ƒˆ๋กœ ๋ณ€๊ฒฝํ•ด์„œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ง  html๊ตฌ์กฐ.. 2019. 12. 22.
โœˆ Bootstrap 4 Carousel : ์ž๋™ ์žฌ์ƒ ์ค‘์ง€ ๋ฐฉ๋ฒ• ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์Šฌ๋ผ์ด๋” ์ฒ˜์Œ ํผ๋ธ”๋ฆฌ์…”๋ฅผ ์‹œ์ž‘ํ–ˆ์„ ๋•Œ ๋‚ด๊ฒŒ ์นด๋ฃจ์…€(Carousel)์€ ์•…๋ชฝ๊ฐ™์€ ์กด์žฌ์˜€๋‹ค. ํด๋ผ์ด์–ธํŠธ๋“ค์ด ์š”๊ตฌํ•˜๋Š” ๊ฐ์ข… ์‚ฌ์•ˆ์„ ์ ์šฉํ•ด์„œ ์Šฌ๋ผ์ด๋”๋ฅผ ๋งค๋ฒˆ ์ƒˆ๋กœ ๋งŒ๋“ค์–ด์•ผ ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์š”์ฆ˜์€ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋งŽ์ด ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์–ด์„œ ์Šฌ๋ผ์ด๋” ๊ตฌํ˜„์ด ๋„ˆ๋ฌด ํŽธํ•˜๋‹ค. Bootstrap 4๋Š” ๋ณ„๋กœ ์นœ์ ˆํ•˜์ง€ ์•Š๋‹ค. Bootstrap 4์— ์นด๋ฃจ์…€ ์Šฌ๋ผ์ด๋”๊ฐ€ ์žˆ์ง€๋งŒ, ์ฒ˜์Œ๋ถ€ํ„ฐ ์ž๋™์žฌ์ƒ์ด๋‹ค. ์ด๊ฑธ ์›ํ•œ๋‹ค๋ฉด ๋„ˆ๋ฌด๋„ ๊ฐ„ํŽธํ•œ ๋ฐฉ๋ฒ•์ด์ง€๋งŒ, ์ฒ˜์Œ์— ๋ฉˆ์ถฐ ์žˆ๊ธฐ๋ฅผ ์›ํ•œ๋‹ค๋ฉด ์ด ๋•Œ๋Š” ํŒจ๋‹‰์ด๋‹ค. ๋ฐฉ๋ฒ•์€ ์˜์™ธ๋กœ ๊ฐ„๋‹จํ•˜๊ณ  ๋ฌด๊ถ๋ฌด์ง„ํ•˜๋‹ค. ๋จผ์ € ์˜ˆ์ œ๋ฅผ ๋ณด์ž. ๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ๋ฐฉ๋ฒ•์€ data-ride =”carousel” ๋ฅผ ๋นผ ๋ฒ„๋ฆฌ๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. ์ด๊ฒŒ ์—†์œผ๋ฉด ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์Šฌ๋ผ์ด๋”๋Š” ๋ฉˆ์ถฐ ์žˆ๋‹ค. ์•„๋‹ˆ ๋ฉˆ์ถฐ๋‘๋ฉด ์ด๊ฒŒ ๋ญ๋ƒ? ์‹ถ๊ฒ ์ง€๋งŒ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์Šฌ๋ผ์ด๋”๋Š” P.. 2019. 10. 27.
๋ถ€ํŠธ์ŠคํŠธ๋žฉ4 ๋ฐ์ดํŠธํ”ผ์ปค datepicker ์ด๋ฒคํŠธ ๊ฐ€๋กœ์ฑ„๊ธฐ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ4 ๋ฐ์ดํŠธํ”ผ์ปค๋ถ€ํŠธ์ŠคํŠธ๋žฉ4 ๋ฐ์ดํŠธํ”ผ์ปค datepicker ์ด๋ฒคํŠธ ๊ฐ€๋กœ์ฑ„๊ธฐ ํ”Œ๋Ÿฌ๊ทธ์ธ ์ž์ฒด์—์„œ ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œ์ผœ ์ฃผ์ง€๋งŒ, ๋”ฑ ๋‚ด๊ฐ€ ์›ํ•˜๋˜๊ฒŒ ์•„๋‹ˆ์–ด์„œ ์ง์ ‘ ์†Œ์Šค๋ฅผ ๊ฑด๋“œ๋ ธ๋‹ค. https://tempusdominus.github.io/bootstrap-4/Events/ Events - Tempus Dominus - Bootstrap 4 Events Events hide.datetimepicker Fired when the widget is hidden. Parameters: e = { date //the currently set date. Type: moment object (clone) } Emitted from: toggle() hide() disable() show.datetimepicker Fire.. 2019. 9. 27.
๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๋‚ ์งœ์„ ํƒ ํผ bootstrap 4.3 datepicker โœˆ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 4.3 ๋‚ ์งœ ์„ ํƒ ํผ: ๊ฐ„ํŽธํ•œ ๋ฐ์ดํ„ฐ ํ”ผ์ปค ์‚ฌ์šฉํ•˜๊ธฐ ์„œ๋ก  ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ ์›น ๊ฐœ๋ฐœ์„ ํŽธ๋ฆฌํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์ฃผ๋Š” ํ›Œ๋ฅญํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ํŠนํžˆ ๋“œ๋กญ๋‹ค์šด์ด๋‚˜ ๋ฐ์ดํ„ฐ ํ”ผ์ปค์™€ ๊ฐ™์€ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์‰ฝ๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์ด ํฐ ์žฅ์ ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋ฒ„์ „ ์—…๊ทธ๋ ˆ์ด๋“œ ๊ณผ์ •์—์„œ ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 4.3์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๋ฉด์„œ ๋งˆ์ฃผํ•  ์ˆ˜ ์žˆ๋Š” ์Šคํƒ€์ผ ๊ด€๋ จ ์ด์Šˆ์™€ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ, ๋‚ ์งœ ์„ ํƒ์„ ์œ„ํ•œ ๋ฐ์ดํ„ฐ ํ”ผ์ปค ๊ตฌํ˜„์— ์ค‘์ ์„ ๋‘˜ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 4.3 ์—…๊ทธ๋ ˆ์ด๋“œ์˜ ์Šคํƒ€์ผ ๋ณ€ํ™” ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 4.3์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•˜๋ฉด ๊ธฐ์กด์˜ ์Šคํƒ€์ผ์ด ์กฐ๊ธˆ ํํŠธ๋Ÿฌ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์ค‘์—์„œ๋„ ํŠนํžˆ ๋‚ ์งœ ์„ ํƒ์„ ์œ„ํ•œ ๋ฐ์ดํ„ฐ ํ”ผ์ปค์˜ ์Šคํƒ€์ผ์ด ์˜ˆ์ „๊ณผ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋”์šฑ.. 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.