728x90
๋ฐ˜์‘ํ˜•
 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/jQuery

[jQuery All in One] ๊ธฐ์กด ์ปจํ…์ธ ๋ฅผ ๋‘˜๋Ÿฌ์‹ผ ์ƒˆ๋กœ์šด ์ปจํ…์ธ ๋ฅผ ์‚ฝ์ž…ํ•˜๋Š” ๋ฐฉ๋ฒ• (unwrap, wrap, wrapAll, wrapInner)

.unwrap() - ์ง€์ •ํ•œ ์š”์†Œ์˜ ๋ถ€๋ชจ์š”์†Œ๋ฅผ ์ œ๊ฑฐ .wrap() - ์ง€์ •ํ•œ ์š”์†Œ๋ฅผ wrap์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌํ•œ ํƒœ๊ทธ๋กœ ๊ฐ์‹ผ๋‹ค .wrapAll() - ์ง€์ •ํ•œ ํด๋ž˜์Šค๋“ค์„ wrapAll ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌํ•œ ํƒœ๊ทธ๋กœ ๋ชจ๋‘ ๊ฐ์‹ผ๋‹ค .wrapInner() - ์ง€์ •ํ•œ ์š”์†Œ์— ์ž์‹ ์ปจํ…์ธ ๋ฅผ wrapInner ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌํ•œ ํƒœ๊ทธ๋กœ ๊ฐ์‹ผ๋‹ค. .unwrap() // ์ง€์ •ํ•œ ์š”์†Œ์˜ ๋ถ€๋ชจ์š”์†Œ๋ฅผ ์ œ๊ฑฐํ•œ๋‹ค. $('p').unwrap(); .wrap() // ์ง€์ •ํ•œ ์š”์†Œ๋ฅผ wrap์˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌํ•œ ํƒœ๊ทธ๋กœ ๊ฐ์‹ผ๋‹ค. $('p').wrap(''); .wrapAll() // ์ง€์ •ํ•œ ํด๋ž˜์Šค๋“ค์„ wrapAll ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌํ•œ ํƒœ๊ทธ๋กœ ๋ชจ๋‘ ๊ฐ์‹ผ๋‹ค $('.inner').wrapAll(''); .wrapInner() // ์ง€์ •ํ•œ ์š”์†Œ์— ์ž์‹..

2020.02.22 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/jQuery

[jQuery All in One] ์ผ์น˜ํ•˜๋Š” ์š”์†Œ ๋ณต์‚ฌํ•˜๋Š” ๋ฐฉ๋ฒ• (clone)

jQuery version: 3.4.1 .clone([withDataAndEvents]) ์„ค๋ช… : ์ผ์น˜ํ•˜๋Š” ์š”์†Œ๋ฅผ ๊นŠ์€ ๋ณต์‚ฌ(deep copy) ํ•ฉ๋‹ˆ๋‹ค. .clone([withDataAndEvents]) withDataAndEvents (default: false) Type: Boolean ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์™€ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์†Œ์™€ ํ•จ๊ป˜ ๋ณต์‚ฌํ•ด์•ผํ•˜๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” Boolean ๊ฐ’์ž…๋‹ˆ๋‹ค. .clone([withDataAndEvents][, deepWithDataAndEvents]) withDataAndEvents (default: false) Type: Boolean ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์™€ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์†Œ์™€ ํ•จ๊ป˜ ๋ณต์‚ฌํ•ด์•ผํ•˜๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” Boolean ๊ฐ’์ž…๋‹ˆ๋‹ค. deepWithDataAndEvents (defaul..

2020.02.15 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/jQuery

[jQuery All in One] ํด๋ž˜์Šค ์„ ํƒ์ž ๋‹ค๋ฃจ๊ธฐ (addClass, removeClass, hasClass, toggleClass)

jQuery version: 3.4.1 .addClass( className ) ์„ค๋ช… : ์ง€์ •๋œ ํด๋ž˜์Šค๋ฅผ ์ผ์น˜ํ•˜๋Š” ์š”์†Œ ์ง‘ํ•ฉ์˜ ๊ฐ ์š”์†Œ์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. .addClass( className ) className Type: String .addClass( function ) function Type: Function( Integer index, String currentClassName ) => String ์‚ฌ์šฉ์˜ˆ์‹œ ์š”์†Œ์˜ ์ง‘ํ•ฉ์—์„œ ์„ ํƒ๋œ ์š”์†Œ์˜ ํด๋ž˜์Šค๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค. .removeClass( className ) ์„ค๋ช… : ์ง€์ •๋œ ํด๋ž˜์Šค๋ฅผ ์ผ์น˜ํ•˜๋Š” ์š”์†Œ ์ง‘ํ•ฉ์˜ ๊ฐ ์š”์†Œ์—์„œ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค. .removeClass( className ) className Type: String .removeClass( fu..

2020.02.13 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/jQuery

jQuery contains() ๋ฉ”์„œ๋“œ๋ฅผ ํ™œ์šฉํ•œ ๊ฒ€์ƒ‰๊ธฐ๋Šฅ ๊ตฌํ˜„

์„œ๋ก  ์•ˆ๋…•ํ•˜์„ธ์š”. ์ •๋ง ์˜ค๋žœ๋งŒ์— ํฌ์ŠคํŒ…์„ ๋‚จ๊ธฐ๋„ค์š” ใ…Žใ…Ž ๊ฒจ์šธ๋ฐฉํ•™์ด ์‹œ์ž‘ํ•˜๊ณ  1์›”์ค‘๋ง๊นŒ์ง€ ์ •๋ง ๋งŽ์€ ์ผ๋“ค์ด ์žˆ์—ˆ๋„ค์š”.ใ…Žใ…Ž ์‚ฌ์‹ค ์ด ์ผ๋“ค๋•Œ๋ฌธ์— ๊ธ€์„ ์ž‘์„ฑํ•˜์ง€ ๋ชปํ–ˆ๋‹ค๋Š” ๊ฒƒ์€ ํ•‘๊ณ„์ธ ๊ฒƒ ๊ฐ™๊ณ , ์•ž์œผ๋กœ ๊พธ์ค€ํžˆ ๊ธฐ์ˆ  ํฌ์ŠคํŒ…์„ ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜๋„ ์ข‹์€ ์†Œ์‹์ด ์žˆ๋‹ค๋ฉด, 2์›” 1์ผ๋ถ€ํ„ฐ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ์„œ ์ฒซ ์ถœ๊ทผ์„ ์‹œ์ž‘ํ•œ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜๋„ ํ•™๋ถ€์‹œ์ ˆ์— ๋‚˜๋ฆ„๋Œ€๋กœ ์ด์ชฝ ๋ถ„์•ผ๋กœ ๊ฐ€๊ณ ์‹ถ์–ด์„œ ๋…ํ•™์„ ํ•˜๋ฉฐ ์‹ค๋ ฅ์„ ํ‚ค์›Œ๋‚˜๊ฐ”๋Š”๋ฐ, ์ฒซ ์ง์žฅ์„ ์ œ๊ฐ€ ๊ฐ€๊ณ ์‹ถ์€ ๋ถ„์•ผ๋กœ ๋‚˜์•„๊ฐˆ ์ˆ˜ ์žˆ๊ฒŒ ๋˜์–ด์„œ ์ •๋ง ๋งŒ์กฑ์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค.ใ…Žใ…Ž ์ด์ œ ์•ž์œผ๋กœ ์—ญ๋Ÿ‰์„ ๋งŽ์ด ์Œ“์•„๋‚˜๊ฐ€๋ฉด์„œ ์ •๋ง ์ „๋ฌธ๊ฐ€๋‹ค์šด ํฌ์ŠคํŒ…์„ ๋งŽ์ด ๋‚จ๊ธฐ๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค! ใ…Žใ…Ž ์˜ค๋Š˜ ์ œ๊ฐ€ ํฌ์ŠคํŒ…ํ•  ์ฃผ์ œ๋Š” jQuery์˜ contains() ๋ฉ”์„œ๋“œ๋ฅผ ํ™œ์šฉํ•œ ๊ฐ„๋‹จํ•œ ๊ฒ€์ƒ‰๊ธฐ๋Šฅ ๊ตฌํ˜„์ž…๋‹ˆ๋‹ค. contains(..

2017.01.29 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/UI๊ฐœ๋ฐœ

[UI ๊ฐœ๋ฐœ] responsive image gallery(๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€๊ฐค๋Ÿฌ๋ฆฌ)

์˜ค๋Š˜ ์˜ˆ์ œ๋Š” ๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€๊ฐค๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋‚˜ jQuery๋ฅผ ํ™œ์šฉํ•˜์ง€ ์•Š๊ณ , ์ˆœ์ˆ˜ HTML, CSS ์ฝ”๋”ฉ์„ ํ†ตํ•ด ๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€๊ฐค๋Ÿฌ๋ฆฌ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์ด ํฌ์ŠคํŒ…์˜ ๋ชฉํ‘œ์ž…๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์˜ˆ์ œ๋ฅผ ๋ณด๋ฉด์„œ ์‹œ์ž‘ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. HTML ์‹œ๋งจํ‹ฑ๋งˆํฌ์—… CSS3 ์ด๋ฏธ์ง€๋Š” ๊ฐ์ž ํŒŒ์ผ์˜ ๊ฒฝ๋กœ์— ๋งž์ถฐ์„œ ์ž‘์„ฑํ•ด์ฃผ์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์œ„์˜ ์ฝ”๋“œ๋Š” ๋ธŒ๋ผ์šฐ์ €๋‚˜ ๋””๋ฐ”์ด์Šค์˜ ํฌ๊ธฐ์— ๋”ฐ๋ผ ์œ ๋™์ ์œผ๋กœ ๋ณ€ํ•˜๊ฒŒ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. ๋งจ ์œ„์˜ @media all and (min-width: 960px)๋Š” 960px ์ด์ƒ ์‚ฌ์ด์ฆˆ๋ถ€ํ„ฐ๋Š” #gallery_layout์„ ๊ฐ€๋กœ, ์„ธ๋กœ ๊ฐ€์šด๋ฐ ์ •๋ ฌ์„ ์‹œ์ผœ์ฃผ๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ํ…Œ์ŠคํŠธ๋Š” ํ•˜๋‹จ์˜ URL์—์„œ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. http://mismaven.kr/test/responsive_gallery/index.htm..

2016.12.10 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

Computer science/์•Œ๊ณ ๋ฆฌ์ฆ˜

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌํ˜„ํ•œ ์•Œ๊ณ ๋ฆฌ์ฆ˜] List Filtering

In this kata you will create a function that takes a list of non-negative integers and strings and returns a new list with the strings filtered out. Example filter_list([1,2,'a','b']) == [1,2] filter_list([1,'a','b',0,15]) == [1,0,15] filter_list([1,2,'aasf','1','123',123]) == [1,2,123] ํ•„์ž๋‹ต์•ˆ map์„ ์‚ฌ์šฉํ•˜๊ธด ํ–ˆ์ง€๋งŒ, ๋ญ”๊ฐ€ 2%๋ถ€์กฑํ•œ ๋‹ต์•ˆ์ž…๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์›ํ–ˆ๋˜๊ฑด map์„ ์‚ฌ์šฉํ•ด์„œ type์ด number๋ผ๋ฉด ๊ทธ ๊ฐ’๋งŒ ๋‚˜์˜ค๊ฒŒ ํ•˜๋Š” ๊ฒƒ์ด์—ˆ๋Š”๋ฐ number๊ฐ€ ์•„๋‹Œ ๊ฐ’๋“ค์€ ๋ชจ๋‘ undef..

2016.10.19 ๊ฒŒ์‹œ๋จ

๊ธฐ์ˆ  ์Šคํƒ/jQuery

[jQuery] ์˜ˆ์ œ์™€ ํ•จ๊ป˜ํ•˜๋Š” ์ œ์ด์ฟผ๋ฆฌ ๊ฐ•์˜ (jQuery - addClass() / hasClass() / removeClass() / toggleClass())

์˜ˆ์ œ์™€ ํ•จ๊ป˜ํ•˜๋Š” ์ œ์ด์ฟผ๋ฆฌ ๊ฐ•์˜ ์ด๋ฒˆ์— ๋‹ค๋ฃฐ ๊ธฐ๋Šฅ์€ addClass() / hasClass() / removeClass() / toggleClass() ๋ฉ”์†Œ๋“œ์ž…๋‹ˆ๋‹ค. jQuery addClass() .addClass() ๋ฉ”์†Œ๋“œ๋Š” ํŠน์ •ํ•œ ํด๋ž˜์Šค๋ฅผ ์š”์†Œ์— ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ๋ฒ•.addClass( className )className ( ์ง€์ •ํ•œ ํด๋ž˜์Šค ์ด๋ฆ„์„ ์ถ”๊ฐ€) ๋ฐ์ดํ„ฐํƒ€์ž… : ๋ฌธ์ž์—ด(String) 1๊ฐœ ๋˜๋Š” 2๊ฐœ ์ด์ƒ์˜ ํด๋ž˜์Šค๋“ค์„ ์†์„ฑ์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. .addClass( function )function Type: Function( Integer index, String currentClassName ) => String ํ•จ์ˆ˜์—์„œ ๋ฐ˜ํ™˜๋œ ํด๋ž˜์Šค๋ฅผ ์†์„ฑ์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.์—ฌ๊ธฐ์„œ ํ•จ์ˆ˜๋Š” ์ธ์ž(๋งค๊ฐœ๋ณ€์ˆ˜) ๊ฐ’์œผ๋กœ in..

2016.10.19 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/UI๊ฐœ๋ฐœ

[UI ๊ฐœ๋ฐœ] css3 - tab menu ์ œ์ž‘(๊ฐ„๋‹จํ•œ ํƒญ๋ฉ”๋‰ด ์ œ์ž‘)

๐Ÿ– ๋“ค์–ด๊ฐ€๊ธฐ ์ „์— ์ด๋ฒˆ์—๋Š” ๊ฐ„๋‹จํ•œ ํƒญ๋ฉ”๋‰ด๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด ๊ตฌํ˜„ํ•œ ์ฝ”๋“œ๋ฅผ ๊ณต์œ ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์— ์˜ˆ์‹œ์ฒ˜๋Ÿผ ๋™์ž‘ํ•˜๋Š” UI๋ฅผ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒƒ์ด ์ด๋ฒˆ ํฌ์ŠคํŒ…์˜ ๋ชฉํ‘œ์ž…๋‹ˆ๋‹ค. ๐Ÿ’ป HTML ์‹œ๋ฉ˜ํ‹ฑ๋งˆํฌ์—… How to develop a tab menu with jQuery ์ œ์ž‘์ž : ๋ฐ•๊ฒฝ๋‘ ๊ณ ๋ ค๋Œ€ํ•™๊ต ๊ฒฝ์˜์ •๋ณดํ•™๊ณผ ๋ฉ‹์Ÿ์ด ์‚ฌ์ž์ฒ˜๋Ÿผ 4๊ธฐ About Portfolio Contact Travel About Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer ..

2016.10.18 ๊ฒŒ์‹œ๋จ

๊ธฐ์ˆ  ์Šคํƒ/UI๊ฐœ๋ฐœ

[UI ๊ฐœ๋ฐœ] css3 - overlay side navigation ์ œ์ž‘(์˜ค๋ฒ„๋ ˆ์ด ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜)

Side Navigation(overlay) ์ด๋ฒˆ์— ์ค€๋น„ํ•œ ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜์€ ์ปจํ…์ธ ๋ฅผ ๋ฐ€์–ด๋‚ด๊ณ , ์ปจํ…์ธ  ๋ถ€๋ถ„์˜ ๋ฐฐ๊ฒฝ์„ ์˜ค๋ฒ„๋ ˆ์ดํ•˜๋Š” ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜์ž…๋‹ˆ๋‹ค. ์˜ˆ์‹œ HTML ์‹œ๋ฉ˜ํ‹ฑ๋งˆํฌ์—… ์šฐ์„  ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜์„ ์ œ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐ๋ณธ์ ์ธ HTML ๋งˆํฌ์—…์„ ์œ„ ์ฝ”๋“œ์™€ ๊ฐ™์ด ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. CSS3 ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ถ€๋ถ„์— ๊ด€๋ จ๋œ CSS ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. Javascript jQuery๋ฅผ ํ™œ์šฉํ•ด์„œ ๊ฐœ๋ฐœํ–ˆ๋‹ค๋ฉด, ํ›จ์”ฌ ๊น”๋”ํ•˜๊ณ , ์œ ์ง€๋ณด์ˆ˜ํ•˜๊ธฐ ์‰ฌ์šด ์ฝ”๋“œ๊ฐ€ ๋˜์—ˆ๊ฒ ์ง€๋งŒ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ณต๋ถ€ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด์„œ UI ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ „์ฒด ์ฝ”๋“œ ์™„์„ฑ๋œ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ๋ณต์‚ฌํ•ด์„œ ์‚ฌ์šฉํ•˜์…”๋„ ๋˜์ง€๋งŒ, ์ตœ๋Œ€ํ•œ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•˜์‹œ๊ณ  ์‚ฌ์šฉํ•˜์‹œ๋ฉด ์‹ค๋ ฅ ํ‚ค์šฐ๋Š”๋ฐ์—๋„ ๋งŽ์€ ๋„์›€์ด ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

2016.10.18 ๊ฒŒ์‹œ๋จ

๊ธฐ์ˆ  ์Šคํƒ/UI๊ฐœ๋ฐœ

[UI ๊ฐœ๋ฐœ] css3 - push-content side navigation ์ œ์ž‘(์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜)

Side Navigation(push content) ์ด๋ฒˆ์— ์ค€๋น„ํ•œ ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜์€ ์ปจํ…์ธ ๋ฅผ ๋ฐ€์–ด๋‚ด๋Š” ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜์ž…๋‹ˆ๋‹ค. ์˜ˆ์‹œ HTML ์‹œ๋ฉ˜ํ‹ฑ๋งˆํฌ์—… ์šฐ์„  ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜์„ ์ œ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐ๋ณธ์ ์ธ HTML ๋งˆํฌ์—…์„ ์œ„ ์ฝ”๋“œ์™€ ๊ฐ™์ด ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. CSS3 ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ถ€๋ถ„์— ๊ด€๋ จ๋œ CSS ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. Javascript jQuery๋ฅผ ํ™œ์šฉํ•ด์„œ ๊ฐœ๋ฐœํ–ˆ๋‹ค๋ฉด, ํ›จ์”ฌ ๊น”๋”ํ•˜๊ณ , ์œ ์ง€๋ณด์ˆ˜ํ•˜๊ธฐ ์‰ฌ์šด ์ฝ”๋“œ๊ฐ€ ๋˜์—ˆ๊ฒ ์ง€๋งŒ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ณต๋ถ€ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด์„œ UI ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ „์ฒด ์ฝ”๋“œ ์™„์„ฑ๋œ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ๋ณต์‚ฌํ•ด์„œ ์‚ฌ์šฉํ•˜์…”๋„ ๋˜์ง€๋งŒ, ์ตœ๋Œ€ํ•œ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•˜์‹œ๊ณ  ์‚ฌ์šฉํ•˜์‹œ๋ฉด ์‹ค๋ ฅ ํ‚ค์šฐ๋Š”๋ฐ์—๋„ ๋งŽ์€ ๋„์›€์ด ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

2016.10.18 ๊ฒŒ์‹œ๋จ

๊ธฐ์ˆ  ์Šคํƒ/UI๊ฐœ๋ฐœ

[UI ๊ฐœ๋ฐœ] css3 - full-width side navigation ์ œ์ž‘(ํ’€ ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜)

Side Navigation(full-width) ์ด๋ฒˆ์— ์ค€๋น„ํ•œ ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜์€ ํŽ˜์ด์ง€ ์ „์ฒด๋ฅผ ๋ฎ๋Š” ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜์ž…๋‹ˆ๋‹ค. ์˜ˆ์‹œ HTML ์‹œ๋ฉ˜ํ‹ฑ๋งˆํฌ์—… ์šฐ์„  ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜์„ ์ œ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐ๋ณธ์ ์ธ HTML ๋งˆํฌ์—…์„ ์œ„ ์ฝ”๋“œ์™€ ๊ฐ™์ด ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. CSS3 ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ถ€๋ถ„์— ๊ด€๋ จ๋œ CSS ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. Javascript jQuery๋ฅผ ํ™œ์šฉํ•ด์„œ ๊ฐœ๋ฐœํ–ˆ๋‹ค๋ฉด, ํ›จ์”ฌ ๊น”๋”ํ•˜๊ณ , ์œ ์ง€๋ณด์ˆ˜ํ•˜๊ธฐ ์‰ฌ์šด ์ฝ”๋“œ๊ฐ€ ๋˜์—ˆ๊ฒ ์ง€๋งŒ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ณต๋ถ€ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด์„œ UI ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ „์ฒด ์ฝ”๋“œ ์™„์„ฑ๋œ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ๋ณต์‚ฌํ•ด์„œ ์‚ฌ์šฉํ•˜์…”๋„ ๋˜์ง€๋งŒ, ์ตœ๋Œ€ํ•œ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•˜์‹œ๊ณ  ์‚ฌ์šฉํ•˜์‹œ๋ฉด ์‹ค๋ ฅ ํ‚ค์šฐ๋Š”๋ฐ์—๋„ ๋งŽ์€ ๋„์›€์ด ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

2016.10.18 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/UI๊ฐœ๋ฐœ

[UI ๊ฐœ๋ฐœ] css3 - side navigation ์ œ์ž‘(์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜)

Side Navigation ์•ˆ๋…•ํ•˜์„ธ์š”. ์˜ค๋Š˜๋ถ€ํ„ฐ UI ๊ฐœ๋ฐœํ•œ ์ฝ”๋“œ๋ฅผ ๋ธ”๋กœ๊ทธ์— ๊ณต๊ฐœํ•˜๋ ค๊ณ  ์ด๋ ‡๊ฒŒ ๊ธ€์„ ์“ฐ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊พธ์ค€ํžˆ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ๋‚˜์˜จ ๊ฒฐ๊ณผ๋ฌผ์„ ํฌ์ŠคํŒ…ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ใ…Ž ํ˜น์‹œ ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์ด ์žˆ์œผ์‹œ๋‹ค๋ฉด, ์ž์œ ๋กญ๊ฒŒ ์‚ฌ์šฉํ•˜์‹œ๊ณ , ๊ฐœ์„ ์‚ฌํ•ญ์ด ์žˆ์œผ๋ฉด ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ณ ๋ง™๊ฒ ์Šต๋‹ˆ๋‹ค. ์˜ˆ์‹œ HTML ์‹œ๋ฉ˜ํ‹ฑ๋งˆํฌ์—… ์šฐ์„  ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜์„ ์ œ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐ๋ณธ์ ์ธ HTML ๋งˆํฌ์—…์„ ์œ„ ์ฝ”๋“œ์™€ ๊ฐ™์ด ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. CSS3 ์‚ฌ์ด๋“œ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ถ€๋ถ„์— ๊ด€๋ จ๋œ CSS ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. Javascript jQuery๋ฅผ ํ™œ์šฉํ•ด์„œ ๊ฐœ๋ฐœํ–ˆ๋‹ค๋ฉด, ํ›จ์”ฌ ๊น”๋”ํ•˜๊ณ , ์œ ์ง€๋ณด์ˆ˜ํ•˜๊ธฐ ์‰ฌ์šด ์ฝ”๋“œ๊ฐ€ ๋˜์—ˆ๊ฒ ์ง€๋งŒ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ณต๋ถ€ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด์„œ UI ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ „์ฒด ์ฝ”๋“œ ์™„์„ฑ๋œ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ๋ณต์‚ฌํ•ด์„œ ์‚ฌ์šฉํ•˜์…”๋„ ๋˜์ง€๋งŒ, ์ตœ๋Œ€ํ•œ ๋™์ž‘..

2016.10.18 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/jQuery

[jQuery] ์˜ˆ์ œ์™€ ํ•จ๊ป˜ํ•˜๋Š” ์ œ์ด์ฟผ๋ฆฌ ๊ฐ•์˜ (jQuery - animate())

์˜ˆ์ œ์™€ ํ•จ๊ป˜ํ•˜๋Š” ์ œ์ด์ฟผ๋ฆฌ ๊ฐ•์˜ ์ด๋ฒˆ์— ๋‹ค๋ฃฐ ๊ธฐ๋Šฅ์€ animate() ๋ฉ”์†Œ๋“œ์ž…๋‹ˆ๋‹ค. jQuery addClass() .addClass() ๋ฉ”์†Œ๋“œ๋Š” ํŠน์ •ํ•œ ํด๋ž˜์Šค๋ฅผ ์š”์†Œ์— ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ๋ฒ•.addClass( className )className ( ์ง€์ •ํ•œ ํด๋ž˜์Šค ์ด๋ฆ„์„ ์ถ”๊ฐ€) ๋ฐ์ดํ„ฐํƒ€์ž… : ๋ฌธ์ž์—ด(String) 1๊ฐœ ๋˜๋Š” 2๊ฐœ ์ด์ƒ์˜ ํด๋ž˜์Šค๋“ค์„ ์†์„ฑ์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. .addClass( function )function Type: Function( Integer index, String currentClassName ) => String ํ•จ์ˆ˜์—์„œ ๋ฐ˜ํ™˜๋œ ํด๋ž˜์Šค๋ฅผ ์†์„ฑ์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.์—ฌ๊ธฐ์„œ ํ•จ์ˆ˜๋Š” ์ธ์ž(๋งค๊ฐœ๋ณ€์ˆ˜) ๊ฐ’์œผ๋กœ index ์™€ currentClassName์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ถ€๋ถ„์€ ์˜ˆ์ œ๋ฅผ ๊ฐ€์ง€..

2016.10.18 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/jQuery

[jQuery] ์˜ˆ์ œ์™€ ํ•จ๊ป˜ํ•˜๋Š” ์ œ์ด์ฟผ๋ฆฌ ๊ฐ•์˜ (jQuery - slideDown() / slideUp() / slideToggle())

์ด๋ฒˆ์— ๋‹ค๋ค„๋ณผ ๊ธฐ๋Šฅ์€ jquery - slide() ๋ฉ”์†Œ๋“œ์ž…๋‹ˆ๋‹ค. jQuery Effects - Sliding slide ๋ฉ”์†Œ๋“œ๋Š” ์š”์†Œ๋ฅผ ์œ„ ๊ทธ๋ฆฌ๊ณ  ์•„๋ž˜๋กœ ์›€์ง์ด๊ฒŒ ๋„์™€์ฃผ๋Š” ๊ธฐ๋Šฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. slide ๋ฉ”์†Œ๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด 3๊ฐ€์ง€ ๊ธฐ๋Šฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. slideDown()slideUp()slideToggle() jQuery slideDown() Method slideDown() ๋ฉ”์†Œ๋“œ๋Š” ์š”์†Œ๋ฅผ ์•„๋ž˜๋กœ ๋‚ด๋ ค์ฃผ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ๋ฌธ๋ฒ• $(selector).slideDown(speed,callback); ์ธ์ž๋Š” ์ง€๊ธˆ๊นŒ์ง€ ์†Œ๊ฐœํ–ˆ๋˜ ๋ฉ”์†Œ๋“œ์™€ ๊ฐ™์ด ์†๋„๋ฅผ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋Š” ์ธ์ž์™€ ์ถ”๊ฐ€์ ์ธ ๊ธฐ๋Šฅ์„ ์ ์šฉ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋Š” callback ํ•จ์ˆ˜ ์ธ์ž๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” slideDown() ๋ฉ”์†Œ๋“œ์˜ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค..

2016.10.18 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/์œ ํ‹ธ๋ฆฌํ‹ฐ

ํ…์ŠคํŠธ ์—๋””ํ„ฐ Atom(์•„ํ†ฐ) ํŒจํ‚ค์ง€ ์ถ”์ฒœ(Atom HTML Preview)

์•„ํ†ฐ์—์„œ ์ฝ”๋”ฉ์„ ํ•˜๋ฉด์„œ ์‹ค์‹œ๊ฐ„์œผ๋กœ HTML ํŒŒ์ผ์˜ ์ƒํƒœ๋ฅผ ํ™•์ธํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ํŒจํ‚ค์ง€์ž…๋‹ˆ๋‹ค.ํ”„๋ก ํŠธ์—”๋“œ ์ž‘์—…์„ ํ•  ๋•Œ ๊ฝค๋‚˜ ์œ ์šฉํ•˜๊ฒŒ ์“ฐ์ด๋Š” ํŒจํ‚ค์ง€์ฃ .ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ๊ผญ ์ด ํŒจํ‚ค์ง€๋ฅผ ์„ค์น˜ํ•ด์„œ ์‚ฌ์šฉํ•ด๋ณด๋„๋ก ํ•˜์„ธ์š”. ์„ค์น˜๋ฒ• ์‚ฌ์šฉ์˜ˆ์‹œ Atom-HTML-Preview ๋ช…์„ธ A live preview tool for Atom Editor.Install:apm install atom-html-previewToggle HTML Preview:Press CTRL-SHIFT-H in the editor to open the preview pane.An example with Twitter Bootstrap 3 Package

2016.10.18 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/jQuery

[jQuery] ์˜ˆ์ œ์™€ ํ•จ๊ป˜ํ•˜๋Š” ์ œ์ด์ฟผ๋ฆฌ ๊ฐ•์˜ (jQuery - fadeIn() / fadeOut() / fadeToggle() / fadeTo())

jQuery Effects - Fading jQuery๋Š” ํฌ๋ฏธํ•˜๊ฒŒ ๋‚˜ํƒ€๋‚˜๊ฒŒํ•˜๊ณ  ์—†์• ๋Š” fade() ๋ฉ”์†Œ๋“œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. jQuery์—์„œ๋Š” ์•„๋ž˜ 4๊ฐ€์ง€ fade() ๋ฉ”์†Œ๋“œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. fadeIn() fadeOut() fadeToggle() fadeTo() ์šฐ์„  fadeIn() ๋ฉ”์†Œ๋“œ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. jQuery fadeIn() Method ๋ฉ”์†Œ๋“œ ์ด๋ฆ„๊ณผ ๊ฐ™๊ฒŒ ํฌ๋ฏธํ•˜๊ฒŒ ๋ณด์—ฌ์ง€๊ฒŒ ํ•ด์ฃผ๋Š” ๋ฉ”์†Œ๋“œ์ž…๋‹ˆ๋‹ค. show() ๋ฉ”์†Œ๋“œ์— ์ž๋™์œผ๋กœ speed๊ฐ€ ์ ์šฉ๋œ ๋Š๋‚Œ์˜ ๋ฉ”์†Œ๋“œ์ž…๋‹ˆ๋‹ค. ๋ฌธ๋ฒ• $(selector).fadeIn(speed,callback); ์ „ ๊ฐ•์˜์—์„œ ๋‹ค๋ค˜๋˜ show() ๊ทธ๋ฆฌ๊ณ  hide () ๋ฉ”์†Œ๋“œ์™€ ๊ฐ™์€ ์ธ์ž๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์†๋„๋‚˜ ์ฝœ๋ฐฑํ•จ์ˆ˜์— ๋Œ€ํ•ด์„œ ์ž˜ ๋ชจ๋ฅด์‹œ๋‹ค๋ฉด, ์ „ ๊ฐ•์˜..

2016.10.18 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/jQuery

[jQuery] ์˜ˆ์ œ์™€ ํ•จ๊ป˜ํ•˜๋Š” ์ œ์ด์ฟผ๋ฆฌ ๊ฐ•์˜ (jQuery - show() and hide())

jQuery - hide() and show() ์ œ์ด์ฟผ๋ฆฌ์—๋Š” hide() ์™€ show() ๋ฉ”์†Œ๋“œ๋ฅผ ํ†ตํ•ด HTML ์š”์†Œ๋ฅผ ์ˆจ๊ธฐ๊ณ , ๋ณด์ด๊ฒŒ ํ•ด์ค„ ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ์‹œ ๊ฒฐ๊ณผ๊ฐ’์„ ๋ณด๋ฉด, ๋ฐ•์Šค๊ฐ€ ์‚ฌ๋ผ์ง€๊ณ  ๋‚˜ํƒ€๋‚˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฌธ๋ฒ• $(selector).hide(speed,callback); $(selector).show(speed,callback); ๊ฐ ๋ฉ”์†Œ๋“œ์— ์†๋„๋ฅผ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ์ธ์ž๊ฐ’์„ ๋„ฃ์„ ์ˆ˜ ์žˆ๋Š”๋ฐ์š”. ๊ฐ’์€ milliseconds ๋‹จ์œ„๋กœ ์ž…๋ ฅํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ์ธ์ž ๊ฐ’์œผ๋กœ ๋„ฃ์„ ์ˆ˜๋„ ์žˆ๋Š”๋ฐ์š” ์ด ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด์„œ hide() ๋‚˜ show() ๋ฉ”์†Œ๋“œ๊ฐ€ ์™„๋ฃŒ๋œ ๋‹ค์Œ์— ์–ด๋– ํ•œ ์ฒ˜๋ฆฌ๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค๋‹ˆ๋‹ค. ์‰ฝ๊ฒŒ ๋งํ•ด์„œ, hide()์™€ show() ๋ฉ”์†Œ๋“œ๋Š” ๋™์ž‘์†๋„์™€ ๋™์ž‘ ..

2016.10.18 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/Javascript

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] javascript - this

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ ๊ธฐ์กด ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌ๋˜๋Š” ์ธ์ž ๊ฐ’์— ๋”ํ•ด, arguments ๊ฐ์ฒด ๋ฐ this ์ธ์ž๊ฐ€ ํ•จ์ˆ˜ ๋‚ด๋ถ€๋กœ ์•”๋ฌต์ ์œผ๋กœ ์ „๋‹ฌ๋˜์–ด์ง‘๋‹ˆ๋‹ค. this ์ธ์ž๋Š” ์ดํ•ดํ•˜๊ธฐ ์กฐ๊ธˆ ๊นŒ๋‹ค๋กญ์Šต๋‹ˆ๋‹ค. this๊ฐ€ ์ดํ•ดํ•˜๊ธฐ ์–ด๋ ค์šด ์ด์œ ๋Š” ์ž๋ฐ”์Šคํด๋น„ํŠธ์˜ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ ํŒจํ„ด์— ๋”ฐ๋ผ this๊ฐ€ ๋‹ค๋ฅธ ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐ(this ๋ฐ”์ธ๋”ฉ)ํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด this ๋ฐ”์ธ๋”ฉ์—๋Š” 3๊ฐ€์ง€ ํŒจํ„ด์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœ -> ํ•ด๋‹น ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๊ฐ์ฒด๋กœ ๋ฐ”์ธ๋”ฉํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœ -> ์ „์—ญ ๊ฐ์ฒด์— ๋ฐ”์ธ๋”ฉ์ƒ˜์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœ -> ์ƒˆ๋กœ ์ƒ์„ฑ๋˜๋Š” ๊ฐ์ฒด์— ๋ฐ”์ธ๋”ฉ ์˜ค๋Š˜ ์ฐจ๊ทผ์ฐจ๊ทผ ์ด this ๋ฐ”์ธ๋”ฉ์— ๋Œ€ํ•ด์„œ ์ •๋ณตํ•ด ๋‚˜๊ฐ€๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. 1. ๊ฐ์ฒด๋ฅผ ํ˜ธ์ถœํ•  ๋•Œ this ๋ฐ”์ธ๋”ฉ ๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•  ๊ฒฝ์šฐ, ๋ฉ”์†Œ๋“œ ๋‚ด๋ถ€ ์ฝ”..

2016.10.16 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/Javascript

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์™€ ์ฝœ๋ฐฑํ•จ์ˆ˜(javascript callback)

์˜ค๋Š˜์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์™€ ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ๋‹ค๋ค„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ? ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋Š” ์‰ฝ๊ฒŒ ๋งํ•ด ์–ด๋– ํ•œ ์ด๋ฒคํŠธ์— ๋Œ€ํ•ด ๋Œ€๊ธฐ์ค‘์ธ ์ƒํƒœ๋ฅผ ๋งํ•ฉ๋‹ˆ๋‹ค. ํ•ญ์ƒ ๋ฆฌ์Šค๋‹(๋“ค์œผ๋ฉฐ) ๋Œ€๊ธฐ์ค‘์ธ๊ฑฐ์ฃ . ํ•ด๋‹น ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ๋“ฑ๋กํ•ด๋†จ๋˜ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๊ฐ€ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค. ์œ„์˜ ์ฝ”๋“œ๋ฅผ ์•„๋งˆ ํ•œ๋ฒ„ ๋ณด์‹  ์ ์ด ์žˆ์„๊ฒ๋‹ˆ๋‹ค. ์ด ์ฝ”๋“œ๊ฐ€ ๋Œ€ํ‘œ์ ์ธ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์ธ๋ฐ์š”. window๊ฐ€ load๋  ๋•Œ function ๋ถ€๋ถ„์ด ์‹คํ–‰์ด ๋˜๋Š”๊ฒ๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ load ๋˜์—ˆ๋‹ค๋Š” ๊ฒƒ์„ ๋ˆ„๊ฐ€ ์•Œ๋ ค์ค„๊นŒ์š”? ๋ฐ”๋กœ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์•Œ๋ ค์ค๋‹ˆ๋‹ค.๋น„์Šทํ•œ ์ฝ”๋“œ๋กœ, ๊ทธ๋ฆฌ๊ณ  ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ๋กœ onclick์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋Š” ํ•ญ์ƒ on + "์ด๋ฒคํŠธ ๋ช…"์œผ๋กœ ๋ช…๋ช…๋ฉ๋‹ˆ๋‹ค.onclick, onkeypress, onmousemove ๋“ฑ ์ฒ˜๋Ÿผ์š”. window ..

2016.10.14 ๊ฒŒ์‹œ๋จ

 ํฌ์ŠคํŒ… ์ธ๋„ค์ผ ์ด๋ฏธ์ง€

๊ธฐ์ˆ  ์Šคํƒ/jQuery

[jQuery] ์˜ˆ์ œ์™€ ํ•จ๊ป˜ํ•˜๋Š” ์ œ์ด์ฟผ๋ฆฌ ๊ฐ•์˜ (jQuery - filter)

jQuery - filter() jQuery์˜ filter๋Š” CSS ์…€๋ ‰ํ„ฐ๋กœ DOM ํŠธ๋ฆฌ๋ฅผ ์ œ์–ดํ–ˆ์„ ๋•Œ์— ๊ฐ์†Œํ•˜๋Š” ์†๋„๋ฅผ ์ปค๋ฒ„ํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ์„ ํ•ฉ๋‹ˆ๋‹ค. jQuery ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•ด์„œ ํ‘œํ˜„๋œ DOM ์š”์†Œ ์ง‘ํ•ฉ์— .filter() ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์„ ํƒ๋œ ์š”์†Œ๋“ค์˜ ์ผ๋ถ€๋ถ€์„ ์ถ”์ถœํ•˜์—ฌ ์ƒˆ๋กœ์šด jQuery ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋กœ ์˜ˆ์ œ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์„ค๋ช…ํ•˜๋„๋ก ํ• ๊ฒŒ์š” ul์˜ ์ž์‹ ํƒœ๊ทธ์ธ liํƒœ๊ทธ์—์„œ ์ง์ˆ˜๋งŒ ๊ณจ๋ผ์„œ ์ƒ‰์„ ๋ณ€ํ™˜์‹œ์ผœ๋ณด๋Š” ์ฝ”๋“œ๋ฅผ ์งœ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด ์ง์ˆ˜ menu์— ์ƒ‰์ด ์ ์šฉ๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋‹ˆ ์ง์ˆ˜๋ผ๋ฉด์„œ์š”?? ์™œ menu1๋ถ€ํ„ฐ ์ƒ‰์ด ๋“ค์–ด๊ฐ€ ์žˆ์–ด์š”? ์ฝ”๋“œ์ž˜๋ชป์ง ๊ฑฐ ์•„๋‹Œ๊ฐ€์š”? ๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹ค ์ˆ˜ ์žˆ๋Š”๋ฐ์š”. li ํƒœ๊ทธ์— ์ ‘๊ทผํ•  ๋•Œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋‚ด๋ถ€์ ์œผ๋กœ ๋ฐ˜๋ณต๋ฌธ์„ ๋Œ๋ฆฌ๋Š”๋ฐ์š”. ๊ทธ ๋ฐ˜๋ณต๋ฌธ์€ ์ธ๋ฑ์Šค๋ฅผ ๊ธฐ์ค€..

2016.10.11 ๊ฒŒ์‹œ๋จ

728x90
๋ฐ˜์‘ํ˜•