Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

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

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

8๋ช… ์ด ์ˆ˜๊ฐ•ํ•˜๊ณ  ์žˆ์–ด์š”.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[์›น ๊ฐœ๋ฐœ, ํ”„๋ก ํŠธ์—”๋“œ] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

  • HTML

  • CSS

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

2,318

๋ช…

์ˆ˜๊ฐ•์ƒ

37

๊ฐœ

์ˆ˜๊ฐ•ํ‰

2

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

8

๊ฐœ

๊ฐ•์˜

โ–  [ํ˜„์žฌ] ๊ทธ๋ฆฐ์ปดํ“จํ„ฐ์•„ํŠธํ•™์› ์›นํผ๋ธ”๋ฆฌ์‹ฑ, ํ”„๋ก ํŠธ์—”๋“œ ๊ฐ•์˜
โ–  [ํ˜„์žฌ] ์›น ํผ๋ธ”๋ฆฌ์‹ฑ ์œ ํŠœ๋ธŒ ์ฑ„๋„ '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๋ถ„)

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

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

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!