๋ชฉ๋ก2022/02 (81)
whatisthis?
- HTML์์๋ ํน์ ๋ฌธ์๋ค์ด ์์ฝ๋์ด์๊ธฐ ๋๋ฌธ์ ํ๊ธฐ์ ํผ๋์ ๋ง๊ธฐ ์ํด ํน์๋ฌธ์๋ฅผ ์ซ์ํํ or ๋ฌธ์ํํ์ผ๋ก ์์ฑํ๋ค. ์๋ฅผ ๋ค๋ฉด, ๊ณต๋ฐฑ์  ๋ก ์ฐ๊ฑฐ๋, ์ ๊ฐ๊ฐ <, >์ฒ๋ผ ์ด๋ค. (๊ทธ๋ฅ ๋ง ๊ฐ๋ค๋ถ์ธ๊ฒ ์๋๊ณ , lt = less than๊ณผ ๊ฐ์ด ์๋ฏธ๊ฐ ๋ค ์๋ค.) ํน์๋ฌธ์ ์ซ์ํํ ๋ฌธ์ํํ ์ค๋ช space &%09 &%10 &%32 ์ํํญ ์ค์ฝ์ ์ฌ๋ฐฑ space (non-breaking space) > > greater than & & & ampersand ' ' ' (IE์์ ์๋จ) apostrophe " " " quotation mark ‘ ‘ ‘ left single quotation mark ’ ’ ’ right single quotation mark “ “ ..
- 2022.02.04 ์์ INDEX ๋ฉ์ธ ๋ฃจํธ ๋ฉํ ๋ฐ์ดํฐ ์ปจํ ์ธ ๊ตฌํ (sectioning) ํ ์คํธ ์ปจํ ์ธ ์ธ๋ผ์ธ ํ ์คํธ ์๋ฉํฑ ๋ฉํฐ๋ฏธ๋์ด ๋ด์ฅ์ปจํ ์ธ ์คํฌ๋ฆฝํธ ํ ์ด๋ธ ์์(Form) ๋ํํ ์น ์ปดํฌ๋ํธ ๊ธฐ๋ณธ ๊ตฌ์กฐ ๋ด์ฉ innerHTML, ์ฆ ๋ด์ฉ์ด ์์ ๋๋ ๋ซ๋ํ๊ทธ ๋์ ์ฌ๋ํ๊ทธ ๋ง์ง๋ง ๋ถ๋ถ์ />๋ฅผ ๋ฃ์ด ๋๋ด์ค๋ค. ๋ฐ์ดํ๋ ํฐ๋ฐ์ดํ or ์์๋ฐ์ดํ (์๊ด X) - ๋ณดํต์ ํฐ๋ฐ์ดํ๋ก ๊ฐ์ธ์ค. ํ๊ทธ ์์ ํ๊ทธ๊ฐ ๋ค์ด๊ฐ๋ ๋๋ค. - HTML5๋ฅผ ์ฌ์ฉํจ์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์๋ฆผ. - ๋ธ๋ผ์ฐ์ ๋ ์ค์ค๋ก HTML ๋ฌธ์ ๋ฒ์ ์ ํ๋จํ๊ธฐ ์ด๋ ต๊ธฐ ๋๋ฌธ. ๋ฉ์ธ ๋ฃจํธ - HTML ๋ฌธ์์ ๋ฃจํธ(=์ต์๋จ ์์)๋ฅผ ๋ํ๋. - ๋ชจ๋ ๋ค๋ฅธ ์์๋ ์ ํ์ ํ๊ทธ์. ๋ฌธ์ meta Data - ๋ชจ๋ ์๋ URL์ด ์ฌ์ฉํ ๊ธฐ์คURL..
map ํ๊ทธ - name ์์ฑ(ํ์) ๋งต ์ฐธ์กฐ์ ์ฌ์ฉํ ์ ์๋ ์ด๋ฆ. / ๊ณต๋ฐฑ๋ฌธ์ ํฌํจ X / id๊ฐ ์กด์ฌํ ์ name๊ณผ ๋์ผํด์ผํจ. index.html Ref. - HTML: Hypertext Markup Language | MDN HTML ์์๋ ์์์ ํจ๊ป ์ด๋ฏธ์ง ๋งต(ํด๋ฆญ ๊ฐ๋ฅํ ๋งํฌ ์์ญ)์ ์ ์ํ ๋ ์ฌ์ฉํฉ๋๋ค. developer.mozilla.org
GitHub - thisisyjin/paintJS: Painting Board made with vanila JS (ref. NomadCoder) Painting Board made with vanila JS (ref. NomadCoder) - GitHub - thisisyjin/paintJS: Painting Board made with vanila JS (ref. NomadCoder) github.com ** ๊นํ์ ์ ๋ก๋ ํด๋์๋ค. index.html Fill Save style.css @import "./reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Rob..
color.addEventListener("click", handleColorClick)); if (range) { range.addEventListener('input', handleRangeChange); } mode.addEventListener('click', handleModeClick); canvas์ ๊ทธ๋ฆผ์ ๊ทธ๋ฆฌ๊ณ , ์ฐํด๋ฆญ์ ๋๋ฌ๋ณด๋ฉด ์๋์ ๊ฐ์ด ๋ฌ๋ค. ์ด๋ฏธ์ง๋ฅผ ๋ค๋ฅธ ์ด๋ฆ์ผ๋ก ์ ์ฅ์ ํด๋ฆญํ๋ฉด >>์์ ๊ฐ์ด ์ด๋ฆ์ ์ง์ ํด์ ์ ์ฅ ๊ฐ๋ฅํ๋ค. ์ด๋, ์ฐ๋ฆฌ๊ฐ ์บ๋ฒ์ค์ ๋ฐฑ๊ทธ๋ผ์ด๋๋ฅผ ์ค์ ์ํด์ ๋ฐฐ๊ฒฝ์์ด ํฌ๋ช ์ผ๋ก ์ ์ฅ๋๋ ๋ฒ๊ทธ๊ฐ ์๋ค. ๋ฐ๋ผ์, ์ด๊ธฐํ ๋ถ๋ถ์ ๋ค์๊ณผ ๊ฐ์ ์ฝ๋๋ฅผ ์ถ๊ฐํ๋ค. ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvas.width, canvas..
javaScript. Painting App ๊ตฌํ - (5) Brush Size javaScript. Painting App ๊ตฌํ - (4) Change Color javaScript. Painting App ๊ตฌํ - (3) 2D context controls__r.." data-og-host="mywebproject.tistory.com" data-og-source-url="htt.." data-og-host="mywebp.. mywebproject.tistory.com ์ง๋ ํ์ฐจ ์งํ์ฌํญ - ๋ธ๋ฌ์ ์ฌ์ด์ฆ ์กฐ์ function changeSize(event) { // const size = range.value; const size = event.target.value; ctx.lineWidth = ..
javaScript. Painting App ๊ตฌํ - (4) Change Color javaScript. Painting App ๊ตฌํ - (3) 2D context controls__r.." data-og-host="mywebproject.tistory.com" data-og-source-url="htt.." data-og-host="mywebproject.tistory.com" data-og-source-url="https://m.. mywebproject.tistory.com ์ง๋ ํ์ฐจ ์งํ์ฌํญ - ์์ ๋ณ๊ฒฝ - event.target.style.background ์ฌ์ฉ - Array.from() ๋ฉ์๋ - ๋ฐฐ์ด.forEach() ๋ฉ์๋ ์ดํดํ๊ณ ๋์ด๊ฐ๊ธฐ ๐ป ๋๋ณด๊ธฐ Array.from(colors)...
javaScript. Painting App ๊ตฌํ - (3) 2D context controls__r.." data-og-host="mywebproject.tistory.com" data-og-source-url="htt.." data-og-host="mywebproject.tistory.com" data-og-source-url="https://mywebproject.tistory.com/297" data-og-url="https.. mywebproject.tistory.com ์ง๋ ํ์ฐจ ์งํ์ฌํญ - 2D context ์ด์ฉ (canvas.getContext('2d')) - ํ์ธํ ๊ตฌํ ( path์ line ์์ฑ) function onMouseMove(event) { const x = event.of..
javaScript. Painting App ๊ตฌํ - (2) Canvas Event PaintJS Fill Save - canvas ํ๊ทธ - input type="range" - class๋ ์คํ์ผ ์ ์ฉ์ / id๋ js์ ์ฌ์ฉํจ. - id ๊ตฌ์กฐ : controls > controls__r.." data-og-host="mywebproject.tistory.com" data-og-source-url="htt.. mywebproject.tistory.com ์ง๋ ํ์ฐจ ์งํ์ฌํญ - app.js ์ด๋ฒคํธ๋ฆฌ์ค๋ (mouse event) ์์ฑ const canvas = document.getElementById("jsCanvas"); let painting = false; function stopPainting()..
javaScript. Painting App ๊ตฌํ - (1) HTML/CSS Painting App ๊ตฌํ - (1) HTML / CSS ์ ์ index.html PaintJS Fill Save - canvas ํ๊ทธ - input type="range" - class๋ ์คํ์ผ ์ ์ฉ์ / id๋ js์ ์ฌ์ฉํจ. - id ๊ตฌ์กฐ : controls > controls__r.. mywebproject.tistory.com ์ง๋ ํ์ฐจ ์งํ์ฌํญ - index.html๊ณผ style.css ์์ฑ app.js ํ๊ทธ HTML ์์๋ ์บ๋ฒ์ค ์คํฌ๋ฆฝํ API ๋๋ WebGL API์ ํจ๊ป ์ฌ์ฉํด ๊ทธ๋ํฝ๊ณผ ์ ๋๋ฉ์ด์ ์ ๊ทธ๋ฆด ์ ์์ต๋๋ค. const canvas = document.getElementById("jsCanvas");..