Lect & Tip109 SASS SCSS aํ๊ทธ ์๋ ๊ฐ๊ธฐ ๋ค๋ฅธ ์ ์์๋ฅผ a:hover ์์ ๊ฐ๊ฒ ํ๊ธฐ โSASS SCSS aํ๊ทธ ์๋ ๊ฐ๊ธฐ ๋ค๋ฅธ ์ ์์๋ฅผ a:hover ์์ ๊ฐ๊ฒ ํ๊ธฐ SASS SCSS aํ๊ทธ ์๋ ๊ฐ๊ธฐ ๋ค๋ฅธ ์ ์์๋ฅผ a:hover ์์ ๊ฐ๊ฒ ํ๊ธฐ. ๋๊ฒ ๊ฑฐ์ฐฝํ ํํ๊ฐ์ง๋ง ๋ณ๊ฑฐ ์๋๋ค. ๋ค๋ง SCSS์ ๊ตฌ์กฐ์ ๋ํด์ ์ค๋ช ํ๊ธฐ ์ํ ๊ธ์ด๋ค. ์์ ๊ฐ์ ๊ฒฝ์ฐ ํ ์คํธ ์์ญ์ ๋งํฌ๋ ํ๋๋ค. ๋ง์ฐ์ค์ค๋ฒ๊ฐ ๋์์ ๋ ๋ฌธ๋จ ๋ณ๋ก ์์ด ๋ฐ๋๋ฉด ์๋๊ณ , ์ ์ฒด๊ฐ ์์ด ๋ฐ์ ์ด ๋์ด์ผ ํ๋ค. ๊ฐ๊ฐ ์คํ์ผ์ ์ฃผ์ด๋ ๋์ง๋ง, SCSS์์๋ ๊ฐ๋จํ๊ฒ ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ค. html Contents ์คํ์ธํ์ 3ํ ๋ฏธ์ํ์ง๋ง, ๋ ๋น์ ๋ค์ด ๊ถ๊ธํ์ง ์์์๋ฏธ์ํ์ง๋ง, ๋ ๋น์ ๋ค์ด ๊ถ๊ธํ์ง ์์์๋ฏธ์ํ์ง๋ง, ๋ ๋น์ ๋ค์ด ๊ถ๊ธํ์ง ์์์ ์ด๋ฐ ๊ตฌ์กฐ์ผ ๋ SCSS SCSS ๋ ๋ค์๊ณผ ๊ฐ์ด ๊ตฌ์ฑํ๋ค. .card { borde.. 2019. 11. 18. ๋ถํธ์คํธ๋ฉ ์ ๋ ํธ .bootstrap-select css ์คํ์ผ ๋ณ๊ฒฝ ๋ชจ๋ ์ ํ ํด์ ํ ๊ธ ๋ฒํผ scss ๋ถํธ์คํธ๋ฉ ์ ๋ ํธ .bootstrap-select css ์คํ์ผ ๋ณ๊ฒฝ ๋ถํธ์คํธ๋ฉ์ ์ ๋ ํธ๋ ์ ๋ ํธ ๊ทธ ์์ฒด๋ ์์์ง๋ง, ๋ฉํฐ ์ ๋ ํธ ์ฌ์ฉ ์์ ์ ํ ์ฒดํฌ๊ฐ ๋๋ฌด ์ ์์๋ค. ๋๋๊ตฐ๋ค๋ ํ๊ตญ์ฌ๋๋ค์ ๋ฉํฐ ์ ๋ ํธ์ ์ต์ํ์ง ์์์ checkbox๋ฅผ ํ์๋ก ํ๋ค. ์์ ๊ฐ์ ๋ฉํฐ ์ ๋ ํธ ๋ฐ์ค๋ฅผ ์ ๋ง ์ ์์๋ค. ์ด๊ฒ์ ๋ง์น ์ฒดํฌ๋ฐ์ค๋ก ์ ํํ ๊ฒ์ฒ๋ผ ๋ฐ๊พธ๋ ๊น์ ๋ชจ๋ ์ ํ๊ณผ ๋ชจ๋ ํด์ ๋ฒํผ๋ ๋ง์น ์ ์ฒด ์ ํ ์ฒดํฌ๋ฐ์ค์ธ ๊ฒ์ฒ๋ผ ๋ฐ๊ฟ๋ณด์. ๋ฌผ๋ก ์ด๋ ์ฒดํฌ๋ฐ์ค๋ ์ด๋ฏธ์ง BG๋ค. ์ด ๋ฐฉ์์ ์ธ ๋์ ๊ฐ๋ฐ ์ด์ ์ ๋ชจ๋ ์ ํ๊ณผ ํด์ ํ ๋ ์ ์ฒด ์ฒดํฌ๋ฐ์ค์ checked๋ฅผ ์ ์ดํด์ค ํ์๊ฐ ์๋ค. bootstrap ์์ฒด์ jquery๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ๋ฐ์ ํด ์ค๋ค. ๋ถํธ์คํธ๋ฉ ์ ๋ ํธ์ multiple์ ์ค ๋ data-actions.. 2019. 11. 14. โ img ํ๊ทธ 404 Error์์ ๋์ฒด ์ด๋ฏธ์ง ๋์ฐ๊ธฐ img ํ๊ทธ 404 Error๊ฐ ๋ฐ์ํ๋ฉด ๋์ฒด ์ด๋ฏธ์ง๋ฅผ ๋์ฐ๋ ๊ฒ์ ์ฝ๋ค. ์๋ ์ฒ์๋ถํฐ ๊ทธ๋ ๊ฒ ๋ง๋ค๋ฉด ๋ณ๋ก ๊ฑฑ์ ํ ๋ฌธ์ ๋ ์๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋์ฒด๋ก ๋ ์ด์์์ ๊ตฌ์ฑํ๋ ์ด๋ฏธ์ง๋ bg์์ฑ์ ์ค ์คํ์ผ์ ๋จน์ด๋ ๊ฒฝ์ฐ๊ฐ ๋๋ถ๋ถ์ด๋ฏ๋ก, bg๊ฐ ๊น๋ฆฌ์ง ์์ผ๋ฉด ์คํ์ผ๋ง ๋ณ๊ฒฝํด ์ฃผ๋ฉด ๋๋ค. ๊ทธ ์ด์ธ์ ๋ ์ด์์์ ๊ตฌ์ฑํ๋ ์ด๋ฏธ์ง ์์๋ค๋ ๋ง์ฐฌ๊ฐ์ง๋ก ์ฒ๋ฆฌํ๋ฉด ๋๋ค. ๋ฌธ์ ๋ ๊ฒ์ํ์ด๋, ๊ฐค๋ฌ๋ฆฌ ๋ฑ ๋ค์ ์ฌ์ฉ์ ๋น๋ฐ ๊ทธ๋ฃน์ด ์กด์ฌํ์ง ์๋ ์ด๋ฏธ์ง๋ฅผ ์ฌ๋ฆฌ๊ฑฐ๋, ์ฌ๋ ธ๋ ์ด๋ฏธ์ง ์์ค ์ฃผ์๊ฐ ์์ด์ง ๊ฒฝ์ฐ์ ๋ฐ์ํ๋ ์ด๋ฏธ์ง ์๋ฌ ๋ฌธ์ ๋ ๋ณดํต ๋ค์๊ณผ ๊ฐ์ด ํด๊ฒฐํด ์ฃผ์ด์ผ ํ๋ค. ๊ทธ๋ฐ๋ฐ ์์๋ ์ง์ ํ์ง๋ง ๊ฒ์ํ์ ์ด๋ฏธ์ง๋ฅผ ๋ถํํด๋ค ๋ถ์ด๋ ์ฌ์ฉ์๋ค์ด ์น์ ํ๊ฒ htmlํ๊ทธ๋ฅผ ์ด์ด์ ๋์ฒด ์ด๋ฏธ์ง ์ฃผ์๋ฅผ ์ ๋ ฅํ๋ attr์ ์ง์ด๋ฃ๊ธฐ๋ฅผ ๋ฐ๋ผ๋ ๊ฒ์ .. 2019. 11. 11. โ Bootstrap 4 Carousel : ์๋ ์ฌ์ ์ค์ง ๋ฐฉ๋ฒ ๋ถํธ์คํธ๋ฉ ์ฌ๋ผ์ด๋ ์ฒ์ ํผ๋ธ๋ฆฌ์ ๋ฅผ ์์ํ์ ๋ ๋ด๊ฒ ์นด๋ฃจ์ (Carousel)์ ์ ๋ชฝ๊ฐ์ ์กด์ฌ์๋ค. ํด๋ผ์ด์ธํธ๋ค์ด ์๊ตฌํ๋ ๊ฐ์ข ์ฌ์์ ์ ์ฉํด์ ์ฌ๋ผ์ด๋๋ฅผ ๋งค๋ฒ ์๋ก ๋ง๋ค์ด์ผ ํ๊ธฐ ๋๋ฌธ์ด๋ค. ์์ฆ์ ๋ถํธ์คํธ๋ฉ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋ง์ด ์ฌ์ฉ๋๊ณ ์์ด์ ์ฌ๋ผ์ด๋ ๊ตฌํ์ด ๋๋ฌด ํธํ๋ค. Bootstrap 4๋ ๋ณ๋ก ์น์ ํ์ง ์๋ค. Bootstrap 4์ ์นด๋ฃจ์ ์ฌ๋ผ์ด๋๊ฐ ์์ง๋ง, ์ฒ์๋ถํฐ ์๋์ฌ์์ด๋ค. ์ด๊ฑธ ์ํ๋ค๋ฉด ๋๋ฌด๋ ๊ฐํธํ ๋ฐฉ๋ฒ์ด์ง๋ง, ์ฒ์์ ๋ฉ์ถฐ ์๊ธฐ๋ฅผ ์ํ๋ค๋ฉด ์ด ๋๋ ํจ๋์ด๋ค. ๋ฐฉ๋ฒ์ ์์ธ๋ก ๊ฐ๋จํ๊ณ ๋ฌด๊ถ๋ฌด์งํ๋ค. ๋จผ์ ์์ ๋ฅผ ๋ณด์. ๊ฐ์ฅ ๊ฐ๋จํ ๋ฐฉ๋ฒ์ data-ride =”carousel” ๋ฅผ ๋นผ ๋ฒ๋ฆฌ๋ ๋ฐฉ๋ฒ์ด๋ค. ์ด๊ฒ ์์ผ๋ฉด ๋ถํธ์คํธ๋ฉ ์ฌ๋ผ์ด๋๋ ๋ฉ์ถฐ ์๋ค. ์๋ ๋ฉ์ถฐ๋๋ฉด ์ด๊ฒ ๋ญ๋? ์ถ๊ฒ ์ง๋ง ๋ถํธ์คํธ๋ฉ ์ฌ๋ผ์ด๋๋ P.. 2019. 10. 27. ์ ์ด์ฟผ๋ฆฌ ์์ฝ๋์ธ on() ์ด๋ฒคํธ ์ฃผ๊ฐ ์ค์ผ์ค ๋ง๋ค๊ธฐ css :not() ์ ํ์ ์ ์ด์ฟผ๋ฆฌ on() ์ด๋ฒคํธ ์ css :not() ์ ํ์๋ฅผ ์ด์ฉํด์ ์ฃผ๊ฐ ์ค์ผ์ค ์์ฝ๋์ธ ๋ง๋ค๊ธฐ ์ผํ๋ ์ค์ด๋ผ ์์ธํ ์ ์ด์ฟผ๋ฆฌ ์์ฝ๋์ธ ์ค๋ช ์ ์๋ตํ๋ค. css /* scheduleWeek*/ .scheduleWeek { width: 100%; min-width: 950px; table-layout: fixed; border-spacing: 0; border-top: 1px solid #ccc; } .scheduleWeek>tbody>tr>th, .scheduleWeek>tbody>tr>td { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } .scheduleWeek>tbody>tr>th.selectTH { width: 90px; border.. 2019. 10. 11. ๋ถํธ์คํธ๋ฉ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. ์ด์ 1 ยทยทยท 10 11 12 13 14 15 16 ยทยทยท 19 ๋ค์