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

๊ฐœ๋ฐœ/CSS3

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

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

2016.10.12 ๊ฒŒ์‹œ๋จ

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

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

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

์ด์ „ ๊ฐ•์˜์—์„œ filter๋ฅผ ๋‹ค๋ค„๋ดค์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ jQuery์—๋Š” ๋น„์Šทํ•œ ๊ธฐ๋Šฅ์„ ํ•˜๋Š” ๊ฒƒ ๊ฐ™์€ find()๋ผ๋Š” ํ•จ์ˆ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ ๋‘ ๊ฐ€์ง€ ๊ธฐ๋Šฅ์˜ ์ฐจ์ด์ ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์œ„ ์ฝ”๋“œ์˜ ๊ฒฐ๊ณผ๋Š” ์–ด๋–ป๊ฒŒ ๋ ๊นŒ์š”?filter๋ฅผ ์‚ฌ์šฉํ–ˆ์œผ๋‹ˆ๊นŒ ๊ทธ ์•„๋ž˜์— ์žˆ๋Š” li์— ์ƒ‰์ƒ์ด ๋ณ€๊ฒฝ๋์„๊นŒ์š”? ๊ฒฐ๊ณผ๋ถ€ํ„ฐ ๋ง์”€๋“œ๋ฆฌ๋ฉด ์ƒ‰์ƒ์ด ๋ณ€ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.ํ•œ๋ฒˆ ๋ณต๊ธฐํ•ด๋ณผ๊นŒ์š”? $(".first_ul") // ์ œ์ด์ฟผ๋ฆฌ๋Š” first_ul์ด๋ผ๋Š” ํด๋ž˜์Šค๋ฅผ ์ฐพ์•„๋ผ.filter("li") // ๊ทธ๋ฆฌ๊ณ  li ํƒœ๊ทธ๋ฅผ ์ฐพ์•„์„œcss ์†์„ฑ์„ ์ ์šฉ์‹œ์ผœ๋ผ ! ๋ฌด์Šจ๋ง์ธ์ง€ ์ดํ•ดํ•˜์…จ๋‚˜์š”?.first_ul ์ž์‹์œผ๋กœ ์žˆ๋Š” liํƒœ๊ทธ๋ฅผ ์ฐพ์•„์„œ ์ƒ‰์ƒ์„ ๋ฐ”๊พธ๋ผ๋Š” ๋ง์ด ์•„๋‹Œ .first_ul ํด๋ž˜์Šค๋ฅผ ๊ฐ€์ง„ ํƒœ๊ทธ ์ค‘ li ํƒœ๊ทธ์— ์ƒ‰์ƒ์„ ๋ฐ”๊พธ๋ผ๋Š” ๋œป์ž…๋‹ˆ๋‹ค.

2016.10.11 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/jQuery

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

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

2016.10.11 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/Javascript

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

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

2016.10.10 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/HTML5

๊ธฐ์ดˆ๋ถ€ํ„ฐ ๋ฐฐ์šฐ๋Š” HTML5 1๊ฐ•

๊ธฐ์ดˆ๋ถ€ํ„ฐ ๋ฐฐ์šฐ๋Š” HTML5 (Basic of HTML5) ์ธํ„ฐ๋„ท์ด๋ผ๊ณ  ํ•˜๋ฉด ์›น์ด ๋ฐ”๋กœ ์ƒ๊ฐ์ด ๋‚˜๊ณ , ์›น๊ณผ ํ•จ๊ป˜ HTML์ด๋‚˜ CSS, Javascript ๊ฐ™์€ ์šฉ์–ด๋“ค์ด ๊ฐ™์ด ๋– ์˜ค๋ฅผ ๊ฒ๋‹ˆ๋‹ค. ์›น์— ์‚ฌ์šฉ๋˜๋Š” ์ด ์šฉ์–ด๋“ค์ด ๋ฌด์—‡์ด๊ณ , ์–ด๋–ป๊ฒŒ ์‹œ์ž‘์ด ๋˜์—ˆ๋Š”์ง€ ๋จผ์ € ๊ฐ€๋ณ๊ฒŒ ์‚ดํŽด๋ณด๋ฉด์„œ ์ง„ํ–‰ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. HTML์ด๋ž€? HTML์€ Hyper Text Markup Language๋ผ๋Š” ์˜๋ฏธ๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” ํ•˜๋‚˜์˜ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ํ•œ๋งˆ๋””๋กœ hyper text๊ฐ€ ๋‹ด๊ธด ๋ฌธ์„œ๋ฅผ ์ œ์ž‘ํ•˜๋Š” ์–ธ์–ด๋ผ๋Š” ์˜๋ฏธ์ฃ . ๊ทธ๋ ‡๋‹ค๋ฉด ํ•˜์ดํผํ…์ŠคํŠธ๊ฐ€ ๋ญ”์ง€ ๊ถ๊ธˆํ•ด ํ•˜์…”์•ผ๊ฒ ์ฃ ? Hyper Text(ํ•˜์ดํผ ํ…์ŠคํŠธ)๋ž€ ํ•˜๋‚˜์˜ Text(๋ฌธ์„œ)๋กœ ๋‘๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๋ฌธ์„œ์™€ ๋ฌธ์„œ๋ฅผ ์„œ๋กœ ์—ฐ๊ฒฐ์‹œ์ผœ, ๋„์‹œ์˜ ๋ณต์žกํ•œ ๋„๋กœ์ฒ˜๋Ÿผ ์ƒํ˜ธ ์—ฐ๊ฒฐํ•˜์—ฌ ์ ‘๊ทผ ๋ฐฉ์‹์„ ๋‹ค์–‘ํ™”์‹œํ‚จ ๋ฌธ์„œ๋ฅผ ๊ฐ€๋ฆฌํ‚ต..

2016.09.30 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/SASS

[4๊ฐ•] ํšจ์œจ์ ์ธ CSS์ž‘์—…์„ ์œ„ํ•œ SASS ๊ฐ•์˜

์ฃผ์„ ์ฒ˜๋ฆฌ SASS ํŒŒ์ผ ๋‚ด๋ถ€์— ์ฃผ์„์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‘ ์ข…๋ฅ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ CSS์™€ ๋™์ผํ•˜๊ฒŒ ์ด๋Ÿฐ ๋ฐฉ์‹์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ์ด๋Ÿฐ ๋ฐฉ์‹์œผ๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฒฐ๋ก ์ ์œผ๋กœ ๋งํ•˜๋ฉด ์ฒซ๋ฒˆ์งธ ๋ฐฉ์‹์€ SASS ์ปดํŒŒ์ผ์˜ ๊ฒฐ๊ณผ๋ฌผ์ธ CSS ํŒŒ์ผ์—๋„ ๊ทธ๋Œ€๋กœ ๋ฐ˜์‘๋˜๋Š” ๋ฐ˜๋ฉด, ๋‘๋ฒˆ์งธ ๋ฐฉ๋ฒ•์€ CSS ํŒŒ์ผ์— ์ „ํ˜€ ๋‚˜ํƒ€๋‚˜์งˆ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ์ฒซ๋ฒˆ์งธ ๋ฐฉ์‹์€ CSS ํŒŒ์ผ์— ์ €์ž‘๊ถŒ ๋˜๋Š” CSS ํŒŒ์ผ ๋ฒ„์ „ ๋“ฑ์„ ํ‘œ์‹œํ•  ๋•Œ ์‚ฌ์šฉํ•˜๊ณ , ๋‘๋ฒˆ์งธ ๋ฐฉ์‹์€ SASS์˜ ์†์„ฑ์„ ์ง€์ •ํ•˜์—ฌ ์œ ์ง€๋ณด์ˆ˜ ํ•  ๋•Œ ํŽธํ•ฉ๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด CSS ํŒŒ์ผ ๋‚ด๋ถ€์— ํ…์ŠคํŠธ๊ฐ€ ๋งŽ์œผ๋ฉด ๋งŽ์„์ˆ˜๋ก ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์‚ฌ์ดํŠธ๋ฅผ ๋ Œ๋”๋ง ํ•˜๋Š” ์†๋„๊ฐ€ ๋”๋ŽŒ์ง€๊ฒŒ ๋  ๊ฒƒ์ด๊ณ , ๋˜ํ•œ CSS ์†์„ฑ์— ๋Œ€ํ•ด์„œ ๊ตณ์ด ๊ฐœ๋ฐœ์ž ์ด์™ธ์˜ ์‚ฌ์šฉ์ž๋“ค์—๊ฒŒ ๋ณด์—ฌ ์ค„ ํ•„์š”๊ฐ€ ์—†๋‹ค๊ณ  ๋ณด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ..

2016.09.29 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/SASS

[3๊ฐ•] ํšจ์œจ์ ์ธ CSS์ž‘์—…์„ ์œ„ํ•œ SASS ๊ฐ•์˜

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

2016.09.28 ๊ฒŒ์‹œ๋จ

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

์—ฌํ–‰/์ŠคํŽ˜์ธ

[์ŠคํŽ˜์ธ] ๋งˆ๋“œ๋ฆฌ๋“œ(madrid) ์—ฌํ–‰๊ธฐ 2

์ถ”์ฒœ๋ฐ›์€ ํ˜„์ง€ ๋ง›์ง‘์ŠคํŽ˜์ธ์€ ์ ์‹ฌ์— ๋ฉ”๋‰ด๋ธ๋””์•„๋ฅผ ๋จน์œผ๋ฉด ๊ฐ€๊ฒฉ์ด ์ •๋ง ์ฐฉํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ ์–ด๋”˜์ง€ ์•„์‹œ์ฃ ?์•„ํ‹€๋ ˆํ‹ฐ์ฝ” ๋งˆ๋“œ๋ฆฌ๋“œ ํ™ˆ๊ตฌ์žฅ ๋น„์„ผํ…Œ ์นผ๋ฐ๋ก ์ž…๋‹ˆ๋‹ค ! ใ…Ž ์นœ๊ตฌ๋Š” ์ฝ”์ผ€ ํŒฌ์ด๋ผ์„œ ์ฝ”์ผ€ ์œ ๋‹ˆํผ์„ ๊ตฌ๋งคํ–ˆ์Šต๋‹ˆ๋‹ค. ๋งˆ๋ฌด๋ฆฌ๋Š” ํƒ€ํŒŒ์Šค์™€ ์ƒน๊ทธ๋ฆฌ์•„๋กœ

2016.09.28 ๊ฒŒ์‹œ๋จ

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

์—ฌํ–‰/์ŠคํŽ˜์ธ

[์ŠคํŽ˜์ธ] ๋งˆ๋“œ๋ฆฌ๋“œ(madrid) ์—ฌํ–‰๊ธฐ

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

2016.09.28 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/Javascript

๊ธฐ์ดˆ๋ถ€ํ„ฐ ๋ฐฐ์šฐ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ 1๊ฐ• (๋ณ€์ˆ˜)

1๊ฐ• ๋ณ€์ˆ˜ ๋ณ€์ˆ˜๋ž€? ๋ณ€์ˆ˜๋Š” ๋ฌผ๊ฑด์„ ๋ณด๊ด€ํ–ˆ๋‹ค๊ฐ€ ํ•„์š”ํ•  ๋•Œ ๋‹ค์‹œ ๊บผ๋‚ด ์‚ฌ์šฉํ•˜๋Š” ์ผ์ข…์˜ ์ฐฝ๊ณ ์ž…๋‹ˆ๋‹ค.์ฐฝ๊ณ ์™€ ๋ณ€์ˆ˜์˜ ์ฐจ์ด์ ์€ ๋ฐ”๋กœ ๋ณด๊ด€ํ•˜๋Š” ๋‚ด์šฉ์ด ๋ฌผ๊ฑด ๋Œ€์‹  ๋ฐ์ดํ„ฐ๋ผ๋Š” ์ ๋งŒ ๋‹ค๋ฆ…๋‹ˆ๋‹ค. ๊ฐ„๋‹จํžˆ ์ •๋ฆฌํ•ด ๋ณด๋ฉด ๋ณ€์ˆ˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. 1. ๋ณ€์ˆ˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๋Š” ์žฅ์†Œ2. ๋ณ€์ˆ˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ฝ๊ณ  ์“ฐ๊ณ  ํ•  ์ˆ˜ ์žˆ๋Š” ์žฅ์†Œ ์œ„ ๊ทธ๋ฆผ๊ณผ ๊ฐ™์ด ํ•˜๋‚˜์˜ ์ฐฝ๊ณ ๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์šธ๊ป๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ์ด์ œ ์œ„์—์„œ ์†Œ๊ฐœํ•œ ๋ณ€์ˆ˜๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์•Œ์•„๋ดค์œผ๋‹ˆ ์ด์ œ ์‹ค์ œ ๋ณ€์ˆ˜(์ฐฝ๊ณ )๋ฅผ ํ•œ๋ฒˆ ๋งŒ๋“ค์–ด๋ณผ๊ฒŒ์š”. var ๋ณ€์ˆ˜์ด๋ฆ„ = ๊ฐ’; ๋ณ€์ˆ˜๋ฅผ ๋งŒ๋“œ๋Š” ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์ธ ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ์–ธ์–ด๋กœ ์ด ๋ฌธ๋ฒ•์„ ๋ฒˆ์—ญํ•ด๋ณด๋ฉด "์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์—๊ฒŒ ๋ณ€์ˆ˜๋ฅผ ํ•˜๋‚˜ ๋งŒ๋“  ํ›„ ์—ฌ๊ธฐ์— ๊ฐ’์„ ์ €์žฅํ•ด ์ฃผ์„ธ์š”"๋ผ๊ณ  ์ž‘์„ฑํ•œ ๊ฒƒ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ์—ฌ๊ธฐ์„œ var๋Š” ๋ฌด์—‡์ผ๊นŒ์š”? ์‚ฌ..

2016.09.28 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/SASS

[2๊ฐ•] ํšจ์œจ์ ์ธ CSS์ž‘์—…์„ ์œ„ํ•œ SASS ๊ฐ•์˜

Sass ๊ฐ•์˜ ๋ณ€์ˆ˜(Variables) ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ๋ถ€๋ถ„์ด ๋ฐ”๋กœ ๋ณ€์ˆ˜์ž…๋‹ˆ๋‹ค. ๋ณ€์ˆ˜๋ฅผ ์ด์šฉํ•˜๋ฉด ๋ณ€์ˆ˜๊ฐ’๋งŒ ๋ณ€๊ฒฝํ•จ์œผ๋กœ์จ ๊ฒฐ๊ณผ๋ฅผ ๋‹ค๋ฅด๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋“ฏ์ด, SASS์—์„œ๋„ ๋ฐ˜๋ณต์ ์œผ๋กœ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ๋ถ€๋ถ„, ์˜ˆ๋ฅผ ๋“ค์–ด font ๋ชจ์–‘์ด๋‚˜ ์ƒ‰์ƒ๋“ค์„ ๋ณ€์ˆ˜๋กœ ์ง€์ •ํ•ด ๋†“๊ณ  ์ด ๋ณ€์ˆ˜๊ฐ’๋งŒ ๋ณ€๊ฒฝํ•ด ์ฃผ๋ฉด CSS๋ฅผ ์ •๋ง ๊ฐ„๋‹จํ•˜๊ฒŒ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. SASS์—์„œ๋Š” ๋ณ€์ˆ˜๋ฅผ ์ •์˜ํ•  ๋•Œ $ ๊ธฐํ˜ธ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋ณ€์ˆ˜์˜ ์ด๋ฆ„์€ ์‚ฌ์šฉ์ž์— ์˜ํ•ด์„œ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์†์„ฑ์€ CSS์˜ ์†์„ฑ์„ ์ง€์ •ํ•ด ์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ‘์— ์˜ˆ์ œ๋ฅผ ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์œ„ ์˜ˆ์‹œ๋ฅผ ๋ณด๋ฉด $font_stack ์ด๋ผ๋Š” ๋ณ€์ˆ˜์™€ $primary_color ๋ผ๋Š” ๋ณ€์ˆ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.๊ฐ ๋ณ€์ˆ˜๋“ค์—๋Š” CSS์˜ ์†์„ฑ์„ ์ ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. $font_stack์—๋Š” Helveti..

2016.09.24 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/SASS

[1๊ฐ•] ํšจ์œจ์ ์ธ CSS์ž‘์—…์„ ์œ„ํ•œ SASS ๊ฐ•์˜

Sass ๊ฐ•์˜ Sass๋Š” Syntactically Awesome Style Sheet๋ผ๋Š” ๋‹จ์–ด์˜ ์ค„์ž„๋ง์ด๋ฉฐ, ํ•œ๊ธ€๋กœ ๋ฒˆ์—ญํ•˜์ž๋ฉด โ€œ๋ฌธ์žฅ ๊ตฌ์„ฑ์ ์œผ๋กœ ๋๋‚ด์ฃผ๋Š” ์Šคํƒ€์ผ ์‹œํŠธโ€๋ผ๋Š” ์˜๋ฏธ๋ฅผ ์ง€๋‹Œ๋‹ค๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. "๋ฌธ์žฅ ๊ตฌ์„ฑ์ ์œผ๋กœ ๋๋‚ด์ค€๋‹ค?"๋ผ๋Š” ์˜๋ฏธ๋Š” ์‚ฌ์Šค๋ฅผ ํ•™์Šตํ•˜๊ฒŒ ๋˜๋ฉด์„œ ๋ฌด์Šจ ๋ง์ธ์ง€ ์•Œ๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.์›น์‚ฌ์ดํŠธ๋ฅผ ๋””์ž์ธํ•  ๋•Œ ๊ฐ€์žฅ ํ•„์ˆ˜ ์š”์†Œ ์ค‘ ํ•˜๋‚˜๊ฐ€ ๋ฐ”๋กœ ์Šคํƒ€์ผ์‹œํŠธ์ธ๋ฐ์š”.์ด ์Šคํƒ€์ผ์‹œํŠธ๋Š” ์ƒ๊ฐ๋ณด๋‹ค ๋‹จ์ˆœํ•˜์ง€๋งŒ ์›น์‚ฌ์ดํŠธ ๊ทœ๋ชจ๊ฐ€ ์ปค์ง€๊ฒŒ ๋˜๋ฉด, ์†Œ์œ„ '๋…ธ๊ฐ€๋‹ค'ํ•˜๋Š” ๋Š๋‚Œ์ด ๋“ค๋ฉฐ, ์‹ฌ์ง€์–ด ์ฝ”๋“œ ๊ธธ์ด๊ฐ€ 1000์ค„์ด ๋„˜์–ด๊ฐ€๋ฉด ๋ญ๊ฐ€ ๋ญ”์ง€ ์•Œ ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ๋„ ์ƒ๊ฒจ ๋ฒ„๋ฆฝ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์‚ฌ์Šค๋ฅผ ํ™œ์šฉํ•˜๋ฉด ์Šคํƒ€์ผ์‹œํŠธ ์ž‘์—…์ด ๋งˆ์น˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ์ฒด๊ณ„์ ์ด๊ณ , ๊ตฌ์กฐ์ ์œผ๋กœ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์‚ฌ์Šค์— ๋Œ€ํ•œ ์†Œ๊ฐœ๋Š” ๊ฐ„๋‹จํ•˜๊ฒŒ ์—ฌ๊ธฐ์„œ ..

2016.09.24 ๊ฒŒ์‹œ๋จ

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

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

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

ํ•˜๋ฃจ์— ์ ์ง€์•Š์€ ์–‘์˜ ๊ธ€๋“ค(์ฃผ๋กœ ์›นํŽ˜์ด์ง€)์„ ์ฝ๊ฒŒ ๋˜๋Š”๋ฐ ์ด๋”ฐ๊ธˆ์”ฉ ๊ธ€๊ผด์˜ ์ค‘์š”์„ฑ์„ ์‹ค๊ฐํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ €๋Š” ๊ธ€๊ผด ์ค‘์—๋„ "๋‚˜๋ˆ”๋ฐ”๋ฅธ๊ณ ๋”•"์„ ์„ ํ˜ธํ•˜๋Š”๋ฐ์š”. ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ๋ฅผ ์‹œ์ž‘ํ•˜๋ฉด์„œ ๋ธ”๋กœ๊ทธ ๋””ํดํŠธ ํฐํŠธ๋กœ ๋‚˜๋ˆ”๋ฐ”๋ฅธ๊ณ ๋”•์œผ๋กœ ์„ค์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ์›นํฐํŠธ๋กœ ํฐํŠธ๋ฅผ ์ ์šฉ์‹œ์ผฐ๊ณ , ์ ์šฉ์‹œํ‚ค๋Š” ๋ฒ•์— ๋Œ€ํ•ด์„œ ์ด์„ค๋ช…ํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค ! 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
๋ฐ˜์‘ํ˜•