하트 아이콘 만들기

Source: Dev.to

Creating the Heart Icon

이 워크숍은 이론을 실제로 옮깁니다. 이미지와 SVG를 다루는 방법을 배운 후, 제공된 HTML 보일러플레이트를 사용해 하트 아이콘을 만드는 것이 과제입니다.

아이콘의 핵심은 <path> 요소입니다. 이 요소의 d 속성에는 형태를 정의하는 일련의 명령(문자)과 좌표(숫자)가 들어 있습니다:

<!-- SVG path data goes here -->

문자는 그리기 명령을 나타내며(예: “M”은 “move to”), 숫자는 좌표 값을 의미합니다. 이 구문을 이해하면 맞춤형 SVG 그래픽을 만들 수 있는 가능성이 크게 열립니다.

width, height, viewBox 속성을 설정하는 것은 간단하며, fill 속성을 적용하면 하트의 색상을 바꿀 수 있습니다:

<!-- Example SVG element with width, height, viewBox, and fill -->

전체적으로 이 연습은 freeCodeCamp의 Responsive Web Design 인증 과정에서 가치 있는 부분이며, SVG 경로 구문에 대한 추가 학습 영역을 강조합니다.