YAML 이란?YAML Ain't Markup Language의 약자 YAML기존에 주로 사용되던 포맷인 JSON의 불편함을 해소하기 위해 만들어진 superset이다.JSON보다 가독성 좋고, XML보다 간단해서다양한 개발 환경에서 표준처럼 사용된다.YAML은 구성 파일을 작성하는 데 일반적으로 사용되며 사람이 읽을 수 있는 다목적 데이터 직렬화 언어이다.YAML은 기본적으로 단순성과 가독성을 염두에 두고 설계되어, 개발자와 사용자는 복잡한 데이터 구조를 자연어와 유사하고 한눈에 이해하기 쉬운 형식으로 표현할 수 있다. YAML Ain't Markup Language : YAML직역하면, " YAML은 마크업 언어가 아니다 " 이라고 한다.즉, XML이나 HTML처럼 같은 마크업 태그를 쓰는 언어가 ..

Chrome 브라우저에서 User-agent 변경하기 종종 작업하다 보면폰 기종마다 또는 각 기종안에서도 브라우저마다화면이 동일하게 보이지 않는 경우가 있다.(예 :같은 사이트에 접속해도 아이폰에서 사파리 브라우저를 사용했을 경우와아이폰에서 크롬브라우저를 사용했을 경우와안드로이드폰에서 크롬브라우저를 사용했을 경우가 모두 각각 화면 ui가 다르게 보이는 경우가 있다.) 이런 경우 javascript로 User agent를 검사하여각 기종 또는 브라우저마다 실행되는 코드를 조건문으로 다르게하여 ui가 같아보이게 처리했는데, 구현하는 단계에서 매번 각각의 다른 User-agent에서 동작하는 코드를 보기 위해 실제 스마트폰 기기와 브라우저로 확인하는 과정을 거쳐서 매우 불편했다. 그런데 크롬 개발자도구에서..

목차 텍스트기본 글자 쓰기곡선을 따라 글자 쓰기텍스트 부분 스타일링 적용하기효과그라디언트패턴 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은..