๋ฐ˜๊ฐ€์›Œ์š”! ํ—ˆ๋ธŒ์ž…๋‹ˆ๋‹ค!

์ €๋Š” ๊ฐœ๋ฐœ์ž๋ฅผ ํ˜„๋Œ€ ์—ฐ๊ธˆ์ˆ ์‚ฌ๋ผ๊ณ  ํ‘œํ˜„ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์„ ๊ณต๋ถ€ํ•˜๋ฉฐ ๋Š๋‚€ ์ ๋“ค๊ณผ ์ด์•ผ๊ธฐ๋ฅผ ๊ธฐ๋กํ•˜๋Š” ๊ณต๊ฐ„์ž…๋‹ˆ๋‹ค.

๋„ค์ด๋ฒ„ ๋ถ€์ŠคํŠธ์ฝ”์Šค/[๋ถ€์ŠคํŠธ์„œํฌํ„ฐ์ฆˆ3๊ธฐ]์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์‹œ์ž‘

[๋ถ€์ŠคํŠธ์ฝ”์Šค]์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์‹œ์ž‘ QUIZ 1 ํ•ด์„ค

mmin.h 2021. 2. 25. 14:08

์•ˆ๋…•ํ•˜์„ธ์š” ๋ถ€์Šคํ„ฐ์ฝ”์Šค 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 ์„ ํƒ์ž๋ฅผ ์ด์šฉํ•œ ์Šคํƒ€์ผ ์š”์†Œ๊ฐ€ ์ ์šฉ๋  ๊ฒƒ ์ž…๋‹ˆ๋‹ค.


www.boostcourse.org/

 

๋‹ค ํ•จ๊ป˜ ๋ฐฐ์šฐ๊ณ  ์„ฑ์žฅํ•˜๋Š” ๋ถ€์ŠคํŠธ์ฝ”์Šค

๋ถ€์ŠคํŠธ์ฝ”์Šค(boostcourse)๋Š” ๋ชจ๋‘ ํ•จ๊ป˜ ๋ฐฐ์šฐ๊ณ  ์„ฑ์žฅํ•˜๋Š” ๋น„์˜๋ฆฌ SW ์˜จ๋ผ์ธ ํ”Œ๋žซํผ์ž…๋‹ˆ๋‹ค.

www.boostcourse.org

github.com/hhhminme

 

hhhminme - Overview

๊พธ์ค€ํžˆ ๊ณต๋ถ€์ค‘์ธ ์ดˆ๋ณด ๊ฐœ๋ฐœ์ž์ง€๋ง์ƒ hub@kakao.com. hhhminme has 12 repositories available. Follow their code on GitHub.