coding 259
visual studio code 유용한 확장 기능 모음 7가지
비주얼 스튜디오 코드에서 유용한 확장 기능 몇 가지를 소개해드릴게요. 1. Korean(사용법) Language Pack for Visual Studio Code visual studio code를 처음 설치하면 영어가 기본 언어인데요 확장 기능을 이용해 한글로 변경할 수 있습니다. 한글 패치 ① Korean(사용법) Language Pack for Visual Studio Code 설치 ② 설치 방법 [coding/editor] - [vs code] 비주얼 스튜디오 코드 한글 패치 하기 [vs code] 비주얼 스튜디오 코드 한글 패치 하기 안녕하세요. 개자이너 씸플레이입니다. 비주얼 스튜디오 코드가 영문판이라 편하게 한글 패치를 해보려고 합니다. [비주얼 스튜디오 코드 다운로드 받기] [coding/..
html 특수기호 코드 -엔티티코드(entity code)
코드 작성시에 특수기호를 사용해야하는 경우가 있습니다. 특수기호는 그대로 쓰면 오류가 생길수도 있는데요 코드로 어떻게 표현하는지 알아봅시다. 1. 자주 사용하는 특수기호 코드 특수기호 엔티티코드 의미(영어) 의미(한글) non-breaking space 공백 > greater than 보다 크다 & & ampersand 그리고(앰퍼샌드) " " double quotation mark 큰 따옴표 ' ' single quotation mark(apostrophe) 작은 따옴표 자주 사용하는건 이정도이고 나머지는 그때그때 검색해서 찾아보시면 됩니다. 주의하실점은 맨 끝에있는 ;(세미콜론)까지가 한 묶음입니다. 꼭 같이 적어주셔야해요. 엔티티 코드 ① html에서 특수기호를 입력해주는 코드 ② 세미콜론..
코딩으로 아이콘 넣기 - font awesome
사이트 제작 시에 디자이너가 아이콘을 모두 만들어준다면 편하겠지만 개인 작업일때도 아이콘을 하나하나 만들면 오래 걸리잖아요? 그래서 이미 있는 아이콘을 무료로 사용할 수 있는 사이트를 알려드립니다. 1. Font Awesome https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 전에는 아이콘을 부트스트랩 4로 불러왔었는데 최근엔 4버전을 지원하지 않는 건지 찾을 수가 없더라고요. 그래서 아이콘을 불러오는 새로운 방법을 찾아봤습니다. 혹시 정확한 정보를 알고 계시..
비주얼 스튜디오 코드 prettier
코드의 형식을 정해주는 확장 기능 prettier을 설치하고 설정해보겠습니다. 1. 설치 방법 확장 기능 설치 ① 비주얼 스튜디오 코드 왼쪽 메뉴에서 확장을 선택한다. ② 확장 탭 검색창에 prettier 검색. ③ Prettier - Code formatter 설치. 오른쪽 아래에 있는 파란색 설치 버튼을 누르셔도 설치가 되고, 그냥 확장 기능을 눌러서 상세페이지에서 설치를 눌러도 설치가 됩니다. 2. 설정 방법 단축키 [Ctrl + ,]를 누르면 설정창으로 바로 이동할 수 있습니다. 맥에서는 [Cmd + ,]를 눌러주세요. 설정 검색창에 save를 검색하시면 가장 위에 Format On Save를 설정할지 말지 결정하는 체크 박스가 보이실 겁니다. 우리가 설정하는 포맷. 즉, 형식을 저장하려면 체크를..
비주얼 스튜디오 코드 html 태그 자동으로 바꾸기
html 태그를 수정할 때 여는 태그와 닫는 태그를 모두 수정하는 번거로움이 있죠. 비주얼 스튜디오 코드의 auto rename tag 확장 기능을 사용하면 한 곳만 바꿔도 자동으로 바꿔줍니다. 편리하죠? 1. Auto rename tag 다운로드하기 확장 기능 설치 포스팅을 보셨던 분들이라면 많이 익숙해지셨을 화면이죠? 왼쪽 아이콘 중 가장 아래에 있는 확장 탭을 선택한 뒤 검색 창에 auto를 입력해줍니다. 가장 위에 Auto Rename Tag 확장 기능이 보이시죠? 설치해줍니다. Auto Rename Tag 설치 방법 정리 ① 확장 탭 선택 ② 검색창에 auto 검색 ③ Auto Rename Tag 설치 2. 기능 살펴보기 확장 기능의 상세페이지로 들어와서 어떻게 사용하는지 살펴봅시다. gif 이..
