Mingg's Diary

2025-05-02

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

2025-04-30

HTML 그래픽 – 폴리라인

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

2025-04-28

HTML 그래픽 – 다각형

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

2025-04-26

HTML 그래픽 – 라인

라인 SVG 라인 – <line> <line> 요소는 선을 만드는 데 사용된다. <line> 요소는 시작 위치 (x1,y1)와 끝 위치 (x2,y2) 사이에 선을 생성한다. <line> 요소에는 선의 위치와 길이를 설정하는 네 가지 기본 속성이 있다. 속성명 설명 x1 선의 시작 x축 위치 y1 선의 시작 y축 위치 x2 선의 끝 x축 위치 y2 선의 끝 y축 위치 SVG 라인 <x1> 및 <y1> 속성은 선의 시작점 (0,0)을 정의한다. <x2> 및 <y2> 속성은 선의 끝점 (300,200)을 정의한다. 수평선 <x1> 및 <y1> 속성은 선의 시작점…

2025-04-24

HTML 그래픽 – 타원

타원 SVG 타원 – <ellipse> <ellipse> 요소는 타원을 만드는 데 사용된다. 타원은 원과 밀접한 관련이 있다. 차이점은 타원은 x축과 y축 반지름이 서로 다른 반면, 원은 x축과 y축 반지름이 같다는 것이다. <ellipse> 요소에는 타원의 위치와 크기를 설정하는 네 가지 기본 속성이 있다. 속성명 설명 rx 필수. 타원의 x 반지름 ry 필수. 타원의 y 반지름 cx 타원의 x축 중심. 기본값은 0 cy 타원의 y축 중심. 기본값은 0 SVG 타원 rx 속성은 x (수평) 반지름을 정의한다. ry 속성은 y (수직) 반지름을 정의한다. cx…

2025-04-22

HTML 그래픽 – 원

원 SVG 원 – <circle> <circle> 요소는 원을 만드는 데 사용된다. <circle> 요소에는 원의 위치와 크기를 설정하는 세 가지 기본 속성이 있다. 속성명 설명 r 필수. 원의 반지름 cx 원의 x축 중심. 기본값은 0 cy 원의 y축 중심. 기본값은 0 SVG 원 r 속성은 원의 반지름을 정의한다. cx 및 cy 속성은 원의 x축 및 y축 중심을 정의한다. 생략하면 원의 중심이 (0,0)으로 설정된다. fill 속성은 원의 색상을 정의한다. 테두리가 있는 SVG 원 stroke 속성은 원 주위의 테두리 색상을 정의한다. stroke-width 속성은…

2025-04-20

HTML 그래픽 – 직사각형

직사각형 SVG 모양 SVG에는 개발자가 사용할 수 있는 몇 가지 미리 정의된 도형 요소가 있다. 구형 <rect> 원 <circle> 타원 <ellipse> 선 <line> 폴리라인 <polyline> 다각형 <polygon> 길 <path> SVG 사각형 – <rect> <rect>요소는 직사각형이나 직사각형 모양의 변형을 만드는 데 사용된다. <rect> 요소에는 사각형의 위치와 모양을 지정하는 6가지 기본 속성이 있다. 속성명 설명 width 필수. 사각형의 너비 height 필수. 사각형의 높이 x 사각형의 왼쪽 위 모서리의 x-좌표 y 사각형의 왼쪽 위 모서리의 y-좌표 rx 사각형 모서리의 x 반경 (모서리를 둥글게…

2025-04-19

검색 상위 노출의 비밀 | 알아두면 득이 되는 <meta> 태그

2025-04-18

HTML 그래픽 – HTML의 SVG

HTML의 SVG SVG 요소를 HTML 페이지에 직접 삽입할 수 있다. SVG를 HTML 페이지에 직접 삽입 다음은 간단한 SVG 그래픽의 예시다. SVG 코드 설명 <svg>루트 요소 부터 시작하자. SVG 이미지의 너비와 높이는 width및 height 속성 으로 정의된다. SVG는 XML 방언이므로 항상 xmlns속성을 사용하여 네임스페이스를 올바르게 바인딩하자. 네임스페이스 “http://www.w3.org/2000/svg”는 HTML 문서 내부의 SVG 요소를 식별한다. <circle>요소는 원을 그리는 데 사용된다. cx 및 cy 속성은 원 중심의 x 및 y 좌표를 정의한다. 생략하면 원의 중심이 (0, 0)으로 설정된다. r 속성은 원의 반지름을 정의한다….

2025-04-17

CSS list-style-type | 목록 스타일링의 모든 것

CSS list-style-type list-style-type은 HTML 목록 요소의 불릿이나 숫자 스타일을 정의하는 CSS 속성이다. 웹사이트를 만들다 보면 목록을 어떻게 표현할지 고민하게 된다. 단순한 점 불릿이나 숫자만으로는 디자인적으로 부족하게 느껴질 때가 많다. list-style-type을 활용하면 목록 앞에 표시되는 마커의 종류를 다양하게 변경할 수 있어 웹사이트의 가독성과 디자인 완성도를 높일 수 있다. 기본 개념 list-style-type은 HTML의 <ul>, <ol>, <li> 요소에 적용되는 CSS 속성으로, 목록 항목 앞에 표시되는 마커의 종류를 지정한다. 기본적으로 <ul>(순서 없는 목록)은 불릿(점)으로, <ol>(순서 있는 목록)은 숫자로 표시되지만, list-style-type을 사용하면 이러한 기본값을 원하는…