Mingg's Diary

2025-04-26

라인 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을 사용하면 이러한 기본값을 원하는…

2025-04-16

HTML 그래픽 – SVG 튜토리얼

SVG SVG는 “Scalable Vector Graphics”의 약자로 웹에서 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다. JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장한다. 따라서 SVG와 같은 벡터 파일은 품질을 그대로 유지하면서 크기를 마음대로 조정할 수 있으므로 로고와 복잡한 온라인 그래픽에 아주 적합하다. SVG는 벡터 그래픽 형식이기 때문에 크기를 조절해도 해상도가 떨어지지 않는다. 기본 SVG 파일은 많은 컬러 픽셀로 생성되는 래스터 이미지보다는 크기가 작다. SVG 파일은 XML 형식으로 작성되어…

2025-04-14

Sass – 색상 함수

w3.css 공식 레퍼런스는 SCSS 문법을 기준으로 모든 문법을 설명하고 예시를 보여주므로 SCSS 문법으로 작성한 Sass를 사용하자. 색상 함수 Sass의 색상 함수를 세 부분으로 나눠서 알아보자. 색상 설정 함수, 색상 가져오기 함수, 색상 조작 함수다. 색상 설정 기능 기능 설명 예시 rgb(빨강, 초록, 파랑) 빨강-초록-파랑 (RGB) 모델을 사용하여 색상을 설정한다. RGB 색상 값은 다음과 같이 지정된다: rgb(빨강, 초록, 파랑). 각 매개변수는 해당 색상의 강도를 정의하며 0에서 255 사이의 정수 또는 백분율 값(0%에서 100%)이 될 수 있다. rgb(0, 0, 255); // 파란색…

2025-04-13

JavaScript – 브라우저 언어에 따라 표시하는 방법

브라우저 언어에 따라 표시 웹 서핑을 하다보면 브라우저 언어에따라 홈페이지에서 출력되는 언어가 다른 사이트들이 있다. JavaScript를 이용하여 언어를 다르게 출력하는 방법을 한 번 알아보자. 파일 생성 원하는 방식을 선택한 후 코드를 확인해보자. 로컬 사용 가능 ▸ 언어파일과 구동파일 합친 버전 JavaScript 파일 HTML 로컬 사용 가능 ▸ 언어파일과 구동파일 분리한 버전 langResource.js 파일 lang.js 파일 HTML 파일 로컬 사용 불가(fetch API 사용.) ▸ 언어파일과 구동파일 분리한 버전 langResource.json 파일 lang.js 파일 HTML 파일