Lect & Tip/javascript, jQuery33 '์ ์ด์ฟผ๋ฆฌ toggle()์ด์ฉํด์ ๊ฒ์๋ฌผ ๋ชฉ๋ก ์ ๋ ฌ ๋ฒํผ ํ ๊ธํ๊ธฐ ๊ฒ์๋ฌผ ๋ชฉ๋ก์ ์ ๋ชฉ, ํน์ ์กฐํ์, ๊ฒ์์ผ ์์๋ฅผ ๋ด๋ฆผ์ฐจ์ ํน์ ์ค๋ฆ ์ฐจ์์ผ๋ก ์ ๋ ฌํ๋ ๊ฒ์ ํ ๊ธํด์ผํ ๋๊ฐ ์์ฃ . ๋ฌผ๋ก ๊ฒ์๋ฌผ์ ์์๋ ๊ฐ๋ฐํ์์ ์ํ ์ ํด์ฃผ์ด์ผ๊ฒ ์ง๋ง, ์ผ๋จ์ UI์์์ ๋ฒํผ์ ํ์ดํ๋ก ์ง๊ด์ ์ผ๋ก ์ค๋ฆ์ฐจ์ ๋๋ ๋ด๋ฆผ์ฐจ์์ ํด๋ฆญ ํ์์ ๋ฐ๋ผ ํ ๊ธํด์ฃผ์ด์ผ ํ ํ์๊ฐ ์์ต๋๋ค. ์ ๋ฌผ๋ก ๋ฐ์ดํฐ์ ์ํ ๊น์ง ํ๋ ์์ค๋ ์๋๋๋ค.์ด ๊ธ์์์ ๋ชฉ์ ์ ๋จ์ง ํ ๊ธ ๋ฒํผ์ ๊ฐ๋จํ๊ฒ ๊ตฌํํ๋ ์ ์ด์ฟผ๋ฆฌ ์์ค ์๊ฐ์ ๋๋ค.์ด๋ด ๋ ์ ์ด์ฟผ๋ฆฌ(jquery)๋ฅผ ์ฐ๋ฉด ๊ฐ๋จํ๊ฒ ์ฒ๋ฆฌ๊ฐ ๋๊ฒ ์ฃ . Demo Page๋ณด๊ธฐCSS .bd00Bbs th a { background:url(../image/common/ico/arrow_0.gif) 100% 50% no-repeat; padding-right:16px; display.. 2020. 6. 8. โ jquery๋ก ํ์ด์ง ์๋จ์ผ๋ก ๋ถ๋๋ฝ๊ฒ ์ด๋ํ๋ ํ ์คํฌ๋กค ๋ฒํผ ๋ง๋ค๊ธฐ ๋ณดํต ํ์คํฌ๋กค์ด๋ผ๊ณ ๋ถ๋ฅด๋ ๋ฒํผ์ธ๋ฐ์. ํํ ๋ฐฉ์์ด์ง๋ง, ๊ฐ๋ ๋ ์ค๋ฅด์ง ์์์ ๊ฒ์ํ์๋ ๋ถ๋ค์ ์ํด ์ฌ๋ ค๋ก๋๋ค. ๋ญ~ ์ ๋ ๊ฐ๋์ ๊น๋จน์ด์ ๋ค์ ์๊ฐํด๋ด๋ ์ผ ์์ด ๋ ๋ค ์ฐ๋ ค๊ณต.... /* top ์คํฌ๋กค */ var speed = 500; $("a.top").css("cursor", "pointer").click(function(){ $('body, html').animate(, speed); }); speed ๋ณ์๋ ์คํฌ๋กค์ด ์ ๋๋ฉ์ดํธ ๋์ด์ ์ด๋ํ๋ ์๋๋ฅผ ์ง์ ํด์คฌ์ต๋๋ค. ๊ท์ฐฎ์ผ๋ฉด ๊ทธ๋ฅ ๋ณ์ ์ฐ์ง ๋ง๊ณ ์ซ์๋ก ๋ฐ๋ก ์จ๋ ๋ฉ๋๋ค. . css("cursor, "pointer")๋ ์๋ตํด๋ ๋ฌด๋ฐฉํ๋ฉฐ, css์์ฒด์ a.top { cursor:pointer}๋ก ์์ฑํด๋์ด๋ ๋ฌด๋ฐฉํฉ๋๋ค. ์ค์ง์ ์ธ ํต์ฌ์ $(.. 2020. 2. 21. โ ์ ์ด์ฟผ๋ฆฌ ์ฒดํฌ๋ฐ์ค ์ฒดํฌ ์ฌ๋ถ ํ์ธ ๋ฐ ์ ์ด jquery checkbox checked ์ ์ด์ฟผ๋ฆฌ ์ฒดํฌ๋ฐ์ค ์ฒดํฌ ์ฌ๋ถ ํ์ธ ๋ฐ ์ ์ด jquery checkbox checked ์ ์ด์ฟผ๋ฆฌ ์ฒดํฌ๋ฐ์ค checked ์ฌ๋ถ ํ์ธ $("input:checkbox[id='ID']").is(":checked") == true : false /* by ID */ $("input:checkbox[name='NAME']").is(":checked") == true : false /* by NAME */ checked/unchecked ์ฒ๋ฆฌ $("input:checkbox[id='ID']").prop("checked", true); /* by ID */ $("input:checkbox[name='NAME']").prop("checked", false); /* by NAME */ ์ ์ฒด์ ํ ์ฒดํฌ๋ฐ์ค๋ฅผ ์ ํํ๋ฉด ๊ทธ ์๋.. 2020. 2. 14. jquery .sort() ์์ ์ด๋ํ๋ฉด์ ์ ์ด์ฟผ๋ฆฌ ์ํธ ์ ๋ ฌํ๊ธฐ โ jquery .sort()๋ฅผ ํ์ฉํ ์์ ์ด๋๊ณผ ์ํธ ์ ๋ ฌ ์๋ ํ์ธ์! ์ด๋ฒ ํฌ์คํ ์์๋ jQuery์ .sort() ํจ์๋ฅผ ํ์ฉํ์ฌ ์์๋ฅผ ์ด๋ํ๊ณ ๋์์ ์ํธ ์ ๋ ฌํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด๊ฒ ์ต๋๋ค. ์ด ๊ธฐ์ ์ ๋ถ์๋ ํธ๋ฆฌ๊ตฌ์กฐ์ ๋ชฉ๋ก์์ ํญ๋ชฉ์ ๋ค๋ฅธ ์์น๋ก ์ด๋ํ๋ฉด์ ์ ๋ ฌ์ ์ ์งํ๊ณ ์ ํ ๋ ์ ์ฉํ๊ฒ ํ์ฉ๋ ์ ์์ต๋๋ค. ์ดํด๋ฅผ ๋๊ธฐ ์ํด ๊ฐ๋จํ ์์์ ํจ๊ป ์ฝ๋๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค. ์์: ๋ถ์ ์ด๋๊ณผ ์ํธ ์ ๋ ฌ ์ ์๋ ์์์์๋ '๋ถ์๋ชฉ๋ก'๊ณผ '์ ํ๋ ๋ถ์'๋ผ๋ ๋ ๊ฐ์ ๊ทธ๋ฃน์ด ์์ต๋๋ค. ์ด ๊ทธ๋ฃน๋ค์ UL๊ณผ LI ์์๋ฅผ ์ฌ์ฉํ์ฌ ๊ตฌ์ฑ๋์ด ์์ต๋๋ค. ๊ฐ ๋ถ์๋ ๋ฐ์ดํฐ ์์ฑ data-sid๋ฅผ ํตํด ์๋ณ๋ฉ๋๋ค. ์ฌ์ฉ์๊ฐ '๋ถ์๋ชฉ๋ก'์ ๋ถ์๋ฅผ ์ ํํ๋ฉด ํด๋น ๋ถ์๊ฐ '์ ํ๋ ๋ถ์'๋ก ์ด๋ํ๊ฒ ๋๋ฉฐ, ์ด๋๋ ํ.. 2020. 1. 13. ์ ์ด์ฟผ๋ฆฌ ์์ฝ๋์ธ 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. -์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ตฌํํ rgb ์์ํ + CSS 16์ง์ rgb ์์์ฝ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ตฌํํ RGB ์์ํ + CSS 16์ง์ ์์ ์ฝ๋ 2015.08.29 11:11 RGB ์์ํ๋ฅผ CSS 16์ง์(HEX) ์์ ์ฝ๋๋ก ํํํ๊ธฐ ํผ๋ธ๋ฆฌ์ฑ์ ํ ๋ ๋์์ธํ์์ ์ง์ ํ ์์ ์์์ CSS๋ก ํํํ ๋ ํฌํ ์ต์ ์คํฌ์ด๋๋ก ์ฐ์ด๋ณด๋ฉด RGB ์์ํ์์ HEX๊ฐ์ ์ ์ ์๋ค. ์ด RGB ์์ํ๋ #1930a2์๊ฐ์ด ํํ๋๋๋ฐ ๋ํดํ ์ํธ ๊ฐ์ ๋ณด์ด์ง๋ง ๋ค ๋ป์ด ์๋ ๋ฌธ์์ ์กฐํฉ์ด๋ค. ์์์ ์ผ๋ถ๋ฌ ์์ 2 ๊ธ์์ฉ ์๋ผ์ ๋ค๋ฅด๊ฒ ์ผ๋๋ฐ, ๋ช ๋ฏผํ ์ฌ๋์ด๋ผ๋ฉด ๊ธ๋ฐฉ ๋์น์ฑ์ ๊ฒ์ด๋ค. RGB๋ผ๋ ๋ง์ ๋ป๋ถํฐ ์ดํดํ๋ค๋ฉด ๋ฐ๋ก ์ค๋ช ํ์ง ์์๋ ๊ฐ์ด ๋ฐ์ ์ฌ ๊ฒ์ด๋ค. RGB์ ๋ป์ R=Red, G=Green, B=Blue๋ฅผ ๋ปํ๋ค. ๊ทธ๋ฌ๋ ์์ ์ฝ๋์์ #์ ์ ์ธํ ๋๋จธ์ง 6์๋ฆฌ์ ๊ฐ ๋ ์๋ฆฌ๋.. 2019. 9. 7. ์ด์ 1 2 3 4 5 6 ๋ค์