목차 텍스트기본 글자 쓰기곡선을 따라 글자 쓰기텍스트 부분 스타일링 적용하기효과그라디언트패턴 1 - 패턴의 기본적인 사용법패턴 2 - 애니메이션이 적용된 일러스트 패턴 [텍스트] 기본 글자 쓰기텍스트는 '' 태그를 사용한다. Hello, SVG! 설명- text의 x속성과 y속성Hellox : 텍스트 시작점의 가로 좌표 (왼쪽에서 얼마나 떨어져 있는지).y : 텍스트 시작점의 세로 좌표 (위에서 얼마나 떨어져 있는지).단, y 값은 글자의 baseline을 기준으로 한다.(예시) SVG 좌표계에서 (50, 100) 지점부터 "Hello"라는 텍스트가 그려진다.쉽게 말해서 svg 부모 요소 positoin:relative;기준으로 text 요소 positon: absolute의 x 좌..

목차 그리기기본도형 그리기직선 그리기Path로 그리기Stroke 모양 조정하기그룹 만들기 [그리기] 기본도형 그리기svg를 만들때 일러스트레이터 등 벡터를 만드는 프로그램을 이용하여 만드는 경우가 많지만, 그래프 등 간단한 도형을 만들 때는 속도 빠른 간단한 기본 도형을 사용하는 경우도 있기 때문에 간단한 기본 도형을 활용하여 직접 svg를 사용하는 만드는 법도 알아두면 좋다. --> [그리기] 직선 그리기 [그리기] Path로 그리기는 가장 유연하고 강력한 도형 태그.선(line), 곡선(curve), 닫힌 도형 등 거의 모든 형태를 표현할 수 있음. 기본 구조 주요 명령어 정리명령어..

SVG란?확장 가능한 벡터 그래픽(Scalable Vector Graphics)웹페이지에서 벡터 그래픽을 표현하기 위한 W3C 표준 형식.확대하거나 축소해도 깨지지 않고 선명.xml 기반 문서 형식(HTML처럼 태그로 이루어져 있으며, 직접 코드로 작성하거나 조작 가능.)CSS와 javascript를 이용해서 조작 가능.모양이 복잡하고 개체수가 많을 수록 성능이 떨어짐.벡터이기 때문에 이미지의 크기에 상관 없이 선명하게 유지되고 모양이 많이 복잡하지 않은 경우 파일 사이즈도 작다. HTML 문서에 SVG를 넣는 여러가지 방법① 태그 이미지에 조작 불가능.② CSS Background 이미지에 조작 불가능.③ SVG 요소들을 직접 inline으로 삽입 이미지에 조작 가능.④ 이미지에 조작..

robots.txt 란?robots.txt는 웹사이트의 루트 디렉터리에 위치하는 텍스트 파일로, 검색 엔진 크롤러(로봇)에게 사이트의 어떤 페이지나 디렉터리를 크롤링(수집)할 수 있고, 어떤 부분은 수집하면 안 되는지 지시하는 역할을 한다고 한다. 기본 구조User-agent: [크롤러 이름 또는 *] Disallow: [차단할 경로] Allow: [허용할 경로] 예시1. 모든 크롤러가 모든 페이지를 접근 못 하도록User-agent: * Disallow: /2. 모든 크롤러가 모든 페이지를 접근 가능하도록User-agent: * Disallow:User-agent: * Allow: /3. /private/ 디렉터리만 막기User-agent: * Disallow: /private/4. Googlebot은..

CSS - attr()CSS attr() 함수는 선택한 요소의 속성 값을 반환한다고 설명되어 있다.의사 요소(::before, ::after)와 함께 사용할 수 있다.즉, CSS에서 HTML요소의 속성 값을 가져올 수 있다. Syntaxattr(attribute-name type fallback)attribute-name : required. 해당 요소의 속성 이름.type : optional. 속성 값의 유형 또는 단위.유형 또는 단위들예시 : string, color, url, integer, number, length, angle, em px..등의 단위, deg grad rad, time, s ms, Hz kHz, %, frequencyfallback : required. 속성이 누락되었거나 잘못..

BEM이란?BEM은 Block, Element, Modifier의 약어로 얀덱스(Yandex)사가 제창했다.사용자 인터페이스를 독립된 블록으로 분리하여 복잡한 페이지에서도 간단하고 신속하게 개발할 수 있도록 하는 것이 목적.모듈 기반의 방법이다.다른 설계 기법에 비해 엄격하고 강력하다. BEM 기본클래스 셀렉터를 사용해야 한다./* ❌요소형 셀렉터는 사용하지 않는다. */a {}a.button {}/* ✅ 클래스 셀렉터 사용. */.button {}상세도를 높이지 않는다./* ❌ 상세도를 높이지 않는다. */.button.button-theme-caution {}/* ✅ 상세도를 높이지 않음. */.button-theme-caution {}.menu {}.menu__item {}.menu__item--a..