IE Not Supported
wordpress๋กœ ์ด์‚ฌ ๊ณ ๋ฏผ ์ค‘
์„œ๋ฒ„ ์ชฝ๋„ ๊ณต๋ถ€ํ•˜๊ณ , ์ด๊ฒƒ์ €๊ฒƒ ํŒŒ๋ฉด ํŒ”์ˆ˜๋ก ์ €๋งŒ์˜ ์‚ฌ์ดํŠธ๋ฅผ ๊ฐ–๊ณ  ์‹ถ๋‹จ ์ƒ๊ฐ์ด ์ปค์ง€๊ณ , ํ‹ฐ์Šคํ† ๋ฆฌ ๊ฐ™์€ ์„œ๋น„์Šคํ˜• ๋ธ”๋กœ๊ทธ๊ฐ€ ๊ฐ–๋Š” ๋ณธ์งˆ์  ํ•œ๊ณ„ ๋•Œ๋ฌธ์— ํ‹ฐ์Šคํ† ๋ฆฌ๋ฅผ ๋– ๋‚˜๊ณ  ์‹ถ๋‹จ ์ƒ๊ฐ์ด ๋ฏธ์•ฝํ•˜๊ฒŒ ํ”ผ์–ด์˜ค๋ฅด๊ธฐ ์‹œ์ž‘ํ•˜๋„ค์š”. ๋ฌผ๋ก  ๋ฌด๋ฃŒ๋กœ ์ด๋งŒํ•œ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•ด์ฃผ๋Š” ์—…์ฒด๊ฐ€ ๋˜ ์žˆ์„๊นŒ ์‹ถ์„ ์ •๋„๋กœ ํ›Œ๋ฅญํ•œ ํŽธ์ด๋ผ ์„ ๋œป ๋– ๋‚˜์ง„ ๋ชปํ•˜๋Š” ์ค‘์ž…๋‹ˆ๋‹ค. ๋‹จ์  ์ค‘ ๊ฐ€์žฅ ๊ฑฐ์Šฌ๋ฆฌ๋Š” ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ”์œ„๊ฐ€ ์ข์•„ ์–ต์ง€๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํŽ˜..
๋”๋ณด๊ธฐ
[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] ํŽ˜์ด์ง€ ํด๋ฆญ ์• ๋‹ˆ๋ฉ”์ด์…˜
๊ฝ๊ธฐ์›น๋””๋‹˜์˜ ํฌ์ŠคํŠธ๋ฅผ ๋ณด๊ณ  ๊ฝค ์žฌ๋ฏธ์žˆ๋Š” ๊ธฐ๋Šฅ ๊ฐ™์•„ ๋งŒ๋“ค์–ด๋ดค์Šต๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ์•„๋ฌด ๊ณณ์ด๋‚˜ ํด๋ฆญํ–ˆ์„ ๋•Œ ์›์ด ์ž ๊น ์ƒ๊น๋‹ˆ๋‹ค. ์ง€๊ธˆ ๋ณด๊ณ  ๊ณ„์‹  ํŽ˜์ด์ง€์—๋„ ํšจ๊ณผ๋ฅผ ์ ์šฉํ•ด๋’€์œผ๋‹ˆ, ํŽ˜์ด์ง€ ์•„๋ฌด ๊ณณ์ด๋‚˜ ํด๋ฆญํ•ด๋ณด์„ธ์š”! HTML <div id="clickEffect"></div> CSS @keyframes clicked { from { transform: scale(0); opacity: 0 } to { transform: scale(1); opacity: 1 } } #clickEffect { display: none; position: fixed; top: 0; left:..
๋”๋ณด๊ธฐ
[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] css ์• ๋‹ˆ๋ฉ”์ด์…˜ ์žฌ์‹œ์ž‘
์ดˆ๋ฏธ์„ธ๋จผ์ง€ ๊ฐ™์€ ํŒ์ž…๋‹ˆ๋‹ค. #YOURELEMENT.effect { animation: animation 1s linear } ์ด๋ ‡๊ฒŒ ์–ด๋–ค ์š”์†Œ์— ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋„ฃ๊ณ , ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํŠน์ • ์ƒํ™ฉ์— ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์‹คํ–‰๋˜๊ฒŒ ํ–ˆ์„ ๋•Œ, ๊ทธ ํŠน์ • ์ƒํ™ฉ์ด ์—ฐ์†๋˜๋ฉด ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ค์‹œ ์‹œ์ž‘ํ•˜๊ณ  ์‹ถ์œผ์‹ค ๋•Œ๊ฐ€ ์žˆ์„ ๊ฒ๋‹ˆ๋‹ค. ๋‹จ์ˆœํžˆ class๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ถ”๊ฐ€ํ•˜๋Š” ๊ฑด ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์žฌ์‹œ์ž‘ํ•ด์ฃผ์ง€ ์•Š๊ณ , setTimeout์„ ์ด์šฉํ•ด ๋”œ๋ ˆ์ด๋ฅผ ์‚ด์ง ์ฃผ๋ฉด ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์žฌ์‹œ์ž‘๋˜๊ธด ํ•˜์ง€..
๋”๋ณด๊ธฐ
[๋งˆ์ธํฌ๋ž˜ํ”„ํŠธ BE] ์„œ๋ฒ„์›๋“ค๊ณผ ์ƒ์กด๊ธฐ 2 - 7
๋ถ„๋ช…ํžˆ ์—”๋” ๋“œ๋ž˜๊ณค ์ˆจ๊ฒฐ ๋ฌผ๋ณ‘์— ์—ฌ๋Ÿฌ ๋ฒˆ ๋‹ด์•˜๋Š”๋ฐ ์ด ๋„์ „๊ณผ์ œ๊ฐ€ ์™„๋ฃŒ๊ฐ€ ์•ˆ ๋ผ์„œ ๋˜ ๋“œ๋ž˜๊ณค ์ˆจ๊ฒฐ ๋‹ด์œผ๋Ÿฌ ์™€๋ดค์Šต๋‹ˆ๋‹ค. ๋“œ๋ž˜๊ณค ์žก๋‹ค๊ฐ€ ์•Œ์•˜๋Š”๋ฐ ๊ทธ๋ƒฅ ๋“œ๋ž˜๊ณค ์ž…์— ์šฐํด๋ฆญ ํ•ด๋„ ๋“œ๋ž˜๊ณค ์ˆจ๊ฒฐ์ด ๋ณ‘์— ๋‹ด๊ธฐ๋”๋ผ๊ณ ์š”. ์ด๋•Œ๊นŒ์ง€ ๋ฐ”๋‹ฅ์— ๋–จ์–ด์ง„ ๊ฒƒ๋งŒ ์ฃผ์›Œ์„œ ์™„๋ฃŒ๊ฐ€ ์•ˆ ๋๋‚˜ ๋ด…๋‹ˆ๋‹ค. ๋“œ๋””์–ด ์Šค์ผˆ๋ ˆํ†ค ์Šคํฌ๋„ˆ๋„ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค. ์Šฌ๋ผ์ž„ ์ฒญํฌ๋ฅผ ์ฐพ์•„์„œ ์Šฌ๋ผ์ž„ ํŒœ์„ ๋งŒ๋“ค๊ธฐ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ์Šฌ๋ผ์ž„ ์ฒญํฌ๋ฅผ ์ฐพ๋Š” ๊ฝค ๋งŽ์€ ๋ฐฉ๋ฒ•์ด ์žˆ์ง€๋งŒ, ์ œ์ผ ๊ฐ„..
๋”๋ณด๊ธฐ
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ for while ํผํฌ๋จผ์Šค ๋น„๊ต
์•ž์„œ ํฌ์ŠคํŒ…ํ–ˆ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ€ต์†ŒํŠธ์—์„œ for์ด while๋ณด๋‹ค ํผํฌ๋จผ์Šค๊ฐ€ ์ข‹๋‹ค๊ณ  ๊ธฐ์ˆ ํ–ˆ๋Š”๋ฐ, ์ž˜๋ชป๋œ ์ •๋ณด๋ฅผ ์•Œ๋ ค ๋“œ๋ฆฐ ๊ฒƒ ๊ฐ™์•„ ์ •์ •ํ•˜๊ณ ์ž ๊ธ€์„ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค. ์•ž์„  ํฌ์ŠคํŒ…์—์„ , ํ•œ๋ฒˆ์— for while ๋‘˜ ๋‹ค ์‹คํ–‰๋˜๋„๋ก ํ•˜๊ณ  ์‹œ๊ฐ„์„ ์ธก์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚˜์ค‘์— ๋‹ค์‹œ ํ™•์ธํ•ด๋ณด๋‹ˆ, for์ด๊ฑด while์ด๊ฑด ๋จผ์ € ํ•˜๋‚˜๊ฐ€ ์‹คํ–‰๋˜๋ฉด ๊ทธ๋‹ค์Œ ๊ฑด ๋นจ๋ฆฌ ์‹คํ–‰๋˜๋”๋ผ๊ณ ์š”. ์ „ ๊ทธ ํ…Œ์ŠคํŠธ์—์„œ while์„ ๊ณ„์† ๋จผ์ € ์‹คํ–‰ํ•˜๊ณ  for์„ ๊ทธ๋‹ค์Œ์— ์‹คํ–‰ํ•ด์„œ for์ด ๋” ๋นจ..
๋”๋ณด๊ธฐ

์Šคํ‚จ ๋ชฉ๋ก

ํ‹ฐ์Šคํ† ๋ฆฌ ๋ฐ˜์‘ํ˜• ์Šคํ‚จ #11 Summer Nights 2
๊ฒ‰๋ชจ์Šต์€ ๋น„์Šทํ•˜์ง€๋งŒ ์‚ฌ์‹ค์ƒ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋งŒ๋“  ๊ฑฐ๋ผ ๊ทธ๋ƒฅ ๋„˜๋ฒ„๋ง์„ ๋”ฐ๋กœ ๋ถ™์ด๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ ๋ฒ„์ „์˜ ์†Œ๊ฐœ๋Š” ์ด๊ณณ์— ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์šด๋กœ๋“œ๋Š” ์ด๊ณณ์—์„œ ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ๋Šฅ์€ ์œ ์ง€ํ•˜๋˜, ํ•„์š” ์—†๋Š” ๊ธฐ๋Šฅ์€ ์ข€ ๋นผ๊ณ  ํ•„์š”ํ•œ ๊ธฐ๋Šฅ๋“ค์„ ์ถ”๊ฐ€ํ•˜๊ณ , ์ž‘๋™ ๋ฐฉ์‹์„ ๋ณ€๊ฒฝํ•œ ๊ธฐ๋Šฅ๋„ ๊ฝค ๋ฉ๋‹ˆ๋‹ค. ๊ฐ„ํŽธํ•œ ์˜ต์…˜ ์ œ์–ด ๊ธฐ์กด ๋ฒ„์ „๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ, html์˜ ํŽธ์ง‘ ์—†์ด ํ•œ์ธต ๋” ๊ฐ„ํŽธํ•˜๊ฒŒ ์˜ต์…˜๋“ค์„ ์ผœ๊ณ  ๋Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ…Œ๋งˆ๋Š” Snowy Snow..
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ฐ˜์‘ํ˜• ์Šคํ‚จ #10 PC ํ†ต์‹ 
๋‘ฅ๊ทผ๋ชจ๊ผด ํฐํŠธ๋ฅผ ๋ณด๊ณ  ๊ฐ‘์ž๊ธฐ ๋งŒ๋“ค๊ณ  ์‹ถ์–ด์ ธ์„œ ์‹œ์ž‘ํ•œ ์Šคํ‚จ. ์ฒœ๋ฆฌ์•ˆ, ํ•˜์ดํ…”, ๋‚˜๋ˆ„์šฐ๋ฆฌ ๋“ฑ ๋‹น์‹œ ์šด์˜๋˜๋˜ ์›น์‚ฌ์ดํŠธ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์ œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค. ์•ˆํƒ€๊น๊ฒŒ๋„ ํ™ˆ ํ™”๋ฉด๊นŒ์ง€๋งŒ ๊ตฌ์ƒํ•ด๋‘๊ณ  ๋”๋Š” ์ง„ํ–‰ํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์ด์œ ๋Š” ๊ฐœ์ธ์ ์œผ๋กœ ์ด๋ฏธ์ง€ ์ค‘์‹ฌ์˜ ํŽ˜์ด์ง€๋ฅผ ์ข‹์•„ํ•˜๋Š”๋ฐ, ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ์œผ๋‹ˆ ์˜ˆ์ „ PC ํ†ต์‹  ์‹œ์ ˆ ์›น์‚ฌ์ดํŠธ์˜ ๋Š๋‚Œ์ด ๋‚˜์งˆ ์•Š์•„ ์ค‘๊ฐ„์— ๊ทธ๋งŒ๋‘๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค ใ… ใ…  ํ™ˆ ํ™”๋ฉด์ž…๋‹ˆ๋‹ค. ํ‘ธ๋ฅธ ๋ฐ”ํƒ•์— ๋‹น์‹œ ์‚ฌ์šฉํ•˜๋˜ ํ—ค๋”์˜ ๋””์ž์ธ..
ํ‹ฐ์Šคํ† ๋ฆฌ ๋ฐ˜์‘ํ˜• ์Šคํ‚จ #9 Lovely Pink
์Šต์ž‘์ด๋ผ ๋„˜๋ฒ„๋ง์„ ๋ถ™์ด๋Š” ๊ฒŒ ๋งž๋Š” ๊ฑด์ง„ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ, ๋ญ ์ค‘๊ฐ„์— ํ๊ธฐํ•œ ์Šคํ‚จ ์•„๋‹ˆ๋ฉด ์–ด์ง€๊ฐ„ํ•˜๋ฉด ๋„˜๋ฒ„๋ง์„ ๋ถ™์—ฌ๋ณผ๊นŒ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฐ์ €๋Ÿฐ ๊ธฐ๋Šฅ ๋‹ค ์‘ค์…” ๋„ฃ์œผ๋ ค๋Š” ์š•์‹ฌ์€ ํฌ๊ธฐํ•˜๊ณ , ๋‹จ์ˆœํžˆ ๋งŒ๋“ค์–ด๋ดค์Šต๋‹ˆ๋‹ค. body ์•ˆ์— ๊ณ ์ •๋œ ์ปจํ…Œ์ด๋„ˆ๋ฅผ ๋งŒ๋“ค๊ณ , ๊ทธ ์•ˆ์— ์š”์†Œ๋“ค์„ ์ง‘์–ด๋„ฃ์—ˆ์Šต๋‹ˆ๋‹ค. body๋ฅผ ์Šคํฌ๋กค ํ•˜๋Š” ๊ฒŒ ์•„๋‹ˆ๊ธฐ์— ํˆฌ๋ฐ•ํ•œ ์Šคํฌ๋กค ๋ฐ”๋ณด๋‹ค ์—ฌ๊ธฐ์„œ ๋งํ–ˆ๋˜ ์ปค์Šคํ…€ ์Šคํฌ๋กค ๋ฐ”๋ฅผ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ๋„ˆ๋ฌด ์ปค์ง€๋ฉด ๋ณด๊ธฐ ์ด์ƒํ•œ ๊ฐ์ด ์žˆ..

๊ฐ์ข… ํŒ

thumbnail
[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] ํŽ˜์ด์ง€ ํด๋ฆญ ์• ๋‹ˆ๋ฉ”์ด์…˜
๊ฝ๊ธฐ์›น๋””๋‹˜์˜ ํฌ์ŠคํŠธ๋ฅผ ๋ณด๊ณ  ๊ฝค ์žฌ๋ฏธ์žˆ๋Š” ๊ธฐ๋Šฅ ๊ฐ™์•„ ๋งŒ๋“ค์–ด๋ดค์Šต๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ์•„๋ฌด ๊ณณ์ด๋‚˜ ํด๋ฆญํ–ˆ์„ ๋•Œ ์›์ด ์ž ๊น ์ƒ๊น๋‹ˆ๋‹ค. ์ง€๊ธˆ ๋ณด๊ณ  ๊ณ„์‹  ํŽ˜์ด์ง€์—๋„ ํšจ๊ณผ๋ฅผ ์ ์šฉํ•ด๋’€์œผ๋‹ˆ, ํŽ˜์ด์ง€ ์•„๋ฌด ๊ณณ์ด๋‚˜ ํด๋ฆญํ•ด๋ณด์„ธ์š”! HTML <div id="clickEffect"></div> CSS @keyframes clicked { from { transform: scale(0); opacity: 0 } to { transform: scale(1); opacity: 1 } } #clickEffect { display: none; position: fixed; top: 0; left:..
thumbnail
[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ] css ์• ๋‹ˆ๋ฉ”์ด์…˜ ์žฌ์‹œ์ž‘
์ดˆ๋ฏธ์„ธ๋จผ์ง€ ๊ฐ™์€ ํŒ์ž…๋‹ˆ๋‹ค. #YOURELEMENT.effect { animation: animation 1s linear } ์ด๋ ‡๊ฒŒ ์–ด๋–ค ์š”์†Œ์— ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋„ฃ๊ณ , ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ํŠน์ • ์ƒํ™ฉ์— ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์‹คํ–‰๋˜๊ฒŒ ํ–ˆ์„ ๋•Œ, ๊ทธ ํŠน์ • ์ƒํ™ฉ์ด ์—ฐ์†๋˜๋ฉด ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ค์‹œ ์‹œ์ž‘ํ•˜๊ณ  ์‹ถ์œผ์‹ค ๋•Œ๊ฐ€ ์žˆ์„ ๊ฒ๋‹ˆ๋‹ค. ๋‹จ์ˆœํžˆ class๋ฅผ ์ œ๊ฑฐํ•˜๊ณ  ์ถ”๊ฐ€ํ•˜๋Š” ๊ฑด ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์žฌ์‹œ์ž‘ํ•ด์ฃผ์ง€ ์•Š๊ณ , setTimeout์„ ์ด์šฉํ•ด ๋”œ๋ ˆ์ด๋ฅผ ์‚ด์ง ์ฃผ๋ฉด ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์žฌ์‹œ์ž‘๋˜๊ธด ํ•˜์ง€..
thumbnail
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ for while ํผํฌ๋จผ์Šค ๋น„๊ต
์•ž์„œ ํฌ์ŠคํŒ…ํ–ˆ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ€ต์†ŒํŠธ์—์„œ for์ด while๋ณด๋‹ค ํผํฌ๋จผ์Šค๊ฐ€ ์ข‹๋‹ค๊ณ  ๊ธฐ์ˆ ํ–ˆ๋Š”๋ฐ, ์ž˜๋ชป๋œ ์ •๋ณด๋ฅผ ์•Œ๋ ค ๋“œ๋ฆฐ ๊ฒƒ ๊ฐ™์•„ ์ •์ •ํ•˜๊ณ ์ž ๊ธ€์„ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค. ์•ž์„  ํฌ์ŠคํŒ…์—์„ , ํ•œ๋ฒˆ์— for while ๋‘˜ ๋‹ค ์‹คํ–‰๋˜๋„๋ก ํ•˜๊ณ  ์‹œ๊ฐ„์„ ์ธก์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‚˜์ค‘์— ๋‹ค์‹œ ํ™•์ธํ•ด๋ณด๋‹ˆ, for์ด๊ฑด while์ด๊ฑด ๋จผ์ € ํ•˜๋‚˜๊ฐ€ ์‹คํ–‰๋˜๋ฉด ๊ทธ๋‹ค์Œ ๊ฑด ๋นจ๋ฆฌ ์‹คํ–‰๋˜๋”๋ผ๊ณ ์š”. ์ „ ๊ทธ ํ…Œ์ŠคํŠธ์—์„œ while์„ ๊ณ„์† ๋จผ์ € ์‹คํ–‰ํ•˜๊ณ  for์„ ๊ทธ๋‹ค์Œ์— ์‹คํ–‰ํ•ด์„œ for์ด ๋” ๋นจ..
์Šคํ‚จ/์Šคํ‚จ ๋ชฉ๋ก
์žก๋‹ด
๊ฐค๋Ÿฌ๋ฆฌ