HTML

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 2차 베지에 곡선으로 다양한 경로를 그릴 수 있다. 곡선에 끝 점을 설정하는 것 뿐만 아니라 제어점도 설정해야 한다. 제어점은 선이 구부러지기는 하지만, 닿지 않는 보이지 않는 좌표이다. 표정 여기서 제어점은 이미지 하단 중앙(0, 100)에 위치한다. 제어점이 반드시 두 끝점의 동일..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 그라데이션으로 채우기와 3D 효과를 줄 수 있다. 크리스마스 장식 업그레이드 크리스마스 장식품을 업그레이드 하자. 기본 원을 그라데이션으로 채우민 미묘한 3D 효과를 추가할 수 있다. defs섹션에서 radialGradient를 정의한다. CSS와는 다른 구문이지만 비슷한 기능을 한다..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 별은 단순한 모양이다. 별의 한 꼭짓점을 다각형 묶음으로 정의하고 각 점을 개별적으로 설정할 수 있다. 별의 각 꼭짓점의 좌표를 알면, 한 방향을 정의한 다음 회전을 5번 수행해 별 모양을 얻을 수 있다. 회전은 transform 속성을 이용해서 설정한다. transform 속성을 사..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 나무 모양 하나를 정의한 다음 다양한 위치에 다양한 크기로 배치하여 숲을 그릴 수 있다. 배경 만들기 직사각형과 원을 이용해 배경을 만든다. 나무 만들기 간단한 다각형과 선으로 나무 모양을 정의한다. 눈송이 예제에서 했던 것과 유사한 방식으로 이를 재사용할 수 있다. 이 모양을 def..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com SVG로 눈송이 그리기 동일한 코드를 반복하는 대신 모양에 대한 정의를 만들어 재사용할 수 있다. 우선 눈송이의 가지를 정의한 다음, 이를 다른 회전으로 6번 사용한다. path와 move to(M), line to(L) 명령을 사용해 간단히 선(주 분기)을 그릴 수 있다. 그 다음 ..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com path path는 SVG 요소 중 하나로, path를 사용해 거의 모든 것을 만들 수 있다. 경로의 모양은 d 속성에 의해 정의된다. 이 속성은 여러 그리기 명령을 정의한다. 명령은 항상 명령 유형을 정의하는 문자로 시작해서 좌표로 끝난다. 가장 기본적인 명령은 move-to, li..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 이전에 그린 장식을 선을 이용해 꾸며보자. 2024.01.15 - [Study/SVG] - 1. SVG를 사용하여 기본 도형 그리기 1. SVG를 사용하여 기본 도형 그리기 📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to ..

✍🏻 programmers의 AI서비스와 함께 누구나 만드는 웹 프로젝트! feat. ChatGPT 강의를 바탕으로 작성된 코드입니다. 목표 기본 소스코드에서 버튼의 이벤트 리스너를 등록해 특정 동작을 수행하는 코드를 작성합니다. 우선, 우리가 원하는 해당 버튼의 결과는 다음과 같습니다. "이미지 만들기" 버튼을 클릭하면, 이미지를 보여준다. 30개의 이미지가 생성되면, 경고창이 표시된다. 사용자의 응답에 따라 새로운 이미지가 생성되지 않거나, 생성된 30개의 이미지가 화면에서 삭제된다. 이미지 가져오기 버튼 클릭 시 이미지를 가져오는 코드는 다음 로직대로 실행됩니다. 이벤트 대상을 선택한다. 여기서 이벤트 대상은 "이미지 만들기" 버튼입니다. html 파일에 있는 해당 button의 요소를 JavaSc..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 이전에 학습한 본 원, 직사각형, 선, 다각형을 이용해 집을 만들어 보자 1. 벽 그리기 HTML 삽입 미리보기할 수 없는 소스 .house { stroke: black; stroke-width: 2px; fill: white; } 2. 지붕 그리기 polyline을 사용해 지붕을 그..

📌 svg-tutorial 으로 학습한 내용을 정리했습니다. SVG Tutorial - Learn how to code images in HTML with SVG Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity. svg-tutorial.com 스타일 속성을 CSS로 이동 SVG가 HTML 파일 내에 있으므로 각 요소에 CSS 클래스를 할당하고 일부 속성을 CSS로 이동할 수 있다. 단, 프레젠테이션 속성만 이동할 수 있으며 모양과 위치 속성은 HTML에 유지되어야 한다. 또한 색상, 획 및 글꼴 속성 등은 CSS로 이동할 ..