이번 포스트에서는 VSCode에서 HTML 코딩 시에 유용한 확장 프로그램 3가지를 소개해보려 합니다!
1. open in browser
2. Auto Rename Tag
3. Highlight Matching Tag
open in browser
- HTML 파일을 브라우저에게 쉽게 실행할 수 있도록 해주는 확장 프로그램
- 설치 후 실행 단축키 : alt + B
오른쪽 마우스를 클릭해서 실행하지 않아도, alt + B 단축키만으로 바로 크롬창을 띄울 수 있게 됩니다!
Auto Rename Tag
- 태그 수정 시 세트로 일치하는 태그도 한 번에 수정하게 해주는 확장 프로그램
이게 무슨 말이지? 라는 생각이 드시죠?
제가 이런 수정을 했다고 가정해봅시다.
p 태그를 h2 태그로 바꿔주었으니 닫는 태그도 세트로 바꿔줘야겠죠?
너무 귀찮지 않나요?
이럴 때! 바로 이 프로그램이 자동으로 뒤쪽 태그를 함께 수정해줍니다!
바로 이렇게 말이죠~
Highlight Matching Tag
- 서로 일치하는 열림 태그와 닫힘 태그를 표시해주는 확장 프로그램
이건 직접 보여드리는게 좋겠군요!
제가 <head> 태그를 클릭하니, <head>와 </head> 태그 각각에 노란 밑줄이 그어진 것이 보이시나요?
Highlight Matching Tag는 바로 이러한 기능을 하는 프로그램입니다!
'Study > HTML & CSS' 카테고리의 다른 글
| [CSS] <UL>, <LI> 리스트의 점을 제거하는 방법 (0) | 2024.08.23 |
|---|