Banner

My Tech Blog (ํ‘œํ˜„์‹)

์˜ค๋Š˜์˜ ๋ช…์–ธ
1. Object (๊ฐ์ฒด)  2. DOM (Document Object Model)2-1. DOM(๋ฌธ์„œ๊ฐ์ฒด๋ชจ๋ธ) ๋ฌธ์„œ๊ฐ์ฒด๋ชจ๋ธ(DOM) HTML CSS JS  2-2. innerHTML vs textContent ์˜ค๋Š˜์€ ๋ฌธ์„œ๊ฐ์ฒด๋ชจ๋ธ์— ๋Œ€ํ•ด์„œ ๋ฐฐ์›Œ๋ณด์•˜๋‹ค 2-3. querySelector vs getElementByID์š”์ฆ˜์—๋Š” ์–ด์ฐจํ”ผ ๋‹ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์“ฐ์ง€๋งŒ DOM ํ™œ์šฉํ•ด๋ณด๊ธฐ h1ํƒœ๊ทธ ๋‚ด์šฉ ๋ณ€๊ฒฝ a ํƒœ๊ทธ ์ƒ์„ฑ ulํƒœ๊ทธ ์ƒ์„ฑ   2-4. addEventListener ๋‚œ๋ฒ„ํŠผ์ด์ง€๋กฑ 2-5. ์˜ˆ์ œ1_counting 0 ์ฆ๊ฐ€ ๊ฐ์†Œ 2-6. ์˜ˆ์ œ2_๋ฐ˜๋ณต๋ฌธ ์ถœ๋ ฅ..
# ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด(Template Literal)ES6๋ถ€ํ„ฐ ์ƒˆ๋กœ ๋„์ž…๋œ ๋ฌธ์ž์—ด ํ‘œ๊ธฐ๋ฒ•๋ฌธ์ž์—ด ์ƒ์„ฑ์‹œ ๋”ฐ์˜ดํ‘œ ๋Œ€์‹ , ๋ฐฑํ‹ฑ(`)์„ ์‚ฌ์šฉvar str_01 = `hello world`;//๋ฐฑํ‹ฑ ์‚ฌ์šฉconst x='x';const y='y';const z='z';console.log(`${x}๋Š” x, ${y}๋Š” y, ${z}๋Š” z์ด๋‹ค. `); //x๋Š” x, y๋Š” y, z๋Š” z์ด๋‹ค. โ–ถ๏ธŽ ๋ฐฑํ‹ฑ(`)์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ JS ES6(ECMAScript 2015)๋ถ€ํ„ฐ ๋„์ž…๋˜์—ˆ๋‹ค.โ–ถ๏ธŽ ๊ฐœํ–‰ ๋ฌธ์ž(\n)๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„๋„ ์ž๋™ ์ค„๋ฐ”๊ฟˆ โ–ถ๏ธŽ ์ƒ๊น€์ƒˆ๊ฐ€ ์ž‘์€๋”ฐ์›€ํ‘œ(')์™€ ๋น„์Šทํ•˜๋‹ˆ ํ—ท๊ฐˆ๋ฆฌ์ง€ ์•Š๋„๋ก ์ฃผ์˜# ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด - ๋ฐฑํ‹ฑ(`)์˜ ๊ธฐ๋Šฅ ์ค„๋ฐ”๊ฟˆ(๊ฐœํ–‰: Multi-line strings)  โ–ถ๏ธŽ ๋ฐฑํ‹ฑ(`)์œผ๋กœ ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด์„ ์‚ฌ์šฉํ•˜๋ฉด..
์ƒ๋‹จ์œผ๋กœ