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

๊ธฐ์ˆ  ์Šคํƒ/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 ๊ฒŒ์‹œ๋จ

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

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

[CSS3] css3 ๊ฐ€์šด๋ฐ(์ค‘์•™) ์ •๋ ฌ

css๋ฅผ ํ™œ์šฉํ•ด ๊ฐ€๋กœ ๋ฐ ์„ธ๋กœ๋กœ ์ค‘์•™์ •๋ ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์—๋Š” ์ •๋ง ๋งŽ์€ ๋ฐฉ์‹๋“ค์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ ์ค‘์•™์ •๋ ฌ ๋ฐฉ๋ฒ•์€ ๋ชจ๋‘ ์ฃผ์˜ํ•  ์ ์ด ์žˆ์ง€๋งŒ ๊ทธ๋Ÿฌํ•œ ๋ฐฉ๋ฒ•๋“ค์„ ์กฐํ•ฉํ•˜๋ฉด IE8 ๋ฐ ์ดํ›„ ๋ฒ„์ „์—์„œ๋„ ์ผ๊ด€๋˜๊ฒŒ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์„ ์ง€์›ํ•˜๋Š” ์ค‘์•™์ •๋ ฌ ๊ธฐ๋ฒ•์„ ๋งŒ๋“ค์–ด๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ธ”๋ก ๋งŒ๋“ค๊ธฐ ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•˜๊ณ  ์žˆ๋‹ค๋ฉด ๋Œ€๋ถ€๋ถ„ ์š”์†Œ์˜ ํฌ๊ธฐ๋ฅผ ํผ์„ผํŠธ๋กœ ์ง€์ •ํ•  ๊ฒƒ์ด๋ฉฐ, ์—ฌ๊ธฐ์„œ๋Š” ์ž„์˜์˜ .container ์š”์†Œ๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ์ปจํ…Œ์ด๋„ˆ ์š”์†Œ๊ฐ€ ์ ์ ˆํžˆ ๋Š˜๋ ค์งˆ ์ˆ˜ ์žˆ๋„๋ก html, body { width: 100%; height: 100%; }๋กœ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ํ…Œ์ด๋ธ”๋กœ ๋ฐ”๊พธ๊ธฐ ์ด์ œ .container ์•ˆ์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ํ…Œ์ด๋ธ” ํŒจํ„ด์„ ์ด์šฉํ•ด ์ˆ˜์ง ์ค‘์•™์ •๋ ฌ์„ ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ ค๋ฉด ์ผ๋ฐ˜ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๊ฐ€ ํ•„์š”ํ•˜๊ณ , ์ด ์š”์†Œ๋“ค์ด..

2016.11.09 ๊ฒŒ์‹œ๋จ

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

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 ๊ฒŒ์‹œ๋จ

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

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

[CSS3] Height :100% ๊ฐ€ ์ ์šฉ๋˜์ง€ ์•Š์„๋•Œ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐฉ๋ฒ•

์›นํ‘œ์ค€์œผ๋กœ ์ฝ”๋”ฉ์„ ํ•˜๋‹ค๋ณด๋ฉด Height ๋‹จ์œ„์ธ %๊ฐ€ ์ ์šฉ์ด ๋˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. px๋‹จ์œ„๋กœ๋Š” height ๊ฐ’์ด ์ ์šฉ๋˜๋Š”๋ฐ %๋Š” ์ ์šฉ์ด ๋˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ์˜ ๋Œ€์ฒ˜๋ฒ•ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ box ํด๋ž˜์Šค์— height 100%๋ฅผ ๋จน์—ฌ๋ณด์•˜์œผ๋‚˜ ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.ํ•˜์ง€๋งŒ, ํ•„์š”ํ•  ๊ฒฝ์šฐ๋ฅผ ๋Œ€๋น„ํ•ด์„œ ํ•œ๋ฒˆ ์•Œ์•„๋ณด๋„๋กํ•˜์ฃ . HEIGHT:100%๊ฐ€ ์ ์šฉ๋˜๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ• ์ƒ๊ฐ๋ณด๋‹ค ์ •๋ง ๊ฐ„๋‹จํ•˜๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ์š”.html๊ณผ body ํƒœ๊ทธ์— height 100%๋ฅผ ๋„ฃ์–ด์ฃผ๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์œ„ ์ฝ”๋“œ๋ฅผ ์ ์šฉ์‹œ์ผœ์ฃผ๋ฉด ์ •์ƒ์ ์œผ๋กœ box ํด๋ž˜์Šค์— height 100%๊ฐ€ ์ ์šฉ๋จ์„ ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์›์ธ : %๋Š” ์ƒ๋Œ€์ ์ธ ๊ฐ’์ธ๋ฐ div์˜ height๊ฐ’์— %๋ฅผ ์ ์šฉํ•˜๋ฉด ๊ธฐ์ค€์œผ๋กœ ์‚ผ์„ ์ƒ์œ„..

2016.10.12 ๊ฒŒ์‹œ๋จ

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

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

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] ํ”„๋กœํ† ํƒ€์ž… (Javascript - prototype)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ โ€“ ํ”„๋กœํ† ํƒ€์ž…์ด๋ž€? ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ฒ˜์Œ ์ ‘ํ•  ๋•Œ ์ œ์ผ ์ดํ•ดํ•˜๊ธฐ ์–ด๋ ค์› ๋˜ ๊ฐœ๋… ์ค‘ ํ•˜๋‚˜๊ฐ€ ๋ฐ”๋กœ ํ”„๋กœํ† ํƒ€์ž…์ด์—ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ•™์Šตํ•˜๋Š”๋ฐ ์žˆ์–ด์„œ ๊ผญ! ์ •๋ณตํ•ด์•ผํ•  ์‚ฐ์ด๊ธฐ๋„ ํ•œ ํ”„๋กœํ† ํƒ€์ž…์„ ์˜ค๋Š˜ ์ •๋ฆฌํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.์ด๋ฒˆ ๊ธฐํšŒ๋ฅผ ํ†ตํ•ด ์ œ๋Œ€๋กœ ํ”„๋กœํ† ํƒ€์ž…์„ ์ดํ•ดํ•˜๊ณ  ๋„˜์–ด๊ฐ€๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค.(์‚ฌ์‹ค ์ €๋„ ๋จธ๋ฆฟ์†์— ์ œ๋Œ€๋กœ ๋„ฃ๊ธฐ ์œ„ํ•ด ํฌ์ŠคํŒ…ํ•ฉ๋‹ˆ๋‹ค...) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํด๋ž˜์Šค๋ผ๋Š” ๊ฐœ๋…์ด ์—†์Šต๋‹ˆ๋‹ค.๊ทธ๋ž˜์„œ ๊ธฐ์กด์˜ ๊ฐ์ฒด๋ฅผ ๋ณต์‚ฌํ•˜์—ฌ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜์˜ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ์–ธ์–ด๋Š” ๊ฐ์ฒด ์›ํ˜•์ธ ํ”„๋กœํ† ํƒ€์ž…์„ ์ด์šฉํ•ด์„œ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด๋ƒ…๋‹ˆ๋‹ค.์ด๋ ‡๊ฒŒ ์ƒ์„ ๋œ ๊ฐ์ฒด ์—ญ์‹œ ๋˜ ๋‹ค๋ฅธ ๊ฐ์ฒด์˜ ์›ํ˜•์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ”„๋กœํ† ํƒ€์ž…์€ ๊ฐ์ฒด๋ฅผ ํ™•์žฅํ•˜๊ณ  ๊ฐ์ฒด ์ง€ํ–ฅ์ ์ธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์ฃผ๋Š” ..

2016.10.10 ๊ฒŒ์‹œ๋จ

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

๋ธ”๋กœ๊ทธ/ํ‹ฐ์Šคํ† ๋ฆฌ ํŒ

[์›นํฐํŠธ] ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ ๋‚˜๋ˆ”๋ฐ”๋ฅธ๊ณ ๋”• ํฐํŠธ ์ ์šฉ

ํ•˜๋ฃจ์— ์ ์ง€์•Š์€ ์–‘์˜ ๊ธ€๋“ค(์ฃผ๋กœ ์›นํŽ˜์ด์ง€)์„ ์ฝ๊ฒŒ ๋˜๋Š”๋ฐ ์ด๋”ฐ๊ธˆ์”ฉ ๊ธ€๊ผด์˜ ์ค‘์š”์„ฑ์„ ์‹ค๊ฐํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ €๋Š” ๊ธ€๊ผด ์ค‘์—๋„ "๋‚˜๋ˆ”๋ฐ”๋ฅธ๊ณ ๋”•"์„ ์„ ํ˜ธํ•˜๋Š”๋ฐ์š”. ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ๋ฅผ ์‹œ์ž‘ํ•˜๋ฉด์„œ ๋ธ”๋กœ๊ทธ ๋””ํดํŠธ ํฐํŠธ๋กœ ๋‚˜๋ˆ”๋ฐ”๋ฅธ๊ณ ๋”•์œผ๋กœ ์„ค์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ์›นํฐํŠธ๋กœ ํฐํŠธ๋ฅผ ์ ์šฉ์‹œ์ผฐ๊ณ , ์ ์šฉ์‹œํ‚ค๋Š” ๋ฒ•์— ๋Œ€ํ•ด์„œ ์ด์„ค๋ช…ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค ! HTML / CSS๋ฅผ ๋ชจ๋ฅด๋Š” ์ดˆ์‹ฌ์ž๋ฅผ ๋Œ€์ƒ์œผ๋กœ ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•  ์˜ˆ์ •์ด๋‹ˆ ์ด ๊ธ€์„ ์ญ‰ ๋”ฐ๋ผ์„œ ์ ์šฉํ•˜์‹œ๋ฉด ์‰ฝ๊ฒŒ ์ ์šฉํ•˜์‹ค ์ˆ˜ ์žˆ์„ ๊ฒ๋‹ˆ๋‹ค. ์™ผ์ชฝ ์ค‘๊ฐ„์ฏค์— ์žˆ๋Š” HTML / CSS ํŽธ์ง‘์„ ๋“ค์–ด๊ฐ€๋ฉด ์ด๋ ‡๊ฒŒ HTML/ CSS์„ ํŽธ์ง‘ํ•  ์ˆ˜ ์žˆ๋Š” ์—๋””ํ„ฐ๋ฅผ ๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.์ด์ œ ์—ฌ๊ธฐ์„œ ๋ช‡ ๊ฐ€์ง€ ์ฝ”๋“œ๋ฅผ ์ ์šฉ์„ ์‹œ์ผœ์•ผ ๋˜๋Š”๋ฐ์š”. ์˜ค๋ฅธ์ชฝ HTML ๋ฌธ์„œ ํŒŒ์ผ์— ๋ถ€๋ถ„์ด ์žˆ์„๊ฒ๋‹ˆ๋‹ค. ๊ทธ ๋ฐ”๋กœ ์œ„์— ์•„๋ž˜์— ์ฝ”๋“œ๋ฅผ ์ง‘์–ด ๋„ฃ๋„๋ก ํ•˜๊ฒ ..

2016.09.22 ๊ฒŒ์‹œ๋จ

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

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

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

Bob is preparing to pass IQ test. The most frequent task in this test is to find out which one of the given numbers differs from the others. Bob observed that one number usually differs from the others in evenness. Help Bob โ€” to check his answers, he needs a program that among the given numbers finds one that is different in evenness, and return a position of this number. ! Keep in mind that you..

2016.09.21 ๊ฒŒ์‹œ๋จ

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

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

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

Description: Check to see if a string has the same amount of 'x's and 'o's. The method must return a boolean and be case insensitive. The string can contains any char. Examples input/output: XO("ooxx") => true XO("xooxx") => false XO("ooxXm") => true XO("zpzpzpp") => true // when no 'x' and 'o' is present should return true XO("zzoo") => false

2016.09.21 ๊ฒŒ์‹œ๋จ

728x90
๋ฐ˜์‘ํ˜•