์ฝ”๋”ฉ

๐Ÿ“š ์ง€์‹ ์ฑ„์šฐ๊ธฐ/์›น (ํ”„๋ก ํŠธ์—”๋“œ, ๋ฐฑ์—”๋“œ)

[Deep Dive Javascript] WEEK 1

4๊ฐ• 4-1 [ โ—๏ธ ] Q. undefined์™€ null์˜ ์ฐจ์ด A. undefined : var ํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธ๋œ ๋ณ€์ˆ˜์— ์•”๋ฌต์ ์œผ๋กœ ํ• ๋‹น๋˜๋Š” ๊ฐ’ null : ๊ฐ’์ด ์—†๋‹ค๋Š” ๊ฒƒ์„ ์˜๋„์ ์œผ๋กœ ๋ช…์‹œํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ’ 4-2 [โ“] p.44~ 45 console.log(score); // undefined var score = 80 ; // ๋ณ€์ˆ˜ ์„ ์–ธ๊ณผ ๊ฐ’์˜ ํ• ๋‹น console.log(score); // 80 Q. ์„ ์–ธ๊ณผ ํ• ๋‹น ๋”ฐ๋กœ๋”ฐ๋กœ๋‹ˆ๊นŒ ์•ž์—์„œ undefined ๋กœ ๊ณต๊ฐ„ ํ™•๋ณด โžก๏ธ ํ›„์— ๋ณ€์ˆ˜ ์„ ์–ธ์œผ๋กœ ๊ณต๊ฐ„์ฐจ์ง€ โžก๏ธ ๊ฐ’ ํ• ๋‹น์œผ๋กœ ์ƒˆ๋กญ๊ฒŒ ๊ณต๊ฐ„ ํ™•๋ณด ํ›„ 80 ํ• ๋‹น? 4-3 [โ“] p. 45 โžก๏ธ ์˜ˆ์ œ 4-10 console.log(score); // undefined score = 80 ; // ๊ฐ’์˜ ํ• ๋‹น var ..

๐ŸŒฑ ์ฝ”๋ฆฐ์ด๋ฅผ ์œ„ํ•œ GUIDE/๐Ÿ—‚๏ธ OpenSource

11 HTML ๊ณผ CSS๋กœ ํšŒ์›๊ฐ€์ž… ํผ ๋งŒ๋“ค๊ธฐ + ๊ทธ๋ฆผ์žํšจ๊ณผ ๋„ฃ๊ธฐ

HTML ๊ณผ CSS๋กœ ํšŒ์›๊ฐ€์ž… ํผ ๋งŒ๋“ค๊ธฐ ์„ธ ๋ฒˆ์งธ ํšŒ์› ๋งŒ๋“ค๊ธฐ ํผ์ด๋‹ค. ํšŒ์› ๋งŒ๋“ค๊ธฐ ํผ์— CSS๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒƒ์€ ์ฒ˜์Œ์ธ๋ฐ ์ƒ๊ฐ๋ณด๋‹ค ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜์ง€ ์•Š๋‹ค. ์ด๋ ‡๊ฒŒ ์ ์  ์„ฑ์žฅ ํ•˜๋Š” ๊ฑธ๊นŒ?๐Ÿฅฐ ๋ณ„ ๊ฑฐ ์•„๋‹ˆ์ง€๋งŒ ๋ฟŒ๋“ฏํ•˜๋‹ค. ๋‚˜์ค‘์— ๋” ๋งŽ์€ ๊ธฐ๋Šฅ์„ ๋„ฃ๊ณ  ์ง€๊ธˆ ๋งŒ๋“  ๊ฒƒ๊ณผ ์ฝ”๋“œ๋ฅผ ๋น„๊ตํ•˜๋ฉฐ ๊ฐœ์„ ํ•˜๋ฉด ์ข‹์„ ๋“ฏ ํ•˜๋‹ค. ๐Ÿ’ก ์ด์ „์— ์ž‘์„ฑํ•œ ํšŒ์›๊ฐ€์ž… ํผ๊ณผ ๋น„๊ตํ•ด๋ณด์„ธ์š”. ์ฒซ ๋ฒˆ์งธ ํšŒ์›๊ฐ€์ž… ํผ (ํด๋ฆญ) ๋‘ ๋ฒˆ์งธ ํšŒ์›๊ฐ€์ž… ํผ (ํด๋ฆญ) ์ฝ”๋“œ ์–‘์ฝฉ ์ฝ”๋”ฉ์Šค์ฟจ ํšŒ์›๊ฐ€์ž… - - 00000000 ์ธ์ฆ๋ฒˆํ˜ธ์ „์†ก 3:00 ์ธ์ฆ์™„๋ฃŒ ์ง€์—ญ์„ ์„ ํƒํ•˜์„ธ์š”. ์„œ์šธ ๊ฒฝ๊ธฐ๋„ ์ œ์ฃผ ์ถฉ์ฒญ๋„ ์ „๋ผ๋„ ๊ฒฝ์ƒ๋„ ์—ฌ์„ฑ ๋‚จ์„ฑ ๊ฐ€์ž…ํ•˜๊ธฐ *{ box-sizing: border-box; } body{ display: flex; flex-direction: column; align-ite..

๐ŸŒฑ ์ฝ”๋ฆฐ์ด๋ฅผ ์œ„ํ•œ GUIDE/๐Ÿ—‚๏ธ OpenSource

10 HTML๊ณผ CSS๋กœ ์‰ฝ๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ์ผ๊ธฐ์žฅ ๋งŒ๋“ค๊ธฐ

HTML๊ณผ CSS๋กœ ์‰ฝ๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ์ผ๊ธฐ์žฅ ๋งŒ๋“ค๊ธฐ ์ด์ „์— ์ž‘์„ฑํ–ˆ๋˜ ์ฝ”๋“œ๋“ค์„ ๋ฐ”ํƒ•์œผ๋กœ ์ผ๊ธฐ์žฅ์„ ๋งŒ๋“ค์–ด๋ณด์•˜๋‹ค. ์กฐ๊ธˆ ํ—ˆ์ ‘ํ•˜์ง€๋งŒ๐Ÿ˜ญ๐Ÿ˜ญ.. ๋‚˜๋ฆ„์˜ ํ‹€์€ ๊ฐ–์ถ˜ ๊ฒƒ ๊ฐ™๋‹ค. ๋‚˜์ค‘์— ๋‹ค์‹œ ๋งŒ๋“ค์–ด๋ด์•ผ์ง€! ์ฝ”๋“œ ์–‘์ฝฉ์ด์˜ ์ผ๊ธฐ ์ž‘์„ฑ ๋“ฑ๋ก ์ดˆ๊ธฐํ™” *{ box-sizing: border-box; } .box1{ border: 3px solid white; width: 400px; height: 100px; background-color: rgb(234, 247, 180); padding: 10px 80px 30px; margin-bottom: 30px; margin-top: 20px; border-radius: 10px; } .wrapper { display: flex; flex-direction: column; align-ite..

๐ŸŒฑ ์ฝ”๋ฆฐ์ด๋ฅผ ์œ„ํ•œ GUIDE/๐ŸŒ WEBSITE

CSS Diner - CSS ์ดˆ์‹ฌ์ž๋ฅผ ์œ„ํ•œ ์—ฐ์Šต ์‚ฌ์ดํŠธ

CSS Diner - CSS ์ดˆ์‹ฌ์ž๋ฅผ ์œ„ํ•œ ์—ฐ์Šต ์‚ฌ์ดํŠธ ๊ฒŒ์ž„์ฒ˜๋Ÿผ ๋งŒ๋“ค์–ด๋†”์„œ, CSS์— ๋Œ€ํ•œ ์ดํ•ด๋ฅผ ๋•๋Š”๋‹ค. ํ•˜๋‹ค๋ณด๋ฉด ์ƒ๊ฐ๋ณด๋‹ค ๊ฝค ์žฌ๋ฐŒ๋‹ค. 32 ๋‹จ๊ณ„ ๊นŒ์ง€ ์žˆ๊ณ , ์˜ค๋ฅธ์ชฝ์— ์˜์–ด๋กœ ํžŒํŠธ๊ฐ€ ์ฃผ์–ด์ง„๋‹ค. ๋‚จ๋…€๋…ธ์†Œ CSS ์ฝ”๋ฆฐ์ด์—๊ฒŒ ์ถ”์ฒœํ•œ๋‹ค. CSS Diner ๋งํฌ ํด๋ฆญ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io

์–‘์ฝฉ(Yangkong)
'์ฝ”๋”ฉ' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก