whatisthis?

- 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");..

Painting App 구현 - (1) HTML / CSS 셋업 index.html Fill Save - canvas 태그 - input type="range" - class는 스타일 적용에 / id는 js에 사용함. - id 구조 : controls > controls__range / controls__btns / controls__colors ㄴ jsRange ㄴ jsMode ㄴ controls__color ㄴ jsSave style.css @import "./reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantar..