반응형 분류 전체보기135 재미있게 Flex 공부하기 - Flexbox Froggy 문제풀이 1~12 재미있게 Flex를 공부하는 방법 CSS를 한창 재미있게 공부하면서 요즘은 예전에 한번 공부했던 Flex를 다시 복습하고 있습니다. 그러던 차에 라는 게임을 다시 한번 풀어보고 있습니다. https://flexboxfroggy.com/ Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 또는 codepip.com 에서도 같은 내용을 만날 수 있습니다. 일단 무료로 제공되는 게임은 Flex와 Grid를 이용한 게임입니다. 게임을 하면서 Flex나 Grid의 동작방식에 익숙해지고 그러다가 무릎을 탁~! 치게 되는 재미 있는 교육용 게임이라는 생각이 들었습니다. 문제 1 워밍업 문제라서 쉬운 편입니다. 문제 아래에는 제가 푼 해답이 있으니 문제를.. 2022. 12. 1. 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. 이전 1 ··· 29 30 31 32 33 34 다음 반응형
