패캠 프론트엔드 html (vscode 설정, 단축기, beautify, 이미지, 경로, vscode 공백조절, 개발자도구, codepen.io, 브라우저 초기화, /로 끝나는 태그, 블록요소, 인라인요소, div, a, h, p, img, ul, li, span, br, input, label, table, tr, td, 전역속성)

0. vscode

vscode 라이브러리, 설정

https://images.velog.io/images/tonyhan18/post/5f36b768-a948-42d7-9e09-f7ac38e38ac6/image.png

코드가 지저분한 경우 코드를 깔끔하게 만들어 주는 Beautify를 설치하자

명령어이라는 부분의 HookyQR.beautify를 복사

https://images.velog.io/images/tonyhan18/post/194f1bb9-da93-4e67-8083-728b39aeccf2/image.png

https://images.velog.io/images/tonyhan18/post/2c3268b2-f5e6-446d-b85f-2468d7240834/image.png

ctrl + shift + p로 바로 가기 키 열기를 누르고 HookyQR.beautify를 검색해서 Beautify selection을 ctrl + alt + l으로 바꾸어주자

vscode는 현재 프로젝트의 VS Code 설정 정보가 들어 있는 폴더. 삭제해도 되지만 다시 키면 생성되어 있다.

태그를 하나 수정할때 뒤에 태그도 함께 수정해주는 확장기능

https://images.velog.io/images/tonyhan18/post/9876ef2e-3f7d-44c0-8b8a-649981cada7b/image.png

https://images.velog.io/images/tonyhan18/post/5f5e6eed-e9bf-479a-865b-692ed30adfd1/image.png

css에서 태그를 수정하기 위해서는 div{ }를 사용한다.

가급적 모두 저장을 사용하자 ctrl + k 때고 s

https://images.velog.io/images/tonyhan18/post/c14929c9-0ef1-4ccb-bde4-009edb46750c/image.png

난 수정함