์๋ ํ์ธ์ ๋ถ์คํฐ์ฝ์ค 3๊ธฐ ์ํฌํฐ์ฆ ํ๋ธ์ ๋๋ค. ๐ฟ
๋ถ์คํฐ์ฝ์ค๋?
์ปค๋ฅํธ์ฌ๋จ์ ๋ค์ด๋ฒ๊ฐ ์ค๋ฆฝํ ๋น์๋ฆฌ ๊ต์ก ์ฌ๋จ์
๋๋ค.
์ํํธ์จ์ด ๊ฐ๋ฐ์ ์์ฑ ๊ต์ก ํ๋ก๊ทธ๋จ, ๋ถ์คํธ์ฝ์ค์ ํจ๊ป
๋น์ ์ ๊ฐ๋ฐ ์ปค๋ฆฌ์ด๋ฅผ ์
๊ทธ๋ ์ด๋ํ์ธ์!
์ ํฌ์คํ ์ ๊ฐ์ ๋ด ์๊ฐํด๋ณด๊ธฐ์ ์์ ์์ ๋ค๋ฃจ๋ ์ฝ๋๋ฅผ ์ง์ ํฌ๋กฌํ๋ฉด์์ ํ์ธ ํด๋ณผ ์ ์๋๋ก ์งํํฉ๋๋ค. ๊ด๋ จ๋ ๊ฐ๋ ๊ณผ ๊ฐ์๋ ํจ๊ป ์ฌ๋ ค๋๋ฆฌ๋ ๋งํฌ์์ ํ์ธํด๋ณด์ค ์ ์์ต๋๋ค.
www.boostcourse.org/cs124/joinLectures/52258
์๋ฐ์คํฌ๋ฆฝํธ์ ์์
๋ถ์คํธ์ฝ์ค ๋ฌด๋ฃ ๊ฐ์
www.boostcourse.org
ํด์ค
HTML๋ก๋ ์น์ ๋ด์ฉ์ ์์ฑํ๊ณ , CSS๋ก๋ ์น์ ๋์์ธํ๋ฉฐ, ์๋ฐ์คํฌ๋ฆฝํธ๋ก๋ ์น์ ๋์์ ๊ตฌํํ ์ ์์ต๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฃผ๋ก ์น ๋ธ๋ผ์ฐ์ ์์ ์ฌ์ฉ๋ฉ๋๋ค.
ํด์ค
<script> ํ๊ทธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ฐ์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋ ์คํฌ๋ฆฝํธ(client-side scripts)๋ฅผ ์ ์ํ ๋ ์ฌ์ฉํฉ๋๋ค.
<script> ์์๋ ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์์ ๋ด๋ถ์ ์ง์ ๋ช ์ํ๊ฑฐ๋, src ์์ฑ์ ์ฌ์ฉํ์ฌ ์ธ๋ถ ์คํฌ๋ฆฝํธ ํ์ผ์ ์ฐธ์กฐํ ์ ์์ต๋๋ค. ํ์ง๋ง src ์์ฑ์ด ๋ช ์๋ <script> ์์์๋ ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์ง์ ๋ช ์ํด์๋ ์ ๋ฉ๋๋ค.
ํด์ค
onkeydown ์ด๋ฒคํธ๋ ํค๋ฅผ ๋๋ ์ ๋ ๋ฐ์ํ๊ณ ๋ฌผ๋ฆฌํค์ ๋ฐ์ํฉ๋๋ค. ํ์ฌ ๋๋ฆฐ ๋ฌธ์์๋ ์๊ด์์ด ๋ฌผ๋ฆฌ์ ์ธ ํค์๋ง ๋ฐ์ํฉ๋๋ค. ๋ง์ฐ์ค ํด๋ฆญํ์ ๋์ ์ด๋ฒคํธ๋ onmouseXXX๋ก ์์ํฉ๋๋ค.
ํด์ค
JavaScript์์ + ์ฐ์ฐ์๊ฐ ๋ฌธ์์ด(string) ๊ฐ๊ณผ ํจ๊ป ์ฌ์ฉ๋ ๋์ด๋ฅผ ๋ณํฉ(concatenation) ์ฐ์ฐ์๋ผ๊ณ ํฉ๋๋ค. ์๋ก ์ฐ๊ฒฐํ์ฌ ๋ค๋ฅธ ๋ฌธ์์ด์์ ์ ๋ฌธ์์ด์ ๋ง๋ค ์ ์์ต๋๋ค.
ํด์ค
var๋ฌธ์ ๋ณ์๋ฅผ ์ ์ธํ๊ณ , ์ ํ์ ์ผ๋ก ์ด๊ธฐํํ ์ ์์ต๋๋ค.
var x = 1;
if (x === 1) {
var x = 2;
console.log(x);
// expected output: 2
}
console.log(x);
// expected output: 2
ํด์ค
HTML์์ ์คํ์ผ์์ฑ ์ด์ฉํ๋ฉด CSS์ ์์ฑ์ ํ๊ทธ์ ์ง์ ์ค์ ํ ์ ์์์ต๋๋ค.
JavaScript์์๋ ๋น์ทํ๊ฒ ์ฟผ๋ฆฌ์
๋ ํฐ๋ก ๊ฐ์ ธ์จ ๋
ธ๋์์ style์์ฑ์ ์ฐธ์กฐํ๋ฉฐ CSS ์์ฑ์ ์ ์ฉ์ํฌ ์ ์์ต๋๋ค.
CSS์์ ์ฌ๋ฌ ๋จ์ด๋ก ์ด์ด์ง ์์ฑ์ -๋ก ๊ตฌ๋ถ๋์๋๋ฐ(ex. background-color), JavaScript์์๋ -๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๋ค์ ๋จ์ด๋ฅผ ๋๋ฌธ์๋ก ์ฌ์ฉํ๋ฉฐ(Camel Case) ์ ๊ทผํฉ๋๋ค. (ex. backgroundColor)
ํด์ค
link ํ๊ทธ๋ฅผ ํตํด ์ธ๋ถ css ํ์ผ์ ๊ฐ์ ธ์ค๋ ๋ฐฉ๋ฒ๋ ์์ง๋ง style ํ๊ทธ๋ฅผ ํตํด ๋ด๋ถ์์ ์คํ์ผ์ ์ง์ ํ ์ ์์ต๋๋.
ํด์ค
.์ ํ์๋ ํด๋์ค ์ ํ์๋ฅผ ์๋ฏธํ๊ณ #์ ํ์๋ Id ์ ํ์๋ฅผ ์๋ฏธํฉ๋๋ค. #first๋ id = "first"๋ฅผ ๊ฐ์ง ์์์ ๋ํ ์คํ์ผ์ ์ง์ ํด์ค๋๋ค.
ํด์ค
cascading์ CSS์ ์คํ์ผ ๊ท์น๋ค์ด ์ ์ฉ๋๋ ๋จ๊ณ์ ์ธ ๊ท์น์ ๋ปํฉ๋๋ค.
cascading ๊ท์น์ 3๊ฐ์ง๋ก 1. ์ค์๋์ ์ถ์ฒ 2. ๊ตฌ์ฒด์ฑ 3. ์ ์ธ ์์์ ๋๋ค.
id ์ ํ์๋ ํ๊ทธ ์ ํ์๋ณด๋ค ๊ตฌ์ฒด์ ์ด๋ฏ๋ก id ์ ํ์๋ฅผ ์ด์ฉํ ์คํ์ผ ์์๊ฐ ์ ์ฉ๋ ๊ฒ ์ ๋๋ค.
๋ค ํจ๊ป ๋ฐฐ์ฐ๊ณ ์ฑ์ฅํ๋ ๋ถ์คํธ์ฝ์ค
๋ถ์คํธ์ฝ์ค(boostcourse)๋ ๋ชจ๋ ํจ๊ป ๋ฐฐ์ฐ๊ณ ์ฑ์ฅํ๋ ๋น์๋ฆฌ SW ์จ๋ผ์ธ ํ๋ซํผ์ ๋๋ค.
www.boostcourse.org
hhhminme - Overview
๊พธ์คํ ๊ณต๋ถ์ค์ธ ์ด๋ณด ๊ฐ๋ฐ์์ง๋ง์ hub@kakao.com. hhhminme has 12 repositories available. Follow their code on GitHub.