12์ ๊ฒฐ์ฐ
Dec 07, 2020
์ฐ๋ฑํ๋ ๋ฐ ๋๋ฌด ์กธ๋ ค์ ๊ธ์ด๋ ์ธ๊น ์๊ฐํ๋ค.
์ง๊ธ ์ด๋ค ๊ณต๋ถ๋ฅผ ํ๊ณ ์๋์ง ์ ์ด๋ณด๋ ค๊ณ ํ๋ค.
1-1. ์น ๊ณต๋ถ
์น์ ๊ด์ฌ์ด ๊ฐ์ 2020๋ ์๋ฐ๊ธฐ ๋์ ์ด๊ฒ์ ๊ฒ ๋ง์ด ์ค์ ๋ดค์๋ค. ์ด๋์ ๋ ์น๊ณผ ์นํด์ก์ ์ฆ์ ๋ฐฉํ๋์ ๋ํ๊ต ์ ์ฐํ์์ ํ๊ต ์ปค๋ฎค๋ํฐ ์ฌ์ดํธ๋ฅผ ๋ฆฌ๋ชจ๋ธ๋ง ํ๋ ์์ ์ ํ๋ค๊ธธ๋ ๋ฌด์์ ์ง์ํด์ ์ค๋ฌด๋ฅผ ํ๋ฉฐ ๋ฐฐ์ ๋ค. ๋ฌดํฑ๋๊ณ ์์์ ๋ถ๋ ค์ ์ผ๋ค๊ฐ ์๋ฌด๊ฒ๋ ๋ชจ๋ฅด๋ ๋ฐฑ์๋์ ๋ฐฐ์ ์ด ๋์๋๋ฐ, ๋ญ๊ฐ ๋ญ์ง ํ๋๋ ๋ชป ์์ ๋ค์ด์ ๊ทธ๋ฅ ๊ตฐ๋๋ฅผ ์๋ฒ๋ ธ๋ค(์ธ๊ณผ๊ด๊ณ๊ฐ ์ด์ํ ๊ฒ ๊ฐ์ง๋ง ๊ทธ๋ฅ ๋์ด๊ฐ์). ๋ด ์ค์ค๋ก ์์ง ์ฒด๊ณ์ ์ผ๋ก ์ ๋ฆฌ๋์ด์์ง ์๊ณ ์ง์๋ ๋ง์ง ์๋ค๊ณ ํ๋จํด ์ฒซ๊ฑธ์๋ถํฐ ์ฐจ๊ณก์ฐจ๊ณก ๊ณต๋ถํ๊ณ ์๋ค.
ํ์ฌ, HTML 101 ์ ๋๊ณ , CSS ๊ตฌ์กฐ์ styling ์ ๊ณต๋ถํ๊ณ ์๋ค. ๊ณต๋ถํ๋ ๋์์, github page ๋ฅผ ์ฐ๋ํด์ ๋ด ์น์ฌ์ดํธ๋ฅผ ํ๋ํ๋ ๋ง๋ค์ด๋๊ฐ๊ณ ์๋ค. CSS ๋ฅผ ์ฐจ๊ทผ์ฐจ๊ทผ ๋ค ๊ณต๋ถํ๊ณ ๋์, javascript ๋ฅผ ๋ฐฐ์ client-side dynamic website ๋ฅผ ์์ฑ์ํค๋ ๊ฒ์ด ๋ด 12์์ ๋ชฉํ์ด๋ค.
์ด ์ฌ์ดํธ๊ฐ ๋ด ๊ตฐ์ํ์ ์ ๋ฆฌํ๋ ๊ณต๊ฐ์ด ๋ ๊ฒ์ด๋ค.
1-2. ๋คํธ์ํฌ ๊ณต๋ถ
์น์ ๊ณต๋ถํ๋ฉด์, ๊ทธ๋ฆฌ๊ณ ๋ด ๋ณด์ง์ ์ํํ๋ฉด์ ์์ฐํ ๋คํธ์ํฌ์ ๋ํด ๋ฐฐ์ฐ๊ฒ ๋์๋ค. ๊ตฐ๋์์ ์ฐ๋ ๋คํธ์ํฌ ์์คํ ์ ์ ์ง๊ด๋ฆฌ ํ๋ฉด์ ๊ฐ ์ฅ๋น์ ํต์ ๊ณผ์ ์ ๋ํด ๋ฐฐ์ฐ๊ณ ์๋ค. ๋คํธ์ํฌ์ ๋ํ ๊ฐ๋ ์ ์ก์๊ฐ๋ ์ค์ด๋ค.
2-1. ์์ ๊ณต๋ถ (๊ณ ์ํ ๊ทธ๊ฑฐ)
์์ ์ ๋ํด ์๋ฌด๊ฒ๋ ๋ชจ๋ฅธ๋ค๊ณ ์ ์ ์ ์ด ์๋ค. ์ด๋ฅผ ํํ! ํ๊ณ ์ ์์ ๊ณต๋ถ๋ฅผ ํด๋ณด๋ ค๊ณ ํ๋ค. ์ด๋์๋ถํฐ ์์ํ ์ง ๋ชฐ๋ผ ์ด๊ฒ์ ๊ฒ ๋ค์ค์ ๋ณด๋ฉฐ ๊ธฐ๋ณธ์ ์ธ grasp ๋ฅผ ์ฐพ๊ณ ์๋ค.
music theory 101์ ๊ฒ์ํด์ ์ด๊ฒ์ ๊ฒ ์ฝ์ด๋ณด๊ณ ์๋ค. 12์ ๋ถํฐ ๊ณต๋ถํ๊ธฐ ์์ํ๋ค. ํ์ฑํ๋ ๋์์ ๊ณต๋ถํ๋ฉด์ ์ฌ๋ฌ ์ ๋ณด๋ค์ ์ฝ์ด๋ณด๊ณ ์๋ค.
2-2. ์์ ๊ณต๋ถ (์์ฆ ์๋ ์์ )
๋ ธ๋๋ฅผ ์ ๋ถ๋ฅด๊ณ ์ถ๋ค. ๋ด๊ฐ ์ข์ํ๋ ์์ ์คํ์ผ์ ์๊ณ ์ถ๋ค. ๊ทธ๋์ ๋ ธ๋๋ฅผ '๋งค์ฐ' ๊ฐ๊น์ด ํ๊ณ ์๋ค.
์ํ๊ด์ ๊ธฐ๊ฐ์ง๋๋ ์ธ ๊ฒธ ์ง๋ ๋ฎค์ง์ ์ ๊ธฐ๊ตฌ๋ ํด์ ์ฌ๋ฌ๊ฐ์ง ์์ ์ ๋ฃ๊ณ ์๋ค. ์ฌํ์์๋ ์ ๋ ๋ชป๊ฐ ๋ ธ๋๋ฐฉ๋ ์๋ด์ ์์ด์ ์๊ฐ ๋ ๋๋ง๋ค ๋ ธ๋๋ฅผ ๋ถ๋ฅด๋ฌ ๊ฐ๋ค. ๋งค๋ฒ ๊ฐ ๋๋ง๋ค ๋ค๋ฅธ ๋ ธ๋๋ฅผ ๋ถ๋ฌ์ ๋ด๊ฐ ์ด๋ ๋ ธ๋๋ฅผ ๋ถ๋ฅผ ์ ์๋์ง ํ ์คํธ ์ค์ด๋ค.
์, ๊ทธ๋ฆฌ๊ณ ์ฌ๋ด์ผ๋ก ๋ด ๊ทผ๋ฌด์ง๋ ์์์ด ๋ง์ ๋ฐฉ์์ด ์ ๋๋ ๊ณณ์ด๋ค. ๊ทธ๋์ ํผ์์ ๊ทผ๋ฌด ๋๊ธฐ, ๊ด์ ๋ฑ์ ํ ๋ ๋ฌธ ๊ฝ ๋ซ์ ๋๊ณ ๋๋ง์ ๊ณต์ง ์ฝ๋ ธ๋ฅผ ์ฆ๊ธด๋ค. ์์ธ๋ก ์ด ์๊ฐ์ด ๋๊ฒ ๋ง์์ ๊ฐ๊ฐ์ด ์คํธ๋ ์ค๋ฅผ ํผ๋ค. 2-1 ์์ ๊ณต๋ถ๋ฅผ ํ๋ฉฐ ๋ด ์์ญ๋๋ฅผ ์ฐพ๊ณ , ๋ ธ๋๋ค์ ๋ด ์์ญ๋์ ๋ง์ถฐ ํธ๊ณกํ์ฌ ๋ถ๋ฅด๋ ๊ฒ์ด ๋ชฉํ์ด๋ค.
- ์ปคํผ
ํฌํฌ ์ฐ๋ฆฌ ๊ฐ๋ถ๋์ด ์ปคํผ๋ฅผ ์ข์ํ์ ์, ์ฐ๋ฆฌ ๊ทผ๋ฌด์ง์๋ ๋๋ฆฝ ์ปคํผ๋ฅผ ์ํ ๋นํ๋ค์ด ์๋น(!)๋์ด ์๋ค. ๋ฏธ๋ฆฌ ๋ณถ์ ๋์ ์ปคํผ์ฝฉ์ ๋งค์ผ ์ง์ ๊ฐ์์ ๋ด๋ ค ๋จน๋๋ค. ์์ง ์งฌ์ด ์ฐจ์ง ์์ ๋ด๊ฐ ์ง์ ๋ด๋ฆฌ์ง ์์ง๋ง, ์ญ์ ๊ฐ ๋ง๋ ์ปคํผ๋ ์ ๋ง ๋ง์๋ค. ์์คํ๋ ์ ํฌํธ๊ฐ ํ๋ ์์ผ๋ฉด ์ข์ผ๋ จ๋ง.. ์ฌํ์์ ๋จน๋ ์์คํ๋ ์๊ฐ ๋๋ฌด ๊ทธ๋ฆฝ๋ค. (ํน์ฌ๋ ์ด๊ฒ ํ์ธ๋ก ๋๊ปด์ง๋ ์ฌ๋๋ค์ด ์๋ค๋ฉด! ๊ผญ ์ปคํผ์ ๊ฐ์ ์์คํ๋ ์ 1์์ ๊ฐ์คํ ํ๋ ๋ฑ ๋ น์ฌ์ ์์ท์ผ๋ก ๋ฑ ๋จน์ด๋ด๋ผ. ํ์ผ ์๋ฉ๋ฆฌ์นด๋ ธ ์ ๋ฆฌ ๊ฐ๋ผ๋ค.)
- ๊ธ๊ณต๋ถ
๊ฐ์ฅ ๊ฒ์๋ฆฌํ๊ณ ์๋ ๊ฒ ์ค ํ๋๋ค. ์์ฆ ํ๋ จ์์์ ์ฐ๋ ์ผ๊ธฐ๋ ์์ฐ๊ณ , ์ฐ๋ฌธ๋ ๊ธฐ๋ถ ๊ฟ๊ฟํ ๋๋ง ์ด๋ค. ์ฐ๋ฑ ๋ ์๊ฐ์ ๊ผญ ๋ด์ ์จ์ผ๊ฒ ๋ค. ์ด๊ฒ๋ ์น์ฌ์ดํธ๊ฐ ๋ค ๋ง๋ค์ด์ง๋ฉด ๊ทธ ๊ณณ์ ์ ์ด๊ฐ๋ฉฐ ์คํํ ์๊ฐ์ด๋ค.
- ๋ ์
์ด๊ฒ ๋ํ ๋งค~์ฐ ๊ฒ์๋ฆฌ ํ๊ณ ์๋ค. ์ฑ ์ ์ฝ์ ์๊ฐ์ ํด๋ํฐ์ ํ๊ฑฐ๋, ์ปดํจํฐ ๊ณต๋ถ๋ฅผ ํ๊ฑฐ๋, ์์ ์ ๋ฃ๋๋ค. ์๊ฐ์ ์ ํด์ ์ฐจ๊ณก์ฐจ๊ณก ํด์ผ ๊ฒ ๋ค.
- ์ด๋
์ด๊ฒ ๋ํ ๋งค~์ฐ ๊ฒ์๋ฆฌ ํ๊ณ ์๋ค. ใ ใ 11์์ ํ๊ฐ ํ๋ จ์ด ์์ด์ ๊ทธ๊ฑฐ ์ค๋นํ๋ ๊ธฐ๊ฐ๋์ ์ด๋์ ์ฌ๊ณ , ๊ทธ๊ฒ ๋๋์ ๋ง์ ์ฐ๋ฆฌ ๋ถ๋ ๋๊ท๋ชจ ์ ์ฐ ์์ ์ด ์์๋ค. ๊ฑฐ๊ธฐ๋ค, ๋ถ์นจ๋ฒ๊ณผ ๋น์ทํ ํต์ ๊ทผ๋ฌด๋ ์ถ๊ฐ๋์ด ์ ์ด ๋ถ์กฑํด์ง๊ณ ์๋ ์ํฉ์ด๋ค. ๋นจ๋ฆฌ ๋ชธ์ ์ถ์ค๋ฆฌ๊ณ ์ด๋์ ๋ค์ ์์ํ ๊ฒ์ด๋ค.
Comments
์ฒซ ๋๊ธ์ ๋จ๊ฒจ๋ณด์ธ์!