๐Ÿ”ฅ YOUTUBE_clone 1ํŽธ

์œ ๋ฆผยท2022๋…„ 7์›” 24์ผ
0

๐Ÿ’กdding's TIL

๋ชฉ๋ก ๋ณด๊ธฐ
7/41
post-thumbnail

์˜ค๋Š˜ ์ผ์š”์ผ์ด๋ผ์„œ ๊ตํšŒ๋‹ค๋…€์˜ค๊ณ 
๊ตํšŒ์–ธ๋‹ˆ ์ถ•๊ฐ€ ๋„์™€๋‹ฌ๋ผ๊ณ ํ•˜์…”์„œ ์—ฐ์Šตํ•˜๊ณ  ์ง‘์™€์„œ ์—„๋งˆ์•„๋น  ๋ฐฅ๋„ ์ฐจ๋ ค๋“œ๋ฆฌ๊ณ 
๋ฟŒ๋“ฏํ•˜๊ฒŒ ์ฝ”๋”ฉ์„ ์‹œ์ž‘ํ•˜๋ ค๋Š”๋ฐ
๊ธ‰ํ•˜๊ฒŒ ๋„์™€๋“œ๋ ค์•ผํ•  ์ผ์ด ์ƒ๊ฒจ์„œ ์•„๋น ๊ฐ€ ๋„์›€์ด ํ•„์š”ํ•ด์„œ
๋„์™€๋“œ๋ฆฌ๋‹ˆ ํ•˜๋ฃจ๊ฐ€ ์ €๋… 10์‹œ...์˜€๋‹คใ…œ

๊ทธ๋ž˜๋„ ์ฐจ๋งˆ ์–‘์‹ฌ์ƒ vscode๋ฅผ ์ผœ์ง€์•Š๊ณ  ํ•˜๋ฃจ๋ฅผ ๋ณด๋‚ผ ์ˆ˜ ์—†์–ด์„œ
๋Ÿฌํ”„ํ•˜๊ฒŒ ๋งŒ๋“ค์–ด ๋†“์•˜๋˜ youtube ํด๋ก ์ฝ”๋”ฉํ•˜๋˜ ํŒŒ์ผ์„ ๋‹ค์‹œ ์—ด์—ˆ๋‹ค๐Ÿ”ฅ

์˜ค๋Š˜ ๋” ์ง„ํ–‰ํ•œ ๋ถ€๋ถ„!

1. style์ด ์ด์ƒํ•˜๋˜ ๋ถ€๋ถ„๋“ค์„ css์—์„œ ๋‹ค์‹œ ๊ณ ์ณ์ฃผ๊ธฐ

: padding๊ฐ’, ์žˆ์œผ๋ฉด ์•ˆ๋  ๊ณณ์— background-color๊ฐ€ ์žˆ์–ด์„œ ์—†์• ๋ ค๋Š”๋ฐ ์†์„ฑ๊ฐ’ ๋„ฃ์–ด์ค€์ ๋„ ์—†๋Š”๋ฐ ์—†์–ด์ง€์ง€์•Š์•„์„œ ์—†์• ๋Š”๋ฐ ํ•œ์ฐธ ๊ฑธ๋ ธ๋‹คใ…œ, font๊ฐ’ ์กฐ์ ˆ ๋“ฑ๋“ฑ 

2. ์‹ค์ œ ๋ชจ๋ฐ”์ผ ์œ ํŠœ๋ธŒ ํŽ˜์ด์ง€์—๋Š” "๋Œ“๊ธ€"๋ณด๋Š” ๋ถ€๋ถ„์ด ์žˆ์–ด์„œ html, css ์ถ”๊ฐ€

: html์—์„œ ๋‹ค์‹œ ๊ตฌ์กฐ์žก์•„์ฃผ๊ณ , css๊ฐ’ ๋„ฃ์–ด์ฃผ๊ธฐ, ์ ๋‹นํ•œ img๊ฐ’ ์ฐพ์•„์„œ ๋„ฃ์–ด์ฃผ๊ธฐ 

3. js๋กœ ์œ ํŠœ๋ธŒ ์˜์ƒ title์˜ toggle๋ถ€๋ถ„ ๋ฒ„ํŠผ ๋ˆ„๋ฅด๋ฉด ์—ด๋ฆด ์ˆ˜ ์žˆ๋„๋ก js ์ถ”๊ฐ€ + ๋ฒ„ํŠผ transition์ถ”๊ฐ€ํ•ด์ฃผ๊ธฐ

: ํ•ด๋ดค๋˜ ๋ถ€๋ถ„์ธ๋ฐ๋„ ๋ถˆ๊ตฌํ•˜๊ณ  classlist๋ฅผ ๋„ฃ์–ด์„œ ์ง„ํ–‰ํ•˜๋Š”๊ฒŒ ์•„์ง์€ ์ต์ˆ™ํ•˜์ง€ ์•Š์•„์„œ ์—ฐ์Šต์„ ๋งŽ์ด ํ•ด๋ด์•ผ๊ฒ ๋‹ค (DOM ํ™”์ดํŒ…)

๋” ๋ณด์™„ํ•ด์•ผํ•  ๋ถ€๋ถ„!

  1. ์ถ”์ฒœ์˜์ƒ ๋ถ€๋ถ„ ์œ„์น˜ ์กฐ์ •ํ•ด์ฃผ๊ธฐ
  2. 1๋ฒˆ์— ๋”๋ถˆ์–ด ๋ฐ˜์‘ํ˜•์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ๊ธฐ
  3. video๋ถ€๋ถ„์„ ์‹ค์ œ ์ ๋‹นํ•œ ์‚ฌ์ด์ฆˆ์˜ video๋กœ ์ˆ˜์ •ํ•ด์ฃผ๊ธฐ
profile
ษช สœแดแด˜แด‡ แด›แด sแดสŸแด แด‡ ส€แด‡แด€สŸ แด˜ส€แดส™สŸแด‡แดs๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ปโค๏ธ

0๊ฐœ์˜ ๋Œ“๊ธ€