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

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

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

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

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

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

Description:Take 2 strings s1 and s2 including only letters from ato z. Return a new sorted string, the longest possible, containing distinct letters, - each taken only once - coming from s1 or s2.Examples:a = "xyaabbbccccdefww"b = "xxxxyyyyabklmopq"longest(a, b) -> "abcdefklmopqwxy" a = "abcdefghijklmnopqrstuvwxyz"longest(a, a) -> "abcdefghijklmnopqrstuvwxyz" ํ•„์ž๋‹ต์•ˆ ์ฒ˜์Œ์— split() ๋ฉ”์†Œ๋“œ๋ฅผ ํ™œ์šฉํ•ด์„œ ๋ฌธ์ž์—ด ๋ฐ์ดํ„ฐํƒ€..

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

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

์นดํ…Œ๊ณ ๋ฆฌ ์—†์Œ

[Bootstrap] ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๊ฐ•์˜

๊ธฐ์ดˆ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š” ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๊ฐ•์˜ 1 ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ ๋ฐ˜์‘ํ˜•์ด๋ฉฐ ๋ชจ๋ฐ”์ผ ์šฐ์„ ์ธ ์›นํ”„๋กœ์ ํŠธ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ๊ฐ€์žฅ ์ธ๊ธฐ์žˆ๋Š” HTML, CSS, JS ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค.๋น ๋ฅด๊ฒŒ ํ”„๋กœํ† ํƒ€์ž…์„ ์ œ์ž‘ํ•  ๋•Œ ๊ฐ€์žฅ ์ ํ•ฉํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์ฃ . Javascript๊นŒ์ง€๋Š” ์•„๋‹ˆ๋”๋ผ๋„ HTML5์™€ CSS3์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ๊ฐœ๋…์ด ์žˆ์œผ์‹  ๋ถ„์ด ์ด ๊ฐ•์˜๋ฅผ ๋ณด์…จ์œผ๋ฉด ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค. ์ข‹์€ ํผํฌ๋จผ์Šค๋ฅผ ๋‚ด๋ ค๋ฉด ์ ์–ด๋„ ๊ธฐ๋ณธ์ ์ธ ์ง€์‹์ด ์žˆ์–ด์•ผ ๋œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. HTML5 doctype๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ HTML5 doctype ์˜ ์‚ฌ์šฉ์„ ํ•„์š”๋กœ ํ•˜๋Š” HTML ์š”์†Œ์™€ CSS ์†์„ฑ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋ฐ”์ผ ์šฐ์„ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ3์€ ๋ชจ๋ฐ”์ผ์„ ์šฐ์„ ์ ์œผ๋กœ ๊ณ ๋ คํ•ด์„œ ๊ฐœ๋ฐœ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํ•œ๋งˆ๋””๋กœ, ๋ชจ๋ฐ”์ผ์€ ๋ถ€๊ฐ€์ ์ธ ๋ถ€๋ถ„์ด ์•„๋‹Œ ํ•ต์‹ฌ์ ์ธ ๋ถ€๋ถ„์œผ๋กœ ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค. ๋ชจ๋ฐ”์ผ ์šฐ์„  ์Šคํƒ€์ผ์€ ์ „ ๋…๋ฆฝ๋œ..

2016.10.18 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/์œ ํ‹ธ๋ฆฌํ‹ฐ

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

color picker ๊ตฌ๊ธ€ ํ™•์žฅํ”„๋กœ๊ทธ๋žจ์ด๋‚˜ ๊ธฐํƒ€ ์‘์šฉํ”„๋กœ๊ทธ๋žจ์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” color picker์ž…๋‹ˆ๋‹ค. ๊ฝค๋‚˜ ์œ ์šฉํ•œ ์†Œํ”„ํŠธ์›จ์–ด์ฃ  !์›ํ•˜๋Š” ์ƒ‰์ƒ์ด ์žˆ์œผ๋ฉด, ์ฐ์–ด์„œ ์ƒ‰์ƒ์ฝ”๋“œ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์†Œํ”„ํŠธ์›จ์–ด์ž…๋‹ˆ๋‹ค. ๊ทธ ๊ธฐ๋Šฅ์„ Atom์—์„œ๋„ ์‚ฌ์šฉํ•˜๊ฒŒ ๋„์™€์ฃผ๋Š” ํŒจํ‚ค์ง€๊ฐ€ ์žˆ๋Š”๋ฐ์š”. ๋ฐ”๋กœ ์•„๋ž˜์ฒ˜๋Ÿผ ์ƒ‰์ƒ์„ ๋ฐ”๋กœ ๋ฝ‘์•„๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Preview ๋งค์šฐ ํŽธ๋ฆฌํ•œ ๊ธฐ๋Šฅ์ด์ฃ ? ์„ค์น˜๋ฒ• ์•„๋ž˜๋Š” color picker ๋ช…์„ธ์ž…๋‹ˆ๋‹ค. A Color Picker for AtomRight click and select Color Picker, or hit CMD-SHIFT-C/CTRL-ALT-C to open it. Currently reads HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and..

2016.10.17 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/์œ ํ‹ธ๋ฆฌํ‹ฐ

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

์‹œ๊ฐ์ ์œผ๋กœ ํŒŒ์ผ๊ด€๋ฆฌ๋ฅผ ํŽธ๋ฆฌํ•˜๊ฒŒ ๋„์™€์ฃผ๋Š” file-icons file-icons๋Š” ์ขŒ์ธก์ด๋‚˜ ์ƒ๋‹จ์— ๋ฌธ์„œ์˜ ์œ ํ˜•์„ ์•„์ด์ฝ˜์„ ํ†ตํ•ด ์‹œ๊ฐ์ ์œผ๋กœ ๊ตฌ๋ณ„ํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด์ฃผ๋Š” ํŒจํ‚ค์ง€์ž…๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ์ƒ๋‹จ์ด๋‚˜ ์™ผ์ชฝ์— ์žˆ๋Š” ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ถ€๋ถ„์˜ ๋ฌธ์„œ๋“ค์˜ ์•„์ด์ฝ˜์„ ๋งŒ๋“ค์–ด์คŒ์œผ๋กœ์จ ์‹œ๊ฐ์ ์œผ๋กœ ์–ด๋–ค ํŒŒ์ผ์ธ์ง€ ๊ตฌ๋ณ„์ด ์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค. ์ „์— ์†Œ๊ฐœ๋“œ๋ฆฐ pigments์™€ ํ•จ๊ป˜ ๊ผญ ๊ฐ™์ด ์‚ฌ์šฉํ•˜์…จ์œผ๋ฉด ํ•  ํŒจํ‚ค์ง€์ž…๋‹ˆ๋‹ค. ์„ค์น˜๋ฒ• ์•„๋ž˜๋Š” file-icons์˜ ๋ช…์„ธ์ž…๋‹ˆ๋‹ค. file-icons If you've just updated and your icons are all messed up, please restart Atom before filing an issue.Some of the underlying icon fonts have updated..

2016.10.17 ๊ฒŒ์‹œ๋จ

728x90
๋ฐ˜์‘ํ˜•