SVG <marker> SVG 마커 – <marker> <marker> 요소는 <line>, <path>, <polyline>, 또는 <polygon>의 시작, 중간, 끝에 마커를 만들기 위해 사용한다. 모든 SVG 마커는 <defs> 요소 안에 정의된다. <defs> 요소는 “definitions”의 약자로, 특별한 요소 (마커 등)의 정의를 포함한다. 마커는 marker-start, marker-mid, marker-end 속성을 사용하여 도형에 부착한다. <marker> 요소는 마커의 위치와 크기를 설정하는 6가지 기본 속성을 가진다. 속성명 설명 id 마커의 고유 ID. markerHeight 마커의 높이. 기본값은 3이다. markerWidth 마커의 너비. 기본값은 3이다. refX 마커가 정점(vertex)과 연결될 x 위치. 기본값은 0이다. refY…

SVG <image> SVG 이미지 – <image> <image> 요소는 SVG에 이미지를 삽입하는 데 사용한다. SVG 소프트웨어는 JPEG, PNG 및 다른 SVG 파일을 지원해야 한다. <image> 요소는 이미지의 위치와 모양을 지정하는 몇 가지 기본 속성을 가진다. 속성명 설명 width 필수. 이미지의 너비. height 필수. 이미지의 높이. href 필수. 이미지의 URL. x 이미지 좌측 상단 모서리의 x 위치. y 이미지 좌측 상단 모서리의 y 위치. 이미지 삽입 여기서는 SVG 안에 .jpg 이미지를 삽입한다. 코드 설명: height 속성은 이미지의 높이를 정의한다. width 속성은 이미지의…

SVG 링크 SVG 링크 – <a> <a> 요소는 링크를 만드는 데 사용한다. <a> 요소는 텍스트와 그래픽 모두에 사용할 수 있다. <a> 요소는 7가지 기본 속성을 가진다. 속성명 설명 href 이동할 URL. download 브라우저에게 해당 URL로 이동하는 대신 다운로드하도록 지시한다. hreflang 링크가 가리키는 페이지의 언어. referrerpolicy URL을 가져올 때 보낼 리퍼러. rel 링크 대상 객체와 링크 객체의 관계. target 링크를 어디서 열지 지정한다. _self, _parent, _top, _blank 또는 이름을 사용할 수 있다. type 링크된 URL의 MIME 타입. 텍스트 하이퍼링크 <a> 요소를…

강화된 드롭다운 데이터 필터링 기능은 사용자 경험을 크게 향상시키는 중요한 UI 요소다. 특히 여러 옵션을 선택하고 그에 따른 결과를 실시간으로 확인해야 하는 경우 필수적이다. 웹사이트나 애플리케이션에서 많은 양의 데이터를 효과적으로 관리하려면 사용자가 원하는 정보만 필터링할 수 있는 기능이 필요하다. 이런 필터링 기능이 있는 드롭다운 메뉴는 사용자 친화적인 인터페이스를 제공하여 데이터 탐색을 훨씬 쉽게 만든다. 예시를 먼저 확인해보자.

SVG <textPath> SVG 텍스트 – <textPath> <textPath> 요소는 경로의 모양을 따라 텍스트를 렌더링하는 데 사용한다. <textPath> 요소는 6가지 기본 속성을 가진다. 속성명 설명 href 텍스트를 렌더링할 경로의 URL. lengthAdjust textLength 속성으로 정의된 너비에 맞추기 위해 텍스트를 어떻게 압축하거나 늘릴지 지정한다. spacing 또는 spacingAndGlyphs를 사용할 수 있으며, 기본값은 spacing이다. method 경로를 따라 글리프를 어떻게 렌더링할지 지정한다. align 또는 stretch를 사용할 수 있으며, 기본값은 align이다. spacing 글리프 사이의 간격. auto 또는 exact를 사용할 수 있으며, 기본값은 exact이다. startOffset 텍스트 시작점이 경로 시작점에서…

SVG <text>와 <tspan> SVG – <text> <text> 요소는 텍스트를 정의하는 데 사용한다. 경로는 여러 개의 직선이나 곡선을 조합하여 단순하거나 복잡한 모양을 만들 때 사용한다. <text> 요소는 텍스트의 위치와 회전을 지정하는 7가지 기본 속성을 가진다. 속성명 설명 x 텍스트 시작점의 x 위치. 기본값은 0이다. y 텍스트 시작점의 y 위치. 기본값은 0이다. dx 텍스트의 수평 이동 위치 (이전 텍스트 위치 기준). dy 텍스트의 수직 이동 위치 (이전 텍스트 위치 기준). rotate 텍스트의 각 글자에 적용되는 회전 (도 단위). textLength 텍스트가 맞춰져야 하는…

데이터 필터링 데이터 필터링은 웹 페이지에서 사용자가 원하는 정보만 선택적으로 볼 수 있게 해주는 강력한 기능이다. 예를들어, 대량의 국가 정보를 다루는 웹 페이지에서 지역별 필터링 기능이 없다면, 사용자는 필요한 정보를 찾는 데 많은 시간을 낭비하게 된다. 예시를 먼저 확인해보자. 예시   이제 예시도 봤으니, 지역 필터를 클릭하여 해당 지역 국가 정보를 보이거나 숨기는 HTML 필터링 시스템을 구현하는 방법을 알아보자. HTML 데이터 필터링을 구현하기 위한 첫 단계는 적절한 마크업 구조를 설계하는 것이다. 국가 정보를 지역별로 필터링하기 위해서는 필터 버튼 영역과 국가…

Path SVG 경로 – <path> <path> 요소는 경로를 정의하는 데 사용된다. 경로는 여러 개의 직선이나 곡선을 조합하여 단순하거나 복잡한 모양을 만들 때 사용된다. <path> 요소에는 경로를 그리는 방법과 점을 정의하는 하나의 기본 속성이 있다. 속성명 설명 d 필수. 경로를 정의하는 명령어들의 집합. 경로 데이터에 사용할 수 있는 명령어들은 다음과 같다. M = moveto (한 점에서 다른 점으로 이동) L = lineto (선 그리기) H = horizontal lineto (수평선 그리기) V = vertical lineto (수직선 그리기) C = curveto (곡선 그리기)…

폴리라인 SVG 폴리라인 – <polyline> <polyline> 요소는 여러 점에서 연결된 직선만으로 구성된 어떤 모양을 만드는 데 사용된다. <polyline> 요소에는 폴리라인의 점을 정의하는 하나의 기본 속성이 있다. 속성명 설명 points 필수. 폴리라인의 점 목록. 각 점은 x 좌표와 y 좌표를 포함해야 한다. 폴리라인 <points> 속성은 폴리라인을 그리는 데 필요한 점 목록(각각의 x 및 y 좌표 쌍)을 정의한다. 또 다른 폴리라인

다각형 SVG 다각형 – <polygon> <polygon> 요소는 세 개 이상의 변을 가진 그래픽을 만드는 데 사용된다. 다각형은 직선으로 구성되며, 모양은 “닫힌” 형태다 (마지막 점이 자동으로 첫 번째 점과 연결됨). <polygon> 요소에는 다각형의 점을 정의하는 하나의 기본 속성이 있다. 속성명 설명 points 필수. 다각형의 점 목록. 각 점은 x 좌표와 y 좌표를 포함해야 한다. 세 변을 가진 다각형 <points> 속성은 다각형의 각 모서리에 대한 x 및 y 좌표를 정의한다. 네 변을 가진 다각형 여섯 변을 가진 다각형 다각형 별 <polygon> 요소를…