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

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

๋ถ€ํŠธ์ŠคํŠธ๋žฉ 5(Bootstrap 5) ์•ŒํŒŒ๋ฒ„์ „(Alpha) ์ถœ์‹œ! ๋‚จ๋“ค๋ณด๋‹ค ๋น ๋ฅด๊ฒŒ ๊ณต๋ถ€ํ•ด๋ณด์ž!

๐ŸŽ‰ Bootstrap 5 Alpha ๋“œ๋””์–ด ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 5 ์•ŒํŒŒ๋ฒ„์ „์ด ๋‚˜์™”์Šต๋‹ˆ๋‹ค. ์ œ๊ฐ€ ํ•™๋ถ€์‹œ์ ˆ์— ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๊ด€๋ จ ๊ธ€์„ ์ผ๋˜๊ฒŒ ์—Š๊ทธ์ œ ๊ฐ™์€๋ฐ ๋ฒŒ์จ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 5 ์•ŒํŒŒ๊ฐ€ ๋‚˜์˜ค๋‹ค๋‹ˆ.. ์ •๋ง ์„ธ์›”์ด ๋น ๋ฅธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. [Bootstrap] ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์„ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• (bootstrap - grid system) ๋ถ€ํŠธ์ŠคํŠธ๋žฉ (Bootstrap) ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ ํŠธ์œ„ํ„ฐ์˜ ์›น ๋””์ž์ด๋„ˆ์™€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋งŒ๋“  ์˜คํ”ˆํ˜• UI ํ”Œ๋Ÿฌ๊ทธ์ธ์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ „ ์„ธ๊ณ„์˜ ์›น์ œ์ž‘์ž๋“ค์—๊ฒŒ ํŽธ๋ฆฌ์„ฑ์„ ์ฃผ๊ณ ์ž ๋งŒ๋“ค์–ด์กŒ์œผ๋ฉฐ ๋ณด๋‹ค ํŽธ๋ฆฌํ•˜๊ณ  ๏ฟฝ webruden.tistory.com ๋ฌด๋ ค 16๋…„๋„์— ์“ด ๊ธ€์ด๋„ค์š”...; ์‚ฌ์‹ค ๊ทธ๋™์•ˆ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ์„œ ํšŒ์‚ฌ์ƒํ™œ์„ ํ•˜๋ฉด์„œ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  ๋ช‡ ๋ฒˆ์”ฉ ์•คํŠธ๋””์ž์ธ์„ ์‚ฌ์šฉํ–ˆ๋˜ ๊ธฐ์–ต..

2020.07.17 ๊ฒŒ์‹œ๋จ

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

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

[Vue] vue.js Mixin์„ ํ™œ์šฉํ•ด์„œ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋Š˜๋ฆฌ์ž! (Understanding Mixins in Vue JS)

์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ ์›์น™์—๋Š” ์—ฌ๋Ÿฌ ๊ฐ€์ง€๊ฐ€ ์žˆ๋Š”๋ฐ ๊ทธ์ค‘ ํ•˜๋‚˜ DRY(Do not Repeat Yourself) ์›์น™์ด ์žˆ์Šต๋‹ˆ๋‹ค. "๊ฐ™์€ ๋™์ž‘์„ ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ๋ฐ˜๋ณต์ ์œผ๋กœ ์ž‘์„ฑํ•˜์ง€ ๋งˆ๋ผ" ๋ผ๋Š” ๋œป์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”๋ฐ Vue์—์„œ๋Š” ์ค‘๋ณต ์ฝ”๋“œ๋ฅผ ์ œ๊ฑฐํ•˜๊ธฐ ์œ„ํ•ด ์—ฌ๋Ÿฌ ์žฌ์‚ฌ์šฉ ํ…Œํฌ๋‹‰์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ๋ฏน์Šค์ธ, ์‚ฌ์šฉ์ž ์ง€์ • ๋””๋ ‰ํ‹ฐ๋ธŒ, ํ”Œ๋Ÿฌ๊ทธ์ธ, ํ•„ํ„ฐ๊ฐ€ ๊ทธ ๊ธฐ์ˆ ์— ์†ํ•ด์žˆ์ฃ . ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ฏน์Šค์ธ์„ ํ™œ์šฉํ•ด์„œ ๊ธฐ๋Šฅ์„ ์žฌ์‚ฌ์šฉํ•˜์—ฌ ์ค‘๋ณต ์ฝ”๋“œ๋ฅผ ์ œ๊ฑฐํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. โœ๏ธ Mixin(๋ฏน์Šค์ธ) ์ด๋ž€? Mixin์€ ๊ธฐ๋Šฅ์„ ๋”ฐ๋กœ ์ •์˜ํ•ด๋‘๊ณ  ํ•„์š”ํ•  ๋•Œ ๋งˆ๋‹ค ํ•ด๋‹น ๋ฏน์Šค์ธ ํŒŒ์ผ์„ Vue ์ปดํฌ๋„ŒํŠธ์— ๊ฒฐํ•ฉํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋งํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ Vue ์ปดํฌ๋„ŒํŠธ์— ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. SASS๋ผ๋Š” CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ..

2020.07.10 ๊ฒŒ์‹œ๋จ

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

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

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

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

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌํ˜„ํ•œ ์•Œ๊ณ ๋ฆฌ์ฆ˜] Sum of the first nth term of Series

Description: Task: Your task is to write a function which returns the sum of following series upto nth term(parameter). Series: 1 + 1/4 + 1/7 + 1/10 + 1/13 + 1/16 +... Rules:ยท You need to round the answer upto 2 decimal places and return it as String.ยท If the given value is 0 then it should return 0.00ยท You will only be given Natural Numbers as arguments. Examples: SeriesSum(1) => 1 = "1" Series..

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

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

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

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

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

2016.10.16 ๊ฒŒ์‹œ๋จ

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

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

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] javascript array (์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐฐ์—ด) ์ •๋ฆฌ 2

์ตœ๊ทผ ๋ฐฐ์—ด ์œ„์ฃผ๋กœ ์ฝ”๋”ฉ์„ ๋งŽ์ด ํ•ด์•ผํ•˜๋Š” ์ƒํ™ฉ์„ ์ ‘ํ•˜๋ฉฐ ์ƒ๊ฐ๋ณด๋‹ค ๋ชจ๋ฅด๊ณ  ์žˆ๋˜ ES5 ์ŠคํŽ™์˜ Array ๋ฉ”์„œ๋“œ๋“ค์ด ๋งŽ์ด ์žˆ์Œ์„ ์•Œ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ECMA Script6์˜ ์ƒˆ๋กœ์šด ์ŠคํŽ™๋“ค์ด ํ•˜๋‚˜ ๋‘˜ ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์— ์ ์šฉ๋˜๊ณ  ์žˆ๋Š” ์ƒํ™ฉ์—์„œ ๊ธฐ์กด ES5์— ์ด๋ฏธ ๊ตฌํ˜„๋˜์–ด ์žˆ๋Š” ๋ฐฐ์—ด์˜ ๋ฉ”์„œ๋“œ๋“ค ์กฐ์ฐจ๋„ ์ œ๋Œ€๋กœ ํŒŒ์•…ํ•˜๊ณ  ์žˆ์ง€ ๋ชปํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์„ ์œ„ํ•ด for ๋ฌธ์œผ๋กœ ๋Œ๋ฆฌ๊ธฐ ์‰ฌ์šด ๋ช‡ ๊ฐ€์ง€ ๋ฉ”์„œ๋“œ๋“ค์„ ์ •๋ฆฌํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. Array ๊ฐ์ฒด์—์„œ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋Š”, ๋ฐฐ์—ด ์ „์ฒด๋ฅผ ๋Œ๋ฉฐ ์–ด๋–ค ์ž‘์—…์„ ํ•  ๋•Œ ์œ ์šฉํ•œ ๋‹ค์–‘ํ•œ ๋ฉ”์†Œ๋“œ๋“ค์„ ํ•˜๋‚˜์”ฉ ์‚ดํŽด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐฐ์—ด ์ž‘์—…์„ ํ•  ๋•Œ for๋ฌธ์ด ๋จผ์ € ์ƒ๊ฐ๋‚˜๋Š” ์‚ฌ๋žŒ์ด๋ผ๋ฉด ๊ผญ ๋ณด์‹œ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. join() .join()์€ ๋ฐฐ์—ด์˜ ์›์†Œ๋“ค์„ ์—ฐ๊ฒฐํ•˜์—ฌ ํ•˜๋‚˜์˜ ๊ฐ’์œผ๋กœ ๋งŒ๋“ญ๋‹ˆ๋‹ค. arr ๋ฐฐ์—ด์— ์žˆ๋Š” ์›์†Œ..

2016.10.16 ๊ฒŒ์‹œ๋จ

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

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

[2020 ์ตœ์‹  ES6+] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐฐ์—ด ๊ธฐ๋ณธ๋ถ€ํ„ฐ ์‘์šฉ๊นŒ์ง€ ์™„๋ฒฝ ์ •๋ฆฌ

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

2016.10.15 ๊ฒŒ์‹œ๋จ

728x90
๋ฐ˜์‘ํ˜•