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

๊ฐœ๋ฐœ/HTML5

iOS์—์„œ input์— ์ ์šฉ๋œ shadow ํšจ๊ณผ ์ œ๊ฑฐํ•˜๋Š” ๋ฐฉ๋ฒ• (Remove iOS input shadow)

iOS์—์„œ input ํƒœ๊ทธ์— ์œ„์™€ ๊ฐ™์ด shadow ํšจ๊ณผ๊ฐ€ ์ ์šฉ๋˜๋Š” ์ ์„ ํ™•์ธํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. iOS์—์„œ input ํƒœ๊ทธ์— ๊ธฐ๋ณธ์ ์œผ๋กœ ์ ์šฉ๋œ shadow ํšจ๊ณผ๋ฅผ ์ œ๊ฑฐํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” CSS ์†์„ฑ ์ค‘์— appearance ์†์„ฑ์„ ์ œ๊ฑฐํ•จ์œผ๋กœ์จ input ํƒœ๊ทธ์— ์ ์šฉ๋œ shadow ํšจ๊ณผ๋ฅผ ์ œ๊ฑฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. appearance ์†์„ฑ ์ ์šฉ ์˜ˆ์‹œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์˜ˆ์‹œ์ฝ”๋“œ input[type=text] { /* Remove First */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } appearance ์†์„ฑ์ด ๋ฌด์—‡์ธ์ง€ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด ์•„๋ž˜๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”. appearance (-moz-appearance, -webkit-appearance)..

2020.11.15 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/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

input ์ปค์„œ(caret) ์ƒ‰์ƒ ๋ฐ”๊พธ๋Š” ๋ฐฉ๋ฒ• (How to change input box cursor color)

์›น์‚ฌ์ดํŠธ์—์„œ ์‚ฌ์šฉ์ž์˜ ์ž…๋ ฅ ๊ฐ’์„ ๋ฐ›๊ธฐ ์œ„ํ•ด input ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๊ณค ํ•˜๋Š”๋ฐ์š”. ์‚ฌ์ดํŠธ์˜ ํŠน์ƒ‰์— ๋งž๊ฒŒ input ์ปค์„œ์˜ ์ƒ‰์ƒ์„ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•์„ ํ•ด์•ผํ•  ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊ธฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด๋•Œ ์ƒ‰์ƒ์„ ๋ฐ”๊พธ๋Š” ๊ฐ„๋‹จํ•œ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์ปค์„œ ์ƒ‰์ƒ์„ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฐฉ๋ฒ• ํ…์ŠคํŠธ ์ƒ‰์ƒ์„ ์ƒ์†๋ฐ›๋Š” ๊ฒฝ์šฐ ๊ธฐ๋ณธ์ ์œผ๋กœ input ์ปค์„œ์˜ ์ƒ‰์ƒ์€ ํ…์ŠคํŠธ์˜ ์ƒ‰์ƒ์„ ์ƒ์†๋ฐ›์Šต๋‹ˆ๋‹ค. input ํ…์ŠคํŠธ ์ƒ‰์ƒ์„ ๋ณ€๊ฒฝํ•˜๋ฉด ์ž๋™์œผ๋กœ ์ปค์„œ์˜ ์ƒ‰์ƒ ๋˜ํ•œ ๋ณ€๊ฒฝ๋˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. input ํ…์ŠคํŠธ ์ƒ‰์ƒ์„ ๋ณ€๊ฒฝํ•ด ๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. input { color: blue; } ์ปค์„œ ์ƒ‰์ƒ๋งŒ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ ๊ธ€์ž์ƒ‰๊ณผ๋Š” ๋‹ค๋ฅธ ์ƒ‰์ƒ์œผ๋กœ ์ปค์„œ ์ƒ‰์ƒ์„ ๋ฐ”๊พธ๊ณ  ์‹ถ๋‹ค๋ฉด CSS caret-color ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋ฉด ์†์‰ฝ๊ฒŒ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด ์Šคํƒ€์ผ์„ ์ ์šฉ..

2020.10.26 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/HTML5

Input ํƒœ๊ทธ ํ…Œ๋‘๋ฆฌ ํ•˜์ด๋ผ์ดํŠธ ์ œ๊ฑฐํ•˜๋Š” ๋ฐฉ๋ฒ• (How to remove the border highlight on an input)

HTML ํƒœ๊ทธ ์ค‘ input ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋‹ค ๋ณด๋ฉด ํ˜„์žฌ ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค input ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š”์ง€ ํ™œ์„ฑํ™”์‹œ์ผœ์ฃผ๊ธฐ ์œ„ํ•ด ๊ฐ•์กฐํ•ด์ฃผ๋Š” ํ•˜์ด๋ผ์ดํŒ… ํšจ๊ณผ๊ฐ€ ์ƒ๊ธฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋ณดํ†ต ํ•˜๋Š˜์ƒ‰ ๋„ค๋ชจ๋‚œ ๋ฐ•์Šค์˜ ํ•˜์ด๋ผ์ดํŒ…์ด ํ‘œ์‹œ๋˜์ฃ . ํ•˜์ง€๋งŒ ํ•ด๋‹นํ•˜๋Š” ํšจ๊ณผ๋ฅผ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•ํ•˜๊ธฐ ์œ„ํ•ด ํ•˜์ด๋ผ์ดํŒ… ํšจ๊ณผ๋ฅผ ์ œ๊ฑฐํ•ด์•ผ๋  ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊ธฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ํ•ด๊ฒฐ๋ฐฉ๋ฒ• inputํƒœ๊ทธ์˜ outline ์Šคํƒ€์ผ ์†์„ฑ์„ none ์œผ๋กœ ์„ค์ •ํ•˜๋ฉด ๊ฐ„๋‹จํ•˜๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. input:focus { outline: none; } ํฌ์ปค์Šค(focus)๋œ ํƒœ๊ทธ(input:focus)์˜ ์•„์›ƒ๋ผ์ธ(outline)์„ none์œผ๋กœ ์„ค์ •ํ•˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ํ•ด๋‹น ์ฝ”๋“œ๋Š” ๋ชจ๋“  input ํƒœ๊ทธ์˜ ํ•˜์ด๋ผ์ดํŠธ ํšจ๊ณผ๊ฐ€ ์ œ๊ฑฐ๋ฉ๋‹ˆ๋‹ค.

2020.10.25 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/HTML5

HTML์—์„œ ๊ฐ€์šด๋Žƒ์  ยท | middle dot ์‰ฝ๊ฒŒ ์ฐ๋Š” ๋ฒ•

HTML์—์„œ ๊ฐ€์šด๋Žƒ์ (ยท | middle dot)์„ ์ฐ์„ ๋•Œ ์‰ฌ์šด ๋ฐฉ๋ฒ•์ด ์žˆ์–ด์„œ ๊ณต์œ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๋•Œ๋Š” HTML ์œ ๋‹ˆ์ฝ”๋“œ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ๊ฐ„๋‹จํ•˜๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. UNICODE U+000B7; HEX CODEยท HTML CODEยท HTML ENTITYยท CSS CODE \00B7; // html example ยท // css example span { content: "\00B7"; } ์˜ˆ์‹œ ์•„๋ž˜์™€ ๊ฐ™์ด HTML ๋ฌธ์ž ์‚ฌ์ด์— ์œ ๋‹ˆ์ฝ”๋“œ ๋ฌธ์ž๋ฅผ ๋„ฃ์–ด์ฃผ๋ฉด ์•„์ฃผ ์‰ฝ๊ฒŒ ๊ฐ€์šด๋ฐ ์ ์„ ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

2020.10.12 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/HTML5

html img ํƒœ๊ทธ์— ๋””ํดํŠธ ์ด๋ฏธ์ง€ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• (show default image if image not found in HTML 5)

html img ํƒœ๊ทธ src ์†์„ฑ์— ๊นจ์ง„ ์ด๋ฏธ์ง€ ๊ฒฝ๋กœ๋ฅผ ๋„ฃ์œผ๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์•„๋ฌด ์ด๋ฏธ์ง€๋„ ์•ˆ๋‚˜์˜ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋•Œ ๊นจ์ง„ ์ด๋ฏธ์ง€ ๊ฒฝ๋กœ์ผ ๊ฒฝ์šฐ ๋””ํดํŠธ ์ด๋ฏธ์ง€๋กœ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. onerror ์ด๋ฒคํŠธ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. img ํƒœ๊ทธ ๋””ํดํŠธ ์ด๋ฏธ์ง€ ์„ค์ • ์˜ˆ์‹œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. // onerror ์‚ฌ์šฉ ์˜ˆ์‹œ // or // ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ vue์—์„œ๋Š” @error๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ฒ˜๋ฆฌํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. // vue์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

2020.09.08 ๊ฒŒ์‹œ๋จ

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

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

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

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

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

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

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

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

ํ…์ŠคํŠธ ์—๋””ํ„ฐ 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 ๊ฒŒ์‹œ๋จ

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

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

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

์ด๋ฒˆ์— ๋‹ค๋ฃฐ ํŒจํ‚ค์ง€๋Š” pigments์ž…๋‹ˆ๋‹ค.ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ํ•˜๋ฉด์„œ ๊ฐ€์žฅ ์†Œ๋ฆ„๋‹๊ณ  ํ•„์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋˜ ๊ธฐ๋Šฅ์„ atom์—์„œ ์ œ๊ณต์„ ํ•ด์ค๋‹ˆ๋‹ค. ๋ฐ”๋กœ css ํŒŒ์ผ์—์„œ backgorund๋‚˜ color์— ์ƒ‰์ƒ์„ ์ ์šฉํ•  ๋•Œ ์ฝ”๋“œ ์•ˆ์— ์ปฌ๋Ÿฌ๊ฐ€ ๋“ค์–ด๊ฐ€๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ •๋ง ํšจ์œจ์ ์ธ ํŒจํ‚ค์ง€์ด๋ฏ€๋กœ, atom์„ ์‚ฌ์šฉํ•˜์‹œ๋Š” ๋ถ„์€ ๊ผญ ์ด ํŒจํ‚ค์ง€๋ฅผ ๋ฐ›์•„์„œ ์‚ฌ์šฉํ•˜์‹œ๊ธธ ๋ฐ”๋ž๋‹ˆ๋‹ค. ์„ค์น˜๋ฒ• pigments ๋ช…์„ธ A package to display colors in project and files:Pigments will scan source files in your project directories looking for colors and will build a palette with all of them. Then for..

2016.10.17 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/CSS3

[CSS3] emmet์„ ํ†ตํ•ด ํšจ์œจ์ ์œผ๋กœ CSS๋ฅผ ์ž‘์„ฑํ•ด๋ณด์ž

Emmet? Emmet์ด๋ž€ editor plugin์œผ๋กœ์จ ๋‹จ์ถ•ํ‚ค๋ฅผ ์ด์šฉํ•ด HTML, XML, XSL ์ฝ”๋”ฉ ์†๋„๋ฅผ ๋น„์•ฝ์ ์œผ๋กœ ํ–ฅ์ƒ์‹œ์ผœ์ฃผ๋Š” ํˆด์ž…๋‹ˆ๋‹ค. ๊ฐ€๋ น ๊ธด ํ…Œ์ด๋ธ”์„ ์ฝ”๋”ฉํ•  ๋•Œ, ์†์œผ๋กœ ์ž…๋ ฅํ•˜๋Š” ๊ฑด ๋ˆ„๊ฐ€๋ด๋„ ๋ฐ”๋ณด๊ฐ™์€ ์ง“์ด๊ณ  ์ค„์ค„์ด ๋ณต์‚ฌํ•ด ๋ถ™์ด๋Š” ๊ฒƒ๋„ ๋ณ„๋ฐ˜ ๋‚˜์„ ๊ฒŒ ์—†์–ด ๋ณด์ž…๋‹ˆ๋‹ค. ๋ฌผ๋ก  ํ…Œ์ด๋ธ” ๋งŒ๋“œ๋Š” ํˆด์„ ์“ฐ๋Š” ๊ฒŒ ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์ธ ๋ฐฉ๋ฒ•์ด๊ธด ํ•ฉ๋‹ˆ๋‹ค. ๊ทผ๋ฐ ์–ธ๋œป ๋ด๋„ ๊ฐ™์€ ํƒœ๊ทธ์˜ ๋ฐ˜๋ณต์ž„์„ ์•Œ ์ˆ˜ ์žˆ๋Š”๋ฐ์š”. ์•„๋ž˜์™€ ๊ฐ™์ด ์ž๋™์™„์„ฑ์„ ํ•ด๋ณด๋ฉด ์–ด๋–จ๊นŒ์š”? table>tr*5>td*5 table ํƒœ๊ทธ๋กœ ์—ด๊ณ  ๊ทธ ์•„๋ž˜ tr ํƒœ๊ทธ 5๊ฐœ ์—ด๊ณ  ๊ทธ ์•„๋ž˜ td ํƒœ๊ทธ 5๊ฐœ ์—ด๋ผ๋Š” ๋œป์ž…๋‹ˆ๋‹ค. Emmet์€ ๋Œ€๋ถ€๋ถ„ ์ฝ”๋”ฉ์„ ํ•˜๋Š” ์‚ฌ๋žŒ์ด๋ผ๋ฉด ๋‹ค๋ฅธ ํˆด๊ณผ ๋‹ฌ๋ฆฌ ๊ธฐ๋ณธ์€ ๊ธˆ์„ธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ์ ์œผ๋กœ Emmet์˜ ์•ฝ์–ด๋Š” ๋‹จ์–ด์˜ ์ฒซ ๊ธ€์ž๋ฅผ ๋”ฐ์„œ ..

2016.10.17 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/Bootstrap

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

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

2016.10.17 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/CSS3

[CSS3] Position : Float์˜ ๋ถ€๋ชจ height๊ฐ€ ์ ์šฉ์ด ์•ˆ๋˜๋Š” ํ˜„์ƒ ํ•ด๊ฒฐ๋ฒ•

css3์—์„œ ์ž์‹์š”์†Œ์— float๋ฅผ ์ ์šฉํ•˜๋ฉด ๋ถ€๋ชจ์˜ height๊ฐ€ 0์œผ๋กœ ๋˜์–ด๋ฒ„๋ฆฌ๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ ์ด ํ˜„์ƒ์„ ํ•ด๊ฒฐํ•˜๋Š” ๋ฒ•์„ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์œ„ ์ฝ”๋“œ๋ฅผ ๋ณด์‹œ๋ฉด nav์˜ ๋ถ€๋ชจํƒœ๊ทธ์ธ header์˜ height๊ฐ€ 0๊ฐ€ ๋˜๋Š” ํ˜„์ƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด์œ ๋Š” float ์†์„ฑ์€ ์‰ฝ๊ฒŒ ๋งํ•ด ์˜ค๋ฅธ์ชฝ์ด๋‚˜ ์™ผ์ชฝ์œผ๋กœ ๋ถ•~๋„์šด๋‹ค๋Š” ๋œป์ž…๋‹ˆ๋‹ค. ํ•œ๋งˆ๋””๋กœ ๋ถ€๋ชจ๋ฅผ float๋กœ ์„ค์ •ํ•˜์ง€ ์•Š๋Š” ์ด์ƒ, ๊ฑฐ๊ธฐ์— ์ ์šฉ๋ฐ›์ง€ ์•Š๊ณ  ๋…๋ฆฝ์ ์œผ๋กœ ์œ„๋กœ ๋– ์žˆ๋Š” ์ƒํƒœ์ฃ . ์ด ์ƒํƒœ๋ฅผ ๋ถ€๋ชจ์š”์†Œ๊นŒ์ง€ ์ ์šฉ์„ ์‹œํ‚ค๋ ค๋ฉด ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋ฐฉ๋ฒ• 1 (๊ฐ€์ƒ ์„ ํƒ์ž :after๋กœ clear ํ•˜๋Š” ๋ฐฉ๋ฒ•) ๊ฐ€์žฅ ํƒ์›”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋ผ ์ฒซ๋ฒˆ์งธ๋กœ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค. ์šฐ์„  "๊ฐ€์ƒ ์„ ํƒ์ž"๋ผ๋Š” ๊ฐœ๋…์„ ์ดํ•ดํ•˜์…”์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์•ฝ๊ฐ„ ์ดํ•ด๊ฐ€ ํ•„์š”ํ•œ๋ฐ์š”. ๊ฐ€์ƒ์„ ..

2016.10.14 ๊ฒŒ์‹œ๋จ

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

๊ฐœ๋ฐœ/Javascript

[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์™€ ์ฝœ๋ฐฑํ•จ์ˆ˜(javascript callback)

์˜ค๋Š˜์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์™€ ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ๋‹ค๋ค„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ? ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋Š” ์‰ฝ๊ฒŒ ๋งํ•ด ์–ด๋– ํ•œ ์ด๋ฒคํŠธ์— ๋Œ€ํ•ด ๋Œ€๊ธฐ์ค‘์ธ ์ƒํƒœ๋ฅผ ๋งํ•ฉ๋‹ˆ๋‹ค. ํ•ญ์ƒ ๋ฆฌ์Šค๋‹(๋“ค์œผ๋ฉฐ) ๋Œ€๊ธฐ์ค‘์ธ๊ฑฐ์ฃ . ํ•ด๋‹น ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ๋“ฑ๋กํ•ด๋†จ๋˜ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๊ฐ€ ์‹คํ–‰๋ฉ๋‹ˆ๋‹ค. ์œ„์˜ ์ฝ”๋“œ๋ฅผ ์•„๋งˆ ํ•œ๋ฒ„ ๋ณด์‹  ์ ์ด ์žˆ์„๊ฒ๋‹ˆ๋‹ค. ์ด ์ฝ”๋“œ๊ฐ€ ๋Œ€ํ‘œ์ ์ธ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ์ธ๋ฐ์š”. window๊ฐ€ load๋  ๋•Œ function ๋ถ€๋ถ„์ด ์‹คํ–‰์ด ๋˜๋Š”๊ฒ๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ load ๋˜์—ˆ๋‹ค๋Š” ๊ฒƒ์„ ๋ˆ„๊ฐ€ ์•Œ๋ ค์ค„๊นŒ์š”? ๋ฐ”๋กœ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์•Œ๋ ค์ค๋‹ˆ๋‹ค.๋น„์Šทํ•œ ์ฝ”๋“œ๋กœ, ๊ทธ๋ฆฌ๊ณ  ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ๋กœ onclick์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋Š” ํ•ญ์ƒ on + "์ด๋ฒคํŠธ ๋ช…"์œผ๋กœ ๋ช…๋ช…๋ฉ๋‹ˆ๋‹ค.onclick, onkeypress, onmousemove ๋“ฑ ์ฒ˜๋Ÿผ์š”. window ..

2016.10.14 ๊ฒŒ์‹œ๋จ

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

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

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

Given the triangle of consecutive odd numbers: 1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 ... Calculate the row sums of this triangle from the row index (starting at index 1) e.g.: rowSumOddNumbers(1); // 1 rowSumOddNumbers(2); // 3 + 5 = 8 ๋„ˆ๋ฌด ์–ด๋ ต๊ฒŒ ์ƒ๊ฐํ–ˆ๋‹ค..์กฐ๊ธˆ๋งŒ ๋” ์‰ฝ๊ฒŒ ์ƒ๊ฐํ–ˆ์œผ๋ฉด ํ›จ์”ฌ ์‰ฌ์šด ๋ฐฉ๋ฒ•์„ ์ƒ๊ฐํ•ด๋‚ผ ์ˆ˜ ์žˆ์—ˆ๋Š”๋ฐ..๊ฐ„๋‹จํ•˜๊ฒŒ ๋ฐ”๋กœ ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ œํ•ด๊ฒฐ๋Šฅ๋ ฅ์„ ํ‚ค์šฐ๋„๋ก ๋…ธ๋ ฅํ•ด์•ผ๊ฒ ๋‹ค. ์™œ ์ด๋ฐฉ๋ฒ•์„ ์ƒ๊ฐ์„ ๋ชปํ–ˆ์„๊ผฌ...

2016.10.14 ๊ฒŒ์‹œ๋จ

728x90
๋ฐ˜์‘ํ˜•