">

✔️ fillStyle()모양 내부에서 사용할 색상, 그라데이션 또는 패턴을 지정합니다. 기본 스타일은 (검정)입니다. #000 💡 예제 1. 사각형에 파란색 채우기 색상을 적용const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");ctx.fillStyle = "blue";ctx.fillRect(10, 10, 100, 100); See the Pen Untitled by 최성식 (@sssungsik) on CodePen.  💡 예제 2. 루프를 사용하여 여러가지 색상을 채우기const canvas = document.getElementById("canvas");const ctx = canvas.getCo..

🔍 canvas 란?Canvas는 웹상에 도형과 같은 그래픽적인 것을 표현 할 때 사용하는 HTML 태그이다. 즉, 스크립트를 사용하여 그래프나 도형, 이미지 등을 그릴 수 있는 html5의 요소이다.TMI) html5가 나오기 이전에는 web상에 그래프를 만든다거나 그래픽을 이용한 게임 등을 만들 경우, 이것을 서버 쪽에서 구현하거나 java 혹은 flash 같은 외부 플러그인에 의존해야했다.📌How to use ?1. html 내에서 canvas 태그 작성... 2. css 내에서 canvas의 가로 세로 길이 지정.canvas { width: 500px; height: 500px; background-color: #333;}3. JavaScript 내에서 오브젝트를 생성하고 드로잉 할..

✔️attributeattribute는 HTML 문서에서의 정적인 속성을 뜻합니다.이러한 코드가 있다고 생각해보겠습니다.여기서 살펴보면div -> elementclass -> attribute'yongseong' -> value이런식으로 나타낼 수 있죠. 너무나도 기본적인 이야기를 하고있나요? 그렇다면 property는 어떤 것일까요?✔️property제가 위에서 attribute는 HTML 문서에서의 정적인 속성을 의미한다고 하였습니다.property는 이와 반대로 HTML DOM에서의 동적인 속성을 뜻합니다.JavaScript라는 것이 생겨난 것은 애초에 정적인 문서인 HTML을 동적으로 동작할 수 있게끔 하기 위한 것이잖아요? 그러한 동적인 속성을 부여하는 것이 바로 property라고 볼 수 있습..

Emmet (에밋)에밋은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다.원래 젠코딩으로 부르다가 에밋으로 이름을 변경했다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다. 이처럼 에밋을 사용하면 HTML & CSS의 작업 속도를 엄청나게 향상시킬 수 있다.VSCode는 emmet을 기본적으로 지원하고 Tab키를 통해 사용한다.HTML 태그 emmet " style="text-align: left;" data-ke-size="size20">자식(하위) 요소 >emmetdiv>ul>lihtml Copy 형제 요소 +emmetdiv>p+spanhtml Copy 올라가기 ^emmetdiv>ul>li^p+ahtm..

이미지의 특정 영역을 클릭할 수 있도록 정의하는 데 사용됩니다. 태그와 함께 사용됩니다. 이미지 내의 특정 부분을 클릭하면 다른 페이지로 이동하거나 특정 액션을 수행할 수 있습니다.  주요 속성shape영역의 모양 지정 (rect, circle, poly)coords해당 모양에 대한 좌표 값 설정href클릭 시 이동할 링크alt대체 텍스트target새 창에서 열지 여부 (_blank, _self 등)  예제   결과  ">    ..