coding 263
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 이..
[VS code] css에서 html class 보기
css를 작성하다가 내가 클래스명을 뭐라고 적었더라? 하고 다시 html로 돌아가신 적 있으시죠? 이 확장 기능은 그 불필요한 동작을 줄여주는 좋은 친구입니다. 1. 설치하기 설치방법 ① vs code 에서 왼쪽 메뉴 가장 아래 확장 메뉴를 선택한다. ② 검색창에 html to 를 검색한다. ③ HTML to CSS autocompletion 확장 기능을 설치한다. 확장 기능 HTML to CSS autocompletion 상세 페이지를 보시면 css에서 클래스를 작성할 때 아래 그 이름이 들어가는 클래스명들을 쭉 보여주는 것을 알 수 있습니다. 2. HTML to CSS autocompletion 사용 방법 ① html과 연결된 css에서 클래스 이름을 적는다. ② [.+클래스명]을 입력하고 아래로 나..
![[VS code] css에서 html class 보기](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/c0IOv8/btrkAN1qGNB/aWNdFQsKllZGrQ1tyI0RaK/img.png)
