์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

์›นํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ๊ฝƒ! ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ

javascript๋ฅผ ํ†ตํ•ด HTML์˜ ์š”์†Œ๋ฅผ ์„ ํƒํ•˜๊ณ  ๋‹ค์–‘ํ•œ ์ด๋ฒคํŠธ์— ๋”ฐ๋ผ ์š”์†Œ์˜ ์Šคํƒ€์ผ์„ ๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋ฅผ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. javascript์˜ ๊ธฐ๋ถ„๋ฌธ๋ฒ•์—์„œ ์Šคํƒ€์ผ ๋ณ€๊ฒฝ, ์ด๋ฒคํŠธ ์„ค์ • ๋ฐ ์›นํŽ˜์ด์ง€ ๊ตฌํ˜„์‹œ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ํšจ๊ณผ๋ฅผ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

๋‚ ๊ฐœ ๋‹ฌ๋ฆฐ ๋™์ „

๊ฐ•์˜ ์ถ”์ฒœํ•˜๊ณ  ์„ฑ์žฅ๊ณผ ์ˆ˜์ต์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”!

๋‚ ๊ฐœ ๋‹ฌ๋ฆฐ ๋™์ „

๋งˆ์ผ€ํŒ… ํŒŒํŠธ๋„ˆ์Šค

๊ฐ•์˜ ์ถ”์ฒœํ•˜๊ณ  ์„ฑ์žฅ๊ณผ ์ˆ˜์ต์„ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”!

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ๋ณธ๊ธฐ

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ ์š”์†Œ๋ฅผ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ์š”์†Œ์˜ ์Šคํƒ€์ผ์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค

  • ๋‹ค์–‘ํ•œ ์ด๋ฒคํŠธ๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค

  • UI/UX ํšจ๊ณผ๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค

๋ณธ ๊ณผ์ •์€ ํ™”๋ คํ•˜๊ณ  ๋ณต์žกํ•œ ๊ธฐ๋Šฅ๋ณด๋‹ค ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ๊ธฐ๋ณธ๊ณผ ํ•ต์‹ฌ ๊ฐœ๋…์— ์ง‘์ค‘ํ•ด ํƒ„ํƒ„ํ•œ ๊ธฐ์ดˆ๋ฅผ ๋‹ค์งˆ ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋ณ€์ˆ˜์™€ ์—ฐ์‚ฐ์ž, ํ•จ์ˆ˜์™€ ๊ฐ์ฒด, ๋ฐฐ์—ด์˜ ์ƒ์„ฑ๊ณผ ํ™œ์šฉ ๋“ฑ ๊ธฐ์ดˆ ๊ฐœ๋…์„ ๋ช…ํ™•ํžˆ ์ดํ•ดํ•˜๊ณ , ์กฐ๊ฑด๋ฌธ๊ณผ ๋ฐ˜๋ณต๋ฌธ์œผ๋กœ ๋…ผ๋ฆฌ์ ์ธ ์‚ฌ๊ณ ๋ฅผ ํ›ˆ๋ จํ•ฉ๋‹ˆ๋‹ค.

๋ฌธ์ž์—ด ์ฒ˜๋ฆฌ, HTML ์š”์†Œ ์„ ํƒ ๋ฐ ์Šคํƒ€์ผ ๋ณ€๊ฒฝ, ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ ๋“ฑ์˜ ์‹ค์Šต์„ ํ†ตํ•ด ์‹ค๋ฌด์— ๋ฐ”๋กœ ์ ์šฉ ๊ฐ€๋Šฅํ•œ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ์ตํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ตœ์‹  ECMAScript 6 ๋ฌธ๋ฒ•๋„ ๋‹ค๋ฃจ๋ฉฐ, 'Back to top', 'ํƒญ ๋ฉ”๋‰ด', '์•„์ฝ”๋””์–ธ' ๊ฐ™์€ ์‹ค์ „ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ๋ฐฐ์šด ๋‚ด์šฉ์„ ์‹ค์Šต์œผ๋กœ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ฒ˜์Œ ์‹œ์ž‘ํ•˜๋Š” ํ•™์ƒ๋“ค์—๊ฒŒ ๊ผญ ํ•„์š”ํ•œ ํ•ต์‹ฌ๋งŒ ๋‹ด์€ ๊ณผ์ •์ž…๋‹ˆ๋‹ค.

๋ณธ ๊ณผ์ •์—์„œ๋Š” HTML, CSS, Javascript ๊ธฐ์ดˆ๊ฐ€ ์žˆ์–ด์•ผ ํ•™์Šตํ•˜๊ธฐ ์šฉ์ดํ•ฉ๋‹ˆ๋‹ค.
ํŒŒํŠธ๋ณ„ ๊ธฐ์ดˆ๋ฅผ ํ•™์Šตํ•˜๊ณ  ์‹ถ์œผ์‹œ๋ฉด ์•„๋ž˜ ๋งํฌ๋ฅผ ํ™•์ธํ•ด์ฃผ์„ธ์š”.

๋ฌด๋น™ ํƒญ ๊ตฌํ˜„ํ•˜๊ธฐ

์•„์ฝ”๋””์–ธ ๊ตฌํ˜„ํ•˜๊ธฐ

Back to Top Scroll Animation ๊ตฌํ˜„ํ•˜๊ธฐ

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ

Q1. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(JS)๋Š” ์–ด๋–ค ์–ธ์–ด์ธ๊ฐ€์š”?

JavaScript๋Š” ์›นํŽ˜์ด์ง€๋ฅผ ๋™์ ์œผ๋กœ ์กฐ์ž‘ํ•˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. HTMLยทCSS๋กœ ๋งŒ๋“  ์ •์ ์ธ ๊ตฌ์กฐ์— ์ธํ„ฐ๋ž™์…˜๊ณผ ๋กœ์ง์„ ์ถ”๊ฐ€ํ•˜์—ฌ ๋งˆ์šฐ์Šค ํด๋ฆญ, ๋ฒ„ํŠผ ๋™์ž‘, ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ ๋“ฑ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q2. HTML/CSS๋ฅผ ์•ˆ ๋ฐฐ์› ๋Š”๋ฐ ์ด ๊ฐ•์˜๋งŒ์œผ๋กœ๋„ ๋“ค์„ ์ˆ˜ ์žˆ๋‚˜์š”?

์ด ๊ฐ•์˜๋Š” ์›น ํผ๋ธ”๋ฆฌ์‹ฑ ๊ธฐ๋ฐ˜ ์ง€์‹(HTMLยทCSS)์ด ํ•„์š”ํ•œ ๊ตฌ์กฐ๋กœ ์„ค๊ณ„๋˜์–ด ์žˆ์–ด, ๊ธฐ๋ณธ ๋ฌธ์„œ ๊ตฌ์กฐ๋ฅผ ์•Œ๊ณ  ์žˆ์œผ๋ฉด ๋” ์‰ฝ๊ฒŒ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q3. ๊ฐ•์˜์—์„œ ์–ด๋–ค ๋‚ด์šฉ์„ ๋ฐฐ์šฐ๋‚˜์š”?

์ด ๊ฐ•์˜์—์„œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋‚ด์šฉ์„ ๋‹ค๋ฃน๋‹ˆ๋‹ค:

  • ๋ณ€์ˆ˜, ์—ฐ์‚ฐ์ž, ํ•จ์ˆ˜, ๊ฐ์ฒด, ๋ฐฐ์—ด ๊ฐ™์€ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

  • ์กฐ๊ฑด๋ฌธ, ๋ฐ˜๋ณต๋ฌธ์œผ๋กœ ๋…ผ๋ฆฌ์ ์ธ ํ๋ฆ„ ๊ตฌ์„ฑ

  • HTML ์š”์†Œ ์„ ํƒ ๋ฐ ์Šคํƒ€์ผ ๋ณ€๊ฒฝ

  • ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ(click, hover ๋“ฑ)

  • Back to top, ํƒญ ๋ฉ”๋‰ด, ์•„์ฝ”๋””์–ธ ๊ฐ™์€ ๊ฐ„๋‹จํ•œ ์‹ค์ „ ์˜ˆ์ œ ๊ตฌํ˜„

Q4. ์ด ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด ๋ฌด์—‡์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‚˜์š”?

์ด ๊ฐ•์˜๋ฅผ ์ˆ˜๊ฐ•ํ•˜๋ฉด HTML ์š”์†Œ๋ฅผ ํ”„๋กœ๊ทธ๋žจ์ฒ˜๋Ÿผ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋Š” ๋Šฅ๋ ฅ์„ ๊ฐ–์ถ”๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด:

  • ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ๋‚ด์šฉ ๋ฐ”๊พธ๊ธฐ

  • ํƒญ ๋ฉ”๋‰ด ์ „ํ™˜

  • ์Šคํฌ๋กค์— ๋”ฐ๋ผ ํšจ๊ณผ ์ ์šฉ
    ๋“ฑ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ UI๋ฅผ ์ง์ ‘ ์ฝ”๋“œ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Q5. ์ด ๊ฐ•์˜ ์ดํ›„์— ์–ด๋–ค ๊ฐ•์˜๋ฅผ ๋“ค์œผ๋ฉด ์ข‹์„๊นŒ์š”?

๊ธฐ์ดˆ ๋ฌธ๋ฒ•์„ ์ตํžŒ ํ›„์—๋Š” ๋” ์‹ค์ „ ์ค‘์‹ฌ์˜ JavaScript ํ™œ์šฉ ๊ฐ•์˜ ๋˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ ๊ธฐ๋ฐ˜ ๊ฐœ๋ฐœ ๊ฐ•์˜๋ฅผ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.
์˜ˆ:

  • ์›น ํผ๋ธ”๋ฆฌ์‹ฑ ๋งˆ์Šคํ„ฐ ํ•˜๊ธฐ โ€“ Figma to Web with JavaScript

  • ์ฒ˜์Œ ๋งŒ๋‚˜๋Š” React: ํผ๋ธ”๋ฆฌ์…”๋ฅผ ์œ„ํ•œ ์‹ค์ „ ๊ฐ€์ด๋“œ
    ์ดํ›„ ํ”„๋กœ์ ํŠธ ๊ธฐ๋ฐ˜ ํ•™์Šต์œผ๋กœ ์ด์–ด๊ฐ€๋ฉด ์‹ค์ œ ์„œ๋น„์Šค ๊ฐœ๋ฐœ๋ ฅ์œผ๋กœ ํ™•์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์†Œํ†ต ์ฐฝ๊ตฌ(์„ค๋ฌธ, 1:1์˜คํ”ˆ ์ฑ„ํŒ…๋ฐฉ)โœ’

์ˆ˜๊ฐ•์ƒ ๋ถ„๋“ค์€ ์ƒˆ์†Œ์‹๋ž€์˜ ์†Œ๊ฐœ๋˜์–ด ์žˆ๋Š” ๊ตฌ๊ธ€ ์„ค๋ฌธ๊ณผ 1:1 ์˜คํ”ˆ ์ฑ„ํŒ…๋ฐฉ์„ ํ†ตํ•ด ์–ธ์ œ๋“  ์˜๊ฒฌ๊ณผ ์งˆ๋ฌธ์„ ํ•˜์‹ค์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • HTML ๊ธฐ์ดˆ๋ฅผ ํ•™์Šตํ•œ ๋ถ„

  • CSS ๊ธฐ์ดˆ๋ฅผ ํ•™์Šตํ•œ ๋ถ„

  • ์›นํŽ˜์ด์ง€์— ๋™์  ํšจ๊ณผ๋ฅผ ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ์€ ๋ถ„

  • ์›นํผ๋ธ”๋ฆฌ์…”๋กœ ์ทจ์—…ํ•˜๊ณ  ์‹ถ์€ ๋ถ„

  • ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ๊ฟˆ๊พธ๋Š” ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • HTML

  • CSS

์•ˆ๋…•ํ•˜์„ธ์š”
์ด์ง€์›น์ž…๋‹ˆ๋‹ค.

2,711

๋ช…

์ˆ˜๊ฐ•์ƒ

58

๊ฐœ

์ˆ˜๊ฐ•ํ‰

4

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

11

๊ฐœ

๊ฐ•์˜

โ–  [ํ˜„์žฌ] ๊ทธ๋ฆฐ์ปดํ“จํ„ฐ์•„ํŠธํ•™์› ์›นํผ๋ธ”๋ฆฌ์‹ฑ, ํ”„๋ก ํŠธ์—”๋“œ ๊ฐ•์˜
โ–  [ํ˜„์žฌ] ์›น ํผ๋ธ”๋ฆฌ์‹ฑ ์œ ํŠœ๋ธŒ ์ฑ„๋„ 'Rock's Easyweb' ์šด์˜
โ–  ๋”์กฐ์€ ์ปดํ“จํ„ฐ์•„์นด๋ฐ๋ฏธ ์›น ํผ๋ธ”๋ฆฌ์‹ฑ ๊ฐ•์‚ฌ
โ–  ํ•œ๋น› ์ปดํ“จํ„ฐ์•„์นด๋ฐ๋ฏธ ์›น ํผ๋ธ”๋ฆฌ์‹ฑ ๊ฐ•์‚ฌ
โ–  ํ”„๋ก ํŠธ์—”๋“œ ํผ๋ธ”๋ฆฌ์…”, ํ”„๋ก ํŠธ์—”๋“œ ํผ๋ธ”๋ฆฌ์‹ฑ ์ „๋ฌธ๊ฐ•์‚ฌ
โ–  UI/UX ์›น ๋””์ž์ธ ํฌํŠธํด๋ฆฌ์˜ค ๊ฐ•์˜


[ ๋„์„œ ]
2021.07.19 ์ถœ๊ฐ„ / ์›น๋””์ž์ธ & ์›นํผ๋ธ”๋ฆฌ์‹ฑ์„ ์œ„ํ•œ ํ”ผ๊ทธ๋งˆ ์™„๋ฒฝ ํ™œ์šฉ์„œ / ๋น„์ œ์ดํผ๋ธ”๋ฆญ

2022.08.25 ์ถœ๊ฐ„  / ์ฝ”๋”ฉ์„ ์ฒ˜์Œ์ด๋ผ with ์›น ํผ๋ธ”๋ฆฌ์‹ฑ  / ์˜์ง„์ถœํŒ์‚ฌ

2023.10 ์ถœ๊ฐ„ /2024 SD์—๋“€ ์œ ์„ ๋ฐฐ ์›น๋””์ž์ธ๊ธฐ๋Šฅ์‚ฌ ์‹ค๊ธฐ ๊ณผ์™ธ๋…ธํŠธ / ์‹œ๋Œ€๊ณ ์‹œ๊ธฐํš

2024.11 ์žฌํŒ /2025 SD์—๋“€ ์œ ์„ ๋ฐฐ ์›น๋””์ž์ธ๊ธฐ๋Šฅ์‚ฌ ์‹ค๊ธฐ ๊ณผ์™ธ๋…ธํŠธ / ์‹œ๋Œ€๊ณ ์‹œ๊ธฐํš

 

[ ์ˆ˜์ƒ๊ฒฝ๋ ฅ ]
2022.08 ๊ทธ๋ฆฐ์ปดํ“จํ„ฐ ์•„ํŠธ ํ•™์› ์ข…๋กœ์ง€์  - ์šฐ์ˆ˜๊ฐ•์‚ฌ 2021.06 ๊ทธ๋ฆฐ์ปดํ“จํ„ฐ ์•„ํŠธ ํ•™์› ์ข…๋กœ์ง€์  - ์šฐ์ˆ˜๊ฐ•์‚ฌ 2018.06 ๊ทธ๋ฆฐ ์ปดํ“จํ„ฐ์•„์นด๋ฐ๋ฏธ ์‹ ์ดŒ ์ง€์  - ์šฐ์ˆ˜๊ฐ•์‚ฌ 2017.05 ๊ทธ๋ฆฐ ์ปดํ“จํ„ฐ์•„์นด๋ฐ๋ฏธ ์‹ ์ดŒ ์ง€์  - ์šฐ์ˆ˜๊ฐ•์‚ฌ 2016.05 ๊ทธ๋ฆฐ ์ปดํ“จํ„ฐ์•„์นด๋ฐ๋ฏธ ์‹ ์ดŒ ์ง€์  - ์šฐ์ˆ˜๊ฐ•์‚ฌ 2015.10 ๊ทธ๋ฆฐ ์ปดํ“จํ„ฐ์•„์นด๋ฐ๋ฏธ ์‹ ์ดŒ ์ง€์  - ์šฐ์ˆ˜๊ฐ•์‚ฌ 

 

 

 

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

11๊ฐœ โˆ™ (4์‹œ๊ฐ„ 37๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

1๊ฐœ

5.0

1๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

  • mr.nobody๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€
    mr.nobody

    ์ˆ˜๊ฐ•ํ‰ 7

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    100% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    ์ข‹์€๊ฐ•์˜ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

    ์ด์ง€์›น๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

    ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

    ๋น„์Šทํ•œ ๊ฐ•์˜

    ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

    โ‚ฉ14,300