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

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

HTML ๋ชจ๋ฐ”์ผ์—์„œ ์ „ํ™”๊ฑธ๊ธฐ ์˜ˆ์ œ(์ดˆ๊ฐ„๋‹จ) (How to Create a Click to Call Link Using HTML)

ํ•ธ๋“œํฐ์—์„œ ์›น์‚ฌ์ดํŠธ๋ฅผ ์ด์šฉํ•  ๋•Œ ์•„๋ž˜์™€ ๊ฐ™์ด ์ „ํ™”๋ฒˆํ˜ธ๋ฅผ ๋ˆ„๋ฅด๋ฉด ๋ฐ”๋กœ ํ•ธ๋“œํฐ ๊ธฐ๋ณธ ์ „ํ™”๊ฑธ๊ธฐ ์ฐฝ์ด ๋œจ๋Š” ๊ฒƒ์„ ๋ณธ์ ์ด ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” HTML a ํƒœ๊ทธ๋ฅผ ํ™œ์šฉํ•ด์„œ ์ „ํ™”๊ฑธ๊ธฐ ๊ธฐ๋Šฅ์„ ๊ฐ„๋‹จํžˆ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์†Œ๊ฐœํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. HTML aํƒœ๊ทธ๋ฅผ ํ™œ์šฉํ•ด์„œ ์ „ํ™”๊ฑฐ๋Š” ๋ฐฉ๋ฒ• HTML aํƒœ๊ทธ๋ฅผ ํ™œ์šฉํ•ด์„œ ์ „ํ™”๊ฑฐ๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๊ต‰์žฅํžˆ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. href ์†์„ฑ๊ฐ’์— url์„ ๋„ฃ๋Š” ๋Œ€์‹  tel:์ „ํ™”๋ฒˆํ˜ธ ํ˜•์‹์œผ๋กœ ๋„ฃ์œผ๋ฉด ๋! // ์˜ˆ์ œ ์ „ํ™”๋ฒˆํ˜ธ: 123-1234-1234 // ์‹ค์ œ ์‚ฌ์šฉ ์˜ˆ์‹œ ์ „ํ™”๋ฒˆํ˜ธ: 123-1234-1234 ์ „ํ™”๋ฒˆํ˜ธ: 123-1234-1234 ๋™์ž‘ ์˜ˆ์‹œ ์œ„์—์„œ ์˜ˆ์‹œ๋กœ ๊ธฐ์ž…ํ•œ ์ฝ”๋“œ์˜ ๋™์ž‘ ์›๋ฆฌ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. PC์—์„œ href์— tel:์ „ํ™”๋ฒˆํ˜ธ ๊ฐ’..

2020.11.06 ๊ฒŒ์‹œ๋จ

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

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

DTD(Document Type Definition) - ๋ฌธ์„œ ํ˜•์‹ ์ •์˜

doctype์ด ๋ฌด์—‡์„ ํ•˜๋Š”์ง€ ํ‘œ์ค€๋ชจ๋“œ(standard mode)์™€ ๊ด€์šฉ๋ชจ๋“œ(quirks mode)์˜ ์ฐจ์ด ๋‘ ๊ฐ€์ง€๋ฅผ ์ •์˜ํ•ด๋ณด๊ณ ์ž ํ•œ๋‹ค. DTD๋ž€? ๋ฌธ์„œ ํ˜•์‹ ์ •์˜(DTD: Document Type Definition)๋Š” ๋งˆํฌ์—… ๋ฌธ์„œ์˜ ์š”์†Œ์™€ ์†์„ฑ๋“ฑ์„ ํ•ด์„ํ•˜๋Š” ๊ธฐ์ค€์„ ๋ช…์‹œํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ๋ฌธ์„œ ํ˜•์‹์—๋Š” HTML5, XHTML, HTML 3๊ฐ€์ง€ ์œ ํ˜•์ด ์กด์žฌํ•œ๋‹ค. ์ด์ „ ๋ฒ„์ „์˜ HTML(HTML2 ~ HTML4)์€ SGML์— ๊ธฐ๋ฐ˜์„ ๋‘์–ด ๋งŒ๋“ค์–ด์กŒ๊ธฐ ๋•Œ๋ฌธ์— ์ƒ์„ธํ•œ DTD ์ฐธ์กฐ๊ฐ€ ํ•„์š”ํ•˜๋ฉฐ, ์ด ๋•Œ๋ฌธ์— DOCTYPE์„ ์„ ์–ธํ•˜๋ ค๋ฉด ๊ณต๊ฐœ ์‹๋ณ„์ž์™€ ์‹œ์Šคํ…œ ์‹๋ณ„์ž๊ฐ€ ํฌํ•จ๋œ ๊ธด ๋ฌธ์ž์—ด์„ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค. HTMl 4.01 Strict ๋ชจ๋“œ๋กœ ๋ฌธ์„œ ํ˜•์‹์„ ์ •์˜ํ•  ๊ฒฝ์šฐ DTD๋ฅผ ์ •์˜ํ•˜์ง€ ์•Š์œผ๋ฉด, ๊ด€์šฉ๋ชจ๋“œ(quirks mode)๋กœ ๋ Œ..

2020.02.18 ๊ฒŒ์‹œ๋จ

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

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

inline vs block vs inline-block ์ฐจ์ด์  ์•Œ์•„๋ณด๊ธฐ

inline vs block vs inline-block ์†์„ฑ์„ ๋น„๊ตํ•ด๋ณด์ž. display: inline ? ๋Œ€ํ‘œ์ ์ธ ํƒœ๊ทธ๋กœ๋Š” span์„ ์˜ˆ๋กœ ๋“ค ์ˆ˜ ์žˆ๋Š”๋ฐ, text ํฌ๊ธฐ๋งŒํผ๋งŒ ๊ณต๊ฐ„์„ ์ ์œ ํ•˜๊ณ  ์ค„๋ฐ”๊ฟˆ์„ ํ•˜์ง€ ์•Š๋Š”๋‹ค. width/height ์ ์šฉ๋ถˆ๊ฐ€ margin/padding-top/bottom ์ ์šฉ๋ถˆ๊ฐ€ line-height๋ฅผ ์›ํ•˜๋Š”๋Œ€๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค. display: block ? block ์†์„ฑ์€ ๋ฌด์กฐ๊ฑด ํ•œ์ค„์„ ์ ์œ ํ•˜๊ณ  ์žˆ๊ณ , ๋‹ค์Œ ํƒœ๊ทธ๋Š” ๋ฌด์กฐ๊ฑด ์ค„๋ฐ”๊ฟˆ์ด ์ ์šฉ๋œ๋‹ค. ๋Œ€ํ‘œ์ ์ธ ํƒœ๊ทธ๋Š” div๊ฐ€ ์žˆ๋‹ค. display: inline-block ? inline-block ์†์„ฑ์€ inline ์†์„ฑ์˜ ํŠน์ง•๊ณผ block ์†์„ฑ์˜ ํŠน์ง• ๋‘˜ ๋‹ค ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์†์„ฑ์ด๋‹ค. ๊ธฐ๋ณธ์ ์ธ ํŠน์ง•์€ inline ์†์„ฑ๊ณผ ๋น„์Šทํ•œ๋ฐ (์ค„๋ฐ”..

2020.02.15 ๊ฒŒ์‹œ๋จ

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

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

[Bootstrap] ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์˜ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์„ ์‰ฝ๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• (bootstrap - grid system)

๋ถ€ํŠธ์ŠคํŠธ๋žฉ5 ์•ŒํŒŒ๊ฐ€ ๋Ÿฐ์นญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค! ์•„๋ž˜์—์„œ ํ™•์ธํ•ด๋ด์š”! ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 5(Bootstrap 5) ์•ŒํŒŒ๋ฒ„์ „ ์ถœ์‹œ! ๋‚จ๋“ค๋ณด๋‹ค ๋น ๋ฅด๊ฒŒ ๊ณต๋ถ€ํ•ด๋ณด์ž! ๐ŸŽ‰ Bootstrap 5 Alpa ๋“œ๋””์–ด ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 5 ์•ŒํŒŒ๋ฒ„์ „์ด ๋‚˜์™”์Šต๋‹ˆ๋‹ค. ์ œ๊ฐ€ ํ•™๋ถ€์‹œ์ ˆ์— ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ๊ด€๋ จ ๊ธ€์„ ์ผ๋˜๊ฒŒ ์—Š๊ทธ์ œ ๊ฐ™์€๋ฐ ๋ฒŒ์จ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 5 ์•ŒํŒŒ๊ฐ€ ๋‚˜์˜ค๋‹ค๋‹ˆ.. ์ •๋ง ์„ธ์›”์ด ๋น ๋ฅธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค webruden.tistory.com ๋ถ€ํŠธ์ŠคํŠธ๋žฉ (Bootstrap) ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ ํŠธ์œ„ํ„ฐ์˜ ์›น ๋””์ž์ด๋„ˆ์™€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋งŒ๋“  ์˜คํ”ˆํ˜• UI ํ”Œ๋Ÿฌ๊ทธ์ธ์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ „ ์„ธ๊ณ„์˜ ์›น์ œ์ž‘์ž๋“ค์—๊ฒŒ ํŽธ๋ฆฌ์„ฑ์„ ์ฃผ๊ณ ์ž ๋งŒ๋“ค์–ด์กŒ์œผ๋ฉฐ ๋ณด๋‹ค ํŽธ๋ฆฌํ•˜๊ณ  ๋น ๋ฅด๊ฒŒ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•˜๊ณ  ๋‹ค์–‘ํ•œ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ ๋ฏธ๋ฆฌ ์ •์˜๋œ ์Šคํƒ€์ผ์‹œํŠธ์™€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌ๋™ํ•˜๋Š” ํ”Œ๋Ÿฌ..

2016.10.17 ๊ฒŒ์‹œ๋จ

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

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

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

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

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

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

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌํ˜„ํ•œ ์•Œ๊ณ ๋ฆฌ์ฆ˜] Find the next perfect square!

Description: You might know some pretty large perfect squares. But what about the NEXT one? Complete the findNextSquare method that finds the next integral perfect square after the one passed as a parameter. Recall that an integral perfect square is an integer n such that sqrt(n) is also an integer. If the parameter is itself not a perfect square, than -1 should be returned. You may assume the p..

2016.09.21 ๊ฒŒ์‹œ๋จ

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

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

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] ๊ฐ์ฒด (Javascript - Object)

์ด๋ฒˆ ๊ธ€์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ•ต์‹ฌ์ด๊ธฐ๋„ ํ•˜์ง€๋งŒ, ์ดํ•ดํ•˜๊ธฐ ์–ด๋ ค์šด ๊ฐ์ฒด์— ๋Œ€ํ•ด์„œ ๋‹ค๋ค„๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ฐ์ฒด ๊ธฐ๋ฐ˜์˜ ์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด์ด๋ฉฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด๋ฃจ๊ณ  ์žˆ๋Š” ๊ฑฐ์˜ ๋ชจ๋“  ๊ฒƒ๋“ค์ด ๊ฐ์ฒด๋กœ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ณต๋ถ€ํ•  ๋•Œ ๊ผญ ์ •๋ณตํ•ด์•ผ ํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ โ€œ๊ฐ์ฒดโ€์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ํ•œ๋งˆ๋””๋กœ ๊ฐ์ฒด๋Š” ์ž์‹ ์˜ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋…๋ฆฝ์ ์ธ ์ฃผ์ฒด์ž…๋‹ˆ๋‹ค.๊ฐ์ฒด๋ฅผ ์ดํ•ดํ•˜๋ ค๋ฉด 'ํ”„๋กœํผํ‹ฐ'์™€ '๋ฉ”์†Œ๋“œ'๋ฅผ ์ดํ•ดํ•˜๊ณ  ์žˆ์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.๊ฐ์ฒด๋ž€ ๊ฒƒ์€ ๊ฒฐ๊ตญ ํฌ์žฅ์„ ์ด๋ฃจ๋Š” ๋ง์ด๊ณ  ์‹ค์ œ ๊ฐ์ฒด๋ฅผ ์™„์„ฑ์‹œ์ผœ์ฃผ๋Š” ๊ฒƒ์€ ํ”„๋กœํผํ‹ฐ์™€ ๋ฉ”์†Œ๋“œ๋ผ๋Š” ๊ตฌ์„ฑ์š”์†Œ์ด๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒŒ ์•„๋ž˜ ๊ทธ๋ฆผ์œผ๋กœ ๊ฐ์ฒด์— ๋Œ€ํ•ด ์‰ฝ๊ฒŒ ์„ค๋ช…ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ๊ฐ์ฒด๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ๊ฒƒ์€ ๋ฐ”๋กœ ์ปดํ“จํ„ฐ ์ผ€์ด์Šค์— ํ•ด๋‹นํ•˜๋Š”๋ฐ์š”. ์‹ค์ œ ์ปดํ“จํ„ฐ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ฒƒ์€ ๋ฉ”๋ชจ๋ฆฌ, ๊ทธ..

2016.09.21 ๊ฒŒ์‹œ๋จ

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

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

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

Description: An isogram is a word that has no repeating letters, consecutive or non-consecutive. Implement a function that determines whether a string that contains only letters is an isogram. Assume the empty string is an isogram. Ignore letter case. isIsogram( "Dermatoglyphics" ) == true isIsogram( "aba" ) == false isIsogram( "moOse" ) == false // -- ignore letter case ๊ฐ™์€ ๋ฌธ์ž๊ฐ€ ๋‚˜์˜ค๋ฉด false๋ฅผ return..

2016.09.20 ๊ฒŒ์‹œ๋จ

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

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

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

Description: Usually when you buy something, you're asked whether your credit card number, phone number or answer to your most secret question is still correct. However, since someone could look over your shoulder, you don't want that shown on your screen. Instead, we mask it. Your task is to write a function maskify, which changes all but the last four characters into '#'. Examples maskify("455..

2016.09.20 ๊ฒŒ์‹œ๋จ

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

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

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

Description:Your task is to make a function that can take any non-negative integer as a argument and return it with it's digits in descending order. Descending order means that you take the highest digit and place the next highest digit immediately after it.Examples:Input: 145263 Output: 654321Input: 1254859723 Output: 9875543221 Number ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ String ๋ฐ์ดํ„ฐ ํƒ€์ž…์œผ๋กœ ๋ณ€ํ™˜ ํ›„ ๋ฐฐ์—ด๋กœ ์ •๋ ฌํ•˜๊ณ  ๋‚ด๋ฆผ์ฐจ์ˆœ์œผ๋กœ ์ •๋ ฌํ•œ ๋‹ค์Œ ๋‹ค์‹œ Numb..

2016.09.20 ๊ฒŒ์‹œ๋จ

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

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

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

Description:Return the number (count) of vowels in the given string.We will consider a, e, i, o, and u as vowels for this Kata. ๋ชจ์Œ์„ ์ฒดํฌํ•˜๋Š” ๋กœ์ง์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ๊ตฌํ˜„ํ–ˆ๋‹ค. ์•„์ง์€ ํ—ˆ์ ‘ํ•˜๊ธฐ ๊ทธ์ง€์—†๋Š” ์ฝ”๋“œ๋‹ค.์ข€ ๋” ๊ฐœ๋ฐœ์ž๋‹ต๊ฒŒ ์ฝ”๋“œ๋ฅผ ๊ฐœ์„ ํ•ด๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™๋‹ค. ๋งค์šฐ ๊ฐ„๋‹จํ•˜์ง€ ์•Š์€๊ฐ€?์ด์™€ ๊ฐ™์ด ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ๊ณผ ํšจ์œจ์„ฑ๊นŒ์ง€ ์ƒ๊ฐํ•˜๋ฉด์„œ ์งค ์ˆ˜ ์žˆ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋  ์ˆ˜ ์žˆ๋„๋ก ๋…ธ๋ ฅํ•ด์•ผ๊ฒ ๋‹ค. ์ฐธ๊ณ ๋กœ /[aeiou]/ ์™€ ๊ฐ™์€ ๊ฒฝ์šฐ๋Š” ์ •๊ทœํ‘œํ˜„์‹์œผ๋กœ aeiou ์ค‘ 1๊ฐœ๊ฐ€ ํฌํ•จ๋˜๋Š”์ง€ ์ฒดํฌํ•ด์ฃผ๋Š” ๊ฒƒ์ด๋‹ค. ๋’ค์— ig์˜ ๊ฒฝ์šฐ ๋Œ€๋ฌธ์ž/์†Œ๋ฌธ์ž๋ฅผ ๊ตฌ๋ณ„ํ•˜์ง€ ์•Š๊ฒŒ ํ•ด์ฃผ๋Š” ์ˆ˜์‹์–ด๋‹ค.

2016.09.19 ๊ฒŒ์‹œ๋จ

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

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

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

Description:This time no story, no theory. The examples below show you how to write function accum: Examples:accum("abcd"); // "A-Bb-Ccc-Dddd"accum("RqaEzty"); // "R-Qq-Aaa-Eeee-Zzzzz-Tttttt-Yyyyyyy"accum("cwAt"); // "C-Ww-Aaa-Tttt" The parameter of accum is a string which includes only letters from a..z and A..Z. ์ œ๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ๋ณด๋‹ค ์•„๋ž˜ ์ฝ”๋“œ๊ฐ€ ํ›จ์”ฌ ๊ฐ€๋…์„ฑ์ด ์ข‹์€ ๋ชจ๋ฒ” ์‚ฌ๋ก€์ž…๋‹ˆ๋‹ค.

2016.09.19 ๊ฒŒ์‹œ๋จ

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

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

[CSS3] Position : Float

์ด์•ผ๊ธฐ์— ์•ž์„œ ์›น ๋ฌธ์„œ๊ฐ€ ํฌํ•จํ•˜๋Š” ๋ชจ๋“  ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ์žก๋Š” ํฌ์ง€์…”๋‹(Positioning)์€ ์‚ฌ์‹ค ์›น ๋””์ž์ธ์˜ ๋ชจ๋“  ๊ฒƒ์ด๋ผ๊ณ  ํ‘œํ˜„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ง‘์„ ์ง€์„ ๋•Œ๋„ ๊ทธ์— ๋งž๋Š” Frame์„ ์ž˜ ์„ค๊ณ„๋ฅผ ํ•ด์•ผ ์›ํ•˜๋Š” ๋ชจ์–‘์˜ ์ง‘์„ ์ž˜ ์ง€์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์›น์‚ฌ์ดํŠธ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€ ์ž…๋‹ˆ๋‹ค. ๋งŒ๋“ค๊ณ ์žํ•˜๋Š” ์›น์‚ฌ์ดํŠธ์˜ Layout์„ ์ž˜ ์žก์•„๋†”์•ผ ๊ทธ ๋‹ค์Œ ์„ธ๋ถ€์ ์ธ ๋””์ž์ธ์„ ์‰ฝ๊ฒŒ ์ ์šฉ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.ํ•˜์ง€๋งŒ ํฌ์ง€์…”๋‹์€ ๊ฝค ๋‹ค์–‘ํ•œ ๊ฐœ๋…์„ ์ดํ•ดํ•˜๊ณ  ๊ทธ๊ฒƒ์„ ๋ณตํ•ฉ์ ์œผ๋กœ ์ž˜ ์‚ฌ์šฉํ•ด์•ผ๋งŒ ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์„๋ฟ๋”๋Ÿฌ, ํ˜„์žฌ์˜ ๊ธฐ์ˆ ๋กœ ํฌ์ง€์…”๋‹์„ ํ•˜๋Š”๋ฐ ์žˆ์–ด์„œ ๋ถ€๋”ชํžˆ๋Š” ํ•œ๊ณ„์™€ ๋ฒ„๊ทธ๋“ค์— ๋Œ€ํ•œ ์ดํ•ด๋„ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ํฌ์ง€์…”๋‹์„ ํ†ตํ•ด HTML ๋ฌธ๋ฒ•์€ ๋ฌผ๋ก , ์›น ๋””์ž์ธ์„ ์œ„ํ•œ ๊ธฐ์ดˆ ๊ณจ๊ฒฉ์„ ๋งŒ๋“œ๋Š” ๋ถ€๋ถ„์— ๋Œ€ํ•œ ๊ฐœ๋…๊นŒ์ง€ ์–ด๋Š์ •๋„ ํ™•๋ฆฝํ•  ์ˆ˜ ..

2016.09.19 ๊ฒŒ์‹œ๋จ

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

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

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ˜ธ์ด์ŠคํŒ…(javascript hoisting)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊ณต๋ถ€ํ•˜๋‹ค๋ณด๋ฉด ๋‹ค๋ฅธ ์–ธ์–ด์™€ ๋‹ค๋ฅธ ์ ์ด ๋ช‡ ๊ฐ€์ง€ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์ค‘ ํ˜ธ์ด์ŠคํŒ… (Hoisting)์ด๋ผ ๋ถˆ๋ฆฌ๋Š” ๊ฒƒ์ด ์žˆ๋Š”๋ฐ ์ด ํฌ์ŠคํŒ…์€ ํ˜ธ์ด์ŠคํŒ…์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋Š” ๊ฒƒ์— ์ค‘์ ์„ ๋‘๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํ˜ธ์ด์ŠคํŒ…(hoisting) Hoisting์€ hoist๋ผ๋Š” ๋‹จ์–ด์—์„œ ์ถœ๋ฐœํ•ฉ๋‹ˆ๋‹ค. โ€œ๋Œ์–ด ์˜ฌ๋ฆฌ๋Š” ์žฅ์น˜โ€, โ€œ๋Œ์–ด ์˜ฌ๋ฆฌ๊ธฐโ€๋ผ๋Š” ๋œป์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋„ ํ˜ธ์ด์ŠคํŒ…์€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋Œ์–ด ์˜ฌ๋ฆฐ๋‹ค๋Š” ๊ฒƒ์ด ํฌ์ธํŠธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ๋Œ์–ด์˜ฌ๋ ค์ง€๋Š” ๊ฒƒ์€ ๋ฌด์—‡์ผ๊นŒ์š”? ๋ฐ”๋กœ ๋ณ€์ˆ˜(Variable)์ž…๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•˜๊ฒŒ ๋งํ•ด์„œ JavaScript์—์„œ์˜ ํ˜ธ์ด์ŠคํŒ…์˜ ์˜๋ฏธ๋Š” ๋ณ€์ˆ˜ ์„ ์–ธ๋ฌธ์„ ๋Œ์–ด์˜ฌ๋ฆฐ๋‹ค๋Š” ๋œป์œผ๋กœ ์ดํ•ดํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ข€ ๋” ์ดํ•ด๋ฅผ ๋•๊ธฐ์œ„ํ•ด ์•„๋ž˜์˜ ์ฝ”๋“œ๋ฅผ ์ค€๋น„ํ–ˆ์Šต๋‹ˆ๋‹ค. ์œ„์˜ ์ฝ”๋“œ๋Š” ํ˜ธ์ด์ŠคํŒ…์„ ์„ค๋ช…ํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค. ์œ„ ์ฝ”๋“œ๋ฅผ ๋ณด์‹œ..

2016.09.19 ๊ฒŒ์‹œ๋จ

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

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

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

You are going to be given a word. Your job is to return the middle character of the word. If the word's length is odd, return the middle character. If the word's length is even, return the middle 2 characters.Examples:Kata.getMiddle("test") should return "es" Kata.getMiddle("testing") should return "t" Kata.getMiddle("middle") should return "dd" Kata.getMiddle("A") should return "A"InputA word (..

2016.09.18 ๊ฒŒ์‹œ๋จ

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

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

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] String์„ Number ํƒ€์ž…์œผ๋กœ ๋ฐ”๊พธ๊ธฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ช…์‹œ์ ์ธ ๋ฐ์ดํ„ฐํƒ€์ž… ์ •์˜๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. Int๋‚˜ String๊ฐ™์ด ํƒ€์ž…์„ ๋ช…์‹œํ•ด์„œ ๋ณ€์ˆ˜๋ฅผ ์ •์˜ํ•˜์ง€ ์•Š๊ณ  ๊ทธ๋ƒฅ var ํƒ€์ž…์œผ๋กœ ์ •์˜ํ•˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์•Œ์•„์„œ ์ ์ ˆํ•œ ํƒ€์ž…์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ๋ช…์‹œ์ ์ธ ํƒ€์ž…์ด ์—†๋‹ค๋Š” ๊ฒƒ์€ ๋•Œ๋ก  ํƒ€์ž… ๋•Œ๋ฌธ์— ํ—ท๊ฐˆ๋ฆฌ๊ธฐ๋„ ํ•˜๊ณ  ์›์น˜ ์•Š์€ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ค๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋ณดํ†ต์€ ์•ฝ๊ฐ„ ํŽธ๋ฒ•์ ์ธ ๋ฐฉ๋ฒ•์œผ๋กœ String์„ number๋กœ ๋ฐ”๊พผ๋‹ค๋˜์ง€ Number๋ฅผ String์œผ๋กœ ๋ฐ”๊พผ๋‹ค๋˜์ง€ ํ•ฉ๋‹ˆ๋‹ค. ์œ„์˜ ๋ฐฉ๋ฒ•์ด ๊ฐ€์žฅ ๊ฐ„๋‹จํ•˜๊ฒŒ ํ˜•๋ณ€ํ™˜์„ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์‰ฝ๊ฒŒ ๋งํ•ด์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ž๋™ํ˜•๋ณ€ํ™˜์„ ์ด์šฉํ•ด์„œ ์ฒ˜๋ฆฌํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ˆซ์žํƒ€์ž…์— ๋ฌธ์ž์—ด์„ ๋”ํ•˜๋ฉด ๊ฒฐ๊ณผ๊ฐ€ ๋ฌธ์ž์—ด์ด ๋˜๊ณ  ๋ฌธ์ž์—ด์— ์ˆซ์ž๋ฅผ ๊ณฑํ•˜๋ฉด ์ˆซ์žํƒ€์ž…์ด ๋˜๋Š” ํŠน์„ฑ์„ ์ด์šฉํ•ด์„œ ๊ฒฐ๊ณผ๋Š” ๋‹ฌ๋ผ์ง€์ง€ ์•Š๊ฒŒ ํƒ€์ž…๋งŒ ๋ณ€ํ™˜๋˜๋„๋ก ์ฒ˜๋ฆฌํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์˜ˆ์ œ๋ฅผ ํ•ด๋ณธ ..

2016.09.18 ๊ฒŒ์‹œ๋จ

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

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

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] ๋ฐฐ์—ด ์š”์†Œ ์ค‘ ์ตœ๋Œ€๊ฐ’ ์ตœ์†Œ๊ฐ’ ์ฐพ๊ธฐ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—๋Š” ์ˆซ์ž๋กœ ์ด๋ฃจ์–ด์ง„ ๋ฐฐ์—ด ๋‚ด์—์„œ ๊ฐ€์žฅ ํฐ ์ˆซ์ž ํ˜น์€ ๊ฐ€์žฅ ์ž‘์€ ์ˆซ์ž๋ฅผ ์ฐพ์•„์•ผ ํ•  ๊ฒฝ์šฐ for๋ฌธ์„ ๋Œ๋ฆฌ๋Š” ๋‹จ์ˆœํ•œ ๋ฐฉ๋ฒ• ์™ธ์— ๋” ๊ฐ„๋‹จํ•œ ๋ฐฉ๋ฒ•์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค! ๋จผ์ € Math ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. Math ๊ฐ์ฒด์— ๊ฐ€์žฅ ํฐ ์ˆซ์ž, ๊ฐ€์žฅ ์ž‘์€ ์ˆซ์ž๋ฅผ ๊ตฌํ•˜๋Š” max, min ๋ฉ”์„œ๋“œ๊ฐ€ ์กด์žฌํ•˜๋Š”๋ฐ ์—ฌ๊ธฐ์— apply ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ˆซ์ž๋กœ ์ด๋ฃจ์–ด์ง„ ๋ฐฐ์—ด์„ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์•„๋ž˜์˜ ์˜ˆ์‹œ๋ฅผ ๋ณด๋ฉด ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์šธ๊ฒ๋‹ˆ๋‹ค. ํ•œ ๊ฐ€์ง€ ์กฐ์‹ฌํ•ด์•ผํ•  ๋ถ€๋ถ„์ด ์žˆ๋Š”๋ฐ, ๋ฐฐ์—ด ๋‚ด์— ๋น„๊ต ๋ถˆ๊ฐ€๋Šฅํ•œ ๊ฐ’์ด ์žˆ๋‹ค๋ฉด ๊ฒฐ๊ณผ๋Š” NaN์œผ๋กœ ๋‚˜์˜ค๊ฒŒ ๋จ์„ ์ฃผ์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

2016.09.18 ๊ฒŒ์‹œ๋จ

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

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

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

In this little assignment you are given a string of space separated numbers, and have to return the highest and lowest number.Example:highAndLow("1 2 3 4 5"); // return "5 1"highAndLow("1 2 -3 4 5"); // return "5 -3"highAndLow("1 9 3 4 -5"); // return "9 -5" Notes:ยท All numbers are valid Int32, no need to validate them.ยท There will always be at least one number in the input string. ยท Output stri..

2016.09.18 ๊ฒŒ์‹œ๋จ

728x90
๋ฐ˜์‘ํ˜•