본문 바로가기
반응형

전체 글142

prettier 설정 - 닫기 태그 괄호 > 가 따로 표시될 때(ft. 코드를 한줄로) VSCode에 익스텐션을 설치해서 사용을 하다보면 편리하기도 하지만 코드 포맷팅 형식이 너~무 나랑 달라서 코드 가독성에 혼란을 겪는 경우가 생길 수도 있습니다. 저의 경우에는 Prettier를 설치한 후 저장할 때 마다 코드를 자동으로 포매팅을 해주는 형태로 사용중인데 VSCode설정은 이렇게 해줍니다. Settings에 들어가서(Ctrl + 콤마) 디폴트 포매터를 Prettier로 선택. 스크롤을 내리다 보면 Forat On Save 항목에 체크. 그러면, 코드 작성을 하다가 저장(Ctrl + S)를 누를 때 마다 지저분한 코드를 자동으로 정렬해줍니다. 이 또한 은혜롭지 않은가!!. 자동정렬 세팅이 안 되어 있는 경우에는 매번 수동으로 [ Shift + Alt + F ] 를 눌러줬더랬습니다. 기존까지.. 2022. 11. 30.
티스토리 - Google Search Console 연동 티스토리 블로그에 도메인을 연동한 후 구글 검색엔진에서 검색이 되도록 하기 위해 Google Search Console을 연동해보기로 합니다. 먼저 구글 서치콘솔에 접속합니다. https://search.google.com/search-console/about Google Search Console Search Console 도구와 보고서를 사용하면 사이트의 검색 트래픽 및 실적을 측정하고, 문제를 해결하며, Google 검색결과에서 사이트가 돋보이게 할 수 있습니다. search.google.com 본인이 사용하는 구글 계정을 이용해서 서치 콘솔에 가입해줍니다. 구글 서치 콘솔을 처음 사용하는 것이라면 위와 같이 접속하려는 도메인을 등록해줘야 합니다. 그리고 DNS 레코드 추가를 통해 소유자임을 인증해.. 2022. 11. 29.
SVG 기초 - 도형 그리기 Part 3 (패스, path) svg는 사실 코드를 이용해서 직접 그려서 사용하는 것보다는 일러스트레이터 등의 툴에서 작업한 결과물을 가져와서 활용하는 측면이 크기는합니다. 그래도, svg가 그려지는 동작원리를 한번 살펴보고 이해해두면 여러 모로 공부가 클 것이라 생각됩니다. 그런 의미에서 이번 포스팅은 svg의 꽃 패스(path)에 대해 살펴보기로 합니다. 패스(path)로 그리기 - 직선(Line) 패스로 도형을 그려보기 위해 다음과 같이 코드를 작성해봅니다. 기존 예제 코드들은 제거하고 패스를 위한 아래 코드를 작성하였습니다. path : 패스로 그리겠다. d : data M : Move to (=그리지 않고 첫 좌표로 이동) L : Line to 선을 그리겠다. 좌표 원소 2개 필요 H : Horizontal Line to =.. 2022. 11. 28.
SVG 기초 - 도형 그리기 Part 2 (타원, 직선, 다중선, 다각형 - ellipse, line, polyline, polygon) 지난 번 학습에서는 직사각형과 원을 그리는 방법을 살펴보았습니다. 이번에는 좀더 다양한 그리기 요소들을 살펴보려고 합니다. 중복되는 설명은 생략할 수 있으니 이 파트를 처음 보시는 분은 Part 1을 먼저 보고 오시는 게 좋겠습니다. 3. 타원 그리기 - Ellipse 타원(Ellipse)이 원(circle)과 다른 점이 분명히 있겠죠? 우선 전체코드를 살펴보고 아래 코드를 한번 살펴봅시다. ellipse = 타원 cx : circle x 좌표 cy : circle y 좌표 rx : radius x = x 축방향 반지름 길이 ry : raduis y = y 축방향 반지름 길이 즉, 타원은 rx와 ry를 사용한다는 것이 뽀인트! 가 될듯합니다. 중심좌표가 x200, y300이고 x축 반지름 150, y축 .. 2022. 11. 27.
SVG 기초 - 도형 그리기 Part 1 (직사각형과 원, rectangle & circle) 최근에 SVG를 조금 들여다보면서 공부해보고 있습니다. 예전에는 잘 사용하지 않았는데 최근에 주목도가 매우 커진 것 같습니다. SVG는 Scalable Vector Graphics로서 브라우저에서 벡터 그래픽을 다루는 기술입니다. https://developer.mozilla.org/ko/docs/Web/SVG SVG: Scalable Vector Graphics | MDN **SVG(Scalable Vector Graphics)**는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하 developer.mozilla.org jpg, png, gif = 비트맵 그래픽 ai = 벡터 그래픽 .. 2022. 11. 26.
티스토리(Tistory)에 도메인(Domain) 주소 연결하기 제가 이용하는 티스토리의 주소는 kincode.tistory.com입니다. 사람이 기억하기에는 뭔가 좀 글자가 많긴합니다. 그래서!! 500원입니다! 이참에 도메인을 하나 구입해서 블로그에 연결해보기로 합니다. 먼저, 도메인이란 무엇일까요? 모든 웹사이트는 IP라는 숫자로된 주소를 갖습니다. 예를 들어, 123.123.123.123 과 같은 구조를 갖습니다.(IPv4) 이 숫자는 사람이 기억하기가 쉽지 않기 때문에 기억하기 쉬운 로 바꿔사용되는데 바로 이 것을 "도메인"이라고 부릅니다. (보다 정확한 명칭은, 도메인 네임) 예를 들어, 223.130.195.95 = naver.com 142.250.204.142 = google.com 브라우저 주소창에 223.130.195.95를 넣고 Enter를 치면 .. 2022. 11. 25.
반응형

티스토리툴바