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

Lect & Tip/javascript, jQuery34

-์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌํ˜„ํ•œ 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.
โœˆjavascript location.href๊ณผ split()ํ•จ์ˆ˜๋กœ ์ด๋ฏธ์ง€ ๋ณ€๊ฒฝํ•˜๊ธฐ 2015.03.26 01:30 ์‹ค์ œ๋กœ ํ™ˆํŽ˜์ด์ง€๋ฅผ ๊ฐœ๋ฐœํ•˜๊ฒŒ ๋˜๋ฉด, ํผ๋ธ”๋ฆฌ์‹ฑ๊ณผ๋Š” ๋ณ„๊ฐœ๋กœ ๊ฐœ๋ฐœ์–ธ์–ด๊ฐ€ ์ž…ํ˜€์ง€๋Š” ๊ฒฝ์šฐ์— ํ•œ ๊ฐœ์˜ ์†Œ์Šค ํŽ˜์ด์ง€๋กœ ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ’์„ ๋‹ฌ๋ฆฌํ•ด์„œ ๋‹ค๋ฅธ ๋ฉ”๋‰ด๋ฅผ ๊ตฌ์„ฑํ•˜๊ฒŒ ๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ข…์ข…์žˆ๋‹ค. ์ด๋Ÿด ๋•Œ ํŠน์ • ์ด๋ฏธ์ง€ ํ˜น์€ ํŠน์ • ์ฝ”๋“œ๋งŒ ๋‹ค๋ฅด๊ฒŒ ๋ณด์—ฌ์ ธ์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ ๊ฐœ๋ฐœ์ž๋ฅผ ๊ท€์ฐฎ๊ฒŒ ํ•˜๊ธฐ ์‹ซ์œผ๋ฉด location.href๋ฅผ ์ด์šฉํ•˜๋ฉด ํŽธ๋ฆฌํ•˜๋‹ค. ์˜ˆ์‹œ๋กœ ๋“ค ์‚ฌ์ดํŠธ๋Š” ์ข…๋กœ๊ตฌ์‹œ์„ค๊ด€๋ฆฌ๊ณต๋‹จ์ธ๋ฐ, ์œ ์ง€๋ณด์ˆ˜ ์˜๋ขฐ๋กœ ๋‹ด๋‹น๋ถ€์„œ์˜ ์ „ํ™”๋ฒˆํ˜ธ๋ฅผ ํŽ˜์ด์ง€์— ์‚ฝ์ž…ํ•ด ๋‹ฌ๋ผ๋Š” ์˜๋ขฐ๊ฐ€ ๋“ค์–ด์™”๋‹ค. ๊ฐœ๋ฐœ์ž๋“ค์ด ๋ฐ”์œ ๊ด€๊ณ„๋กœ ๊ฐœ๋ฐœ์„ ๊ฑฐ์น˜์ง€ ์•Š๊ณ  UI๋‹จ์—์„œ๋งŒ ์ฒ˜๋ฆฌํ•œ ์†Œ์Šค์ด๋‹ค. http://www.ijongno.co.kr/front/main/11 ๋ฌธํ™”์ฒด์œก์‹œ์„ค, ์ข…๋กœ๊ตฌ๋ฏผํšŒ๊ด€, ์ข…๋กœ๋ฌธํ™”์ฒด์œก์„ผํ„ฐ, ๋™๋ฌด์—ฌ์„ฑ๋ฌธํ™”์„ผํ„ฐ,์ฒญ์†Œ๋…„๋ฌธํ™”์„ผํ„ฐ,์‚ผ์ฒญํ…Œ๋‹ˆ์Šค์žฅ์˜ ์„œ๋ธŒ๋ฉ”์ธํŽ˜์ด์ง€์—.. 2019. 8. 28.
-์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ link Canonical javascript createElement appendChild window.location.href ๊ฒฐ๋ก ๋ถ€ํ„ฐ ๋งํ•˜์ž๋ฉด ์‚ฝ์งˆ์ด๋‹ค.์–ด๋Š๋‚  ๊ฐ‘์ž๊ธฐ ๊ตฌ๊ธ€ ์• ๋“œ์„ผ์Šค ๊ด‘๊ณ ๊ฐ€ ๋œจ์ง€ ์•Š๊ธธ๋ž˜ ํ™•์ธํ•ด ๋ณด๋‹ˆ ๊ฐœ์ธ๋„๋ฉ”์ธ์œผ๋กœ ์„ค์ •๋œ ๋ฌด๋ฃŒ ๋„๋ฉ”์ธ์˜ ๋ฃจํŠธ ๋„๋ฉ”์ธ์—์„œ ๊ตฌ๊ธ€ ์• ๋“œ์„ผ์Šค ์ •์ฑ… ์œ„๋ฐ˜์ด ๋–ด๋‹ค.๋ฌด๋ฃŒ ๋„๋ฉ”์ธ์€ ๋‚ด๋„๋ฉ”์ธ.ํ•œ๊ตญ ์˜ ์ฃผ์†Œ๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค.์ด๊ฒŒ ํ•ด๊ฒฐ์ด ์•ˆ๋˜๋ฉด ๊ด‘๊ณ ๋ฅผ ๊ฒŒ์žฌํ•  ์ˆ˜๊ฐ€ ์—†๋‹จ๋‹ค.๋‚œ๊ฐํ•˜๊ฒŒ๋„...์ด ๋„๋ฉ”์ธ ์ฃผ์†Œ๋กœ ๋„ค์ด๋ฒ„ ์œ ์ž…์ด ์ œ๋ฒ• ์žˆ๋‹ค.๊ทธ๋ž˜์„œ ํ˜น์‹œ๋‚˜ 301 redirection์ด๋ผ๋„ ์จ ๋ณผ๊นŒ ํ–ˆ์ง€๋งŒ ๊ทธ๋Ÿด ๋ฐฉ๋ฒ•์ด ์ „ํ˜€ ์—†๋‹ค.๋ˆ์„ ์“ฐ๋ฉด ๊ฐ€๋Šฅํ•˜๊ฒ ์ง€๋งŒ...์ผ๋‹จ ์ƒˆ๋กœ ํ˜ธ์ŠคํŒ…์„ ๋ฐ›์ง€ ์•Š๋Š”๋‹ค๋Š” ์ „์ œ ํ•˜์— ๊ทธ๋ ‡๋‹ค.๊ทธ๋ž˜์„œ ๊ถ๋ฆฌํ•œ ๊ฒƒ์ด ๋‚ด ๋„๋ฉ”์ธ ํ•œ๊ตญ์˜ ๋‹จ์ผํŽ˜์ด์ง€ ์ˆ˜์ •์—์„œ Canonical๋ฅผ ์„ค์ •ํ•ด์ฃผ๊ณ , ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ location.href๋กœ ๋ฆฌ๋‹ค์ด๋ ‰์…˜์„ ๊ฑธ์–ด์„œ ์˜ฎ๊ธฐ๋Š” ๋ฐฉ๋ฒ•์„ ์ƒ๊ฐํ•ด ๋ดค๋‹ค.๊ฒฐ๊ณผ๋Š” ์•ž์„œ ๋งํ•œ ๋ฐ๋กœ ์‚ฝ์งˆ์ด๊ณ  ์‹คํŒจ๋‹ค.๋ฌผ๋ก  ํ›Œ.. 2019. 8. 26.
- ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹œ๊ฐ„ ์ œ์–ด ํ•จ์ˆ˜ setTimeout(), setInterval(), clearTimeout() ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹œ๊ฐ„ ์ œ์–ด ํ•จ์ˆ˜ setTimeout(), setInterval(), clearTimeout() ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด์„œ ์ผ์ •ํ•œ ์‹œ๊ฐ„ ๊ฐ„๊ฒฉ๋งˆ๋‹ค ํ˜น์€ ์ผ์ •ํ•œ ์‹œ๊ฐ„์ด ์ง€๋‚œ ๋’ค์— ํŠน์ • ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค๊ฑฐ๋‚˜ ๋™์ž‘์„ ์ทจํ•ด์•ผ ํ•  ๊ฒฝ์šฐ๊ฐ€ ์ข…์ข… ์žˆ๋‹ค. ์ด๋Ÿด ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹œ๊ฐ„ ํ•จ์ˆ˜๊ฐ€ ๋ฐ”๋กœ setTimeout()์™€ setInterval()์ด๋‹ค. setTimeout(), setInterval()์˜ ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ ํ•œ ๋ฒˆ๋งŒ ์‹คํ–‰ํ•˜๋Š๋ƒ, ๊ณ„์† ๋ฐ˜๋ณต์ ์œผ๋กœ ์‹คํ–‰ํ•˜๋Š๋ƒ์˜ ์ฐจ์ด๋‹ค. ์œ„์˜ ๋‘ ์˜ˆ์ œ์ฒ˜๋Ÿผ ๋‹จ ํ•œ๋ฒˆ๋งŒ ์ ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด setTimeout์„ ์‚ฌ์šฉํ•˜๊ณ , ์ผ์ •ํ•œ ์‹œ๊ฐ„๊ฐ„๊ฒฉ์œผ๋กœ ๋ฐ˜๋ณต ์ ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด setInterval()์„ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค. setInterval์—์„œ 1000์ด๋ผ๋Š” ์ˆซ์ž๋Š” ๋ฐ€๋ฆฌ์„ธ์ปจ๋“œ๋กœ ํ•ด๋‹น ์ˆซ์ž์˜ .. 2019. 8. 4.
[์›น์ ‘๊ทผ์„ฑ] jquery checked checkbox radio ์ฒดํฌ ์œ ๋ฌด, ์„ ํƒ๋œ ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ ์ œ์ด์ฟผ๋ฆฌ ์ฒดํฌ๋ฐ•์Šค ๊ฐœ์ˆ˜์ฒดํฌ ์†Œ์Šค โœˆ ์›น์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•œ jQuery๋ฅผ ํ™œ์šฉํ•œ ์ฒดํฌ๋ฐ•์Šค์™€ ๋ผ๋””์˜ค ๋ฒ„ํŠผ ์ฒ˜๋ฆฌ ๊ฐœ์š” ๊ฐ•๋™๊ตฌ๋ฆฝํ†ตํ•ฉ๋„์„œ๊ด€ ํšŒ์›๊ฐ€์ž…์—์„œ ์ด์šฉ์•ฝ๊ด€ ๋™์˜ ๋ฐ ๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ ๋™์˜์— radio์™€ checkbox form์ด ์‚ฌ์šฉ๋˜์–ด ์žˆ๋Š”๋ฐ, ์›น ์ ‘๊ทผ์„ฑ์— ๋ถ€ํ•ฉ๋˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์˜ค๋ฅ˜๋ฐœ์ƒ ์‹œ ์•Œ๋ฆผ ํ›„ ํ•ด๋‹น ์ž…๋ ฅํผ์œผ๋กœ ํฌ์ปค์Šค๋ฅผ ๋งž์ถฐ์ฃผ์–ด์•ผ ํ•œ๋‹ค. ๋•Œ ๋งˆ์นจ ์˜ค๋Š˜ ์ด ํšŒ์› ์•ฝ๊ด€ ๋™์˜ ํŽ˜์ด์ง€์—์„œ ๋ผ๋””์˜ค์™€ ์ฒดํฌ๋ฐ•์Šค๊ฐ€ ๋ชจ๋‘ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์–ด์„œ, jquery radio checked์™€ jquery checkbox checked๋กœ ์ฒดํฌ ์œ ๋ฌด์™€ focus()๋ฅผ ์ด์šฉํ•ด์„œ ์ด›์  ๋งž์ถ”๋Š” ๊ฒƒ์„ ์˜ˆ์ œ๋กœ ์“ธ ์ˆ˜ ์žˆ์–ด์„œ ํฌ์ŠคํŒ… ํ•œ๋‹ค. ์ฒดํฌ ์œ ๋ฌด๋“ , ํฌ์ปค์Šค๋ฅผ ๋งž์ถ”๋Š” ๊ฒƒ์ด๋“  jquery์˜ ์ ˆ๋ฐ˜์€ ์š”์†Œ(element)์˜ ์ •ํ™•ํ•œ ์„ ํƒ์ž ์„ ์ •์ด ์ค‘์š”ํ•˜๋‹ค. ์˜ˆ์ œ ์†Œ๊ฐœ ์ผ๋‹จ ์˜ˆ์ œ๋กœ ๋ณด์ž. ํ†ตํ•ฉ.. 2019. 8. 2.
โœˆ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.