2025 회고회고를 다시 작성하게 될 날이 오다니, 시간이 정말 빠르게 흘러가는 것 같다.한동안 바빠서 2026년을 맞이하고 두 달이 지난 뒤에야 작성하게 되었지만, 작년에 이어서 올해도 이렇게 꾸준히 회고를 작성하게 된 것에 뿌듯함을 느끼고 있다.직장인으로서의 회고이직작년 11월부터 새로운 회사로 이직하여 일하게 되었다.그리고 현재 4개월차. 시간이 참 빠르다..이전 회사는 1년 6개월을 다녔는데, 웹 퍼블리셔로서는 1년~2년 정도 일하고 이직하는 경우도 많아서 노멀한 수준의 기간동안 일하고 이직한 것 같다.살짝 아쉬운 부분이 있었다면 2년을 채우고 이직하는 것도 좋을 것 같다는생각이 들었지만, 이미 이직해서 일하고 있으니 큰 의미는 없는 것 같다.이직의 이유는 '경험'과 '나이' 랄까..기존의 회사도..

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으로 삽입 이미지에 조작 가능.④ 이미지에 조작..