html의 빈 태그를 자동으로 xhtml방식으로 입력되게 vscode 설정하기

ursr0706·2020년 7월 16일
0
post-thumbnail

과제) 빈 태그에 자동으로 슬래시가 입력되도록 vscode 설정하기

알고보면 별거 아닌 vscode환경에서 빈 태그에 자동으로 ' / '를 붙이는 그 과정을 적어 보았다.

빈 태그

빈 태그는 스스로 닫아서 닫히는 태그가 없는 <br> <img>같은 태그를 말한다.
html5버전에서는 '/'가 없는 빈 태그와 '/'가 있는 빈 태그 둘 다 사용할 수 있다.
슬래시가 없는 빈 태그는 html1,2,3,4 버전에서 사용할 수 있었고 슬래시가 있는 빈태그는 XHTML버전에서 사용할 수 있었는데,
HTML5버전에서는 슬래시가 없는 형식, 있는 형식 모두 사용할 수 있으므로 개발하는 환경에 따라 원하는 형태를 사용하면 된다.
하지만 하나의 형태만 사용해야 한다. 붙일거면 전체 다 붙이고 안붙일거면 전부 붙이지 말아야 한다.
나중에 하나하나 수정하면서 고생할 수 있으니 통일해서 사용하자.
XHTML버전의 환경이나 프레임워크 사용에 따라 '/'를 붙이는것이 필수가 될 수있다.
나는 앞으로 리액트를 배워서 사용해야 하고 그럴려면 '/'를 붙여야 한다.

vscode환경에서 빈 태그에 자동으로 '/'가 들어가도록 설정하기

vscode에 html문서를 입력하는데 강사님은 빈태그 안에 자동으로 '/'가 들어간다.
내 vscode는 왜 안돼..?
빈 태그에도 '/'기호가 자동으로 들어가도록 설정 하라는 과제를 주셨다.
당연히 인터넷에 다 나와있지~ 하면서 구글링을 했다.

빈 태그 자동으로 닫기 vscode
빈 태그 자동 슬래시 vscode
빈 요소 끝에 자동으로 슬래시 vscode
빈 요소 자동 슬래시 vscode
empty elements auto close
empty tag auto close
empty tag auto '/'
How to automatically close an empty tag in vscode

한참 찾아도 안나온다.
도대체 뭐라고 써야 나오는걸까..
영어공부좀 할걸...하고 후회하면서 시간을 보니 밤 10시였다.
집에 갔다(깊은 반성). ㅋㅋㅋㅋㅋ

다음 날 다시 새로운 마음으로 검색했다.
스택오버플로우에 나왔다!!!ㅎㅎㅎ

설정하는 방법

  1. vscode의 settings.json파일을 연다.
  2. settings.json파일안의 프로퍼티에 아래의 코드를 추가한다.
"emmet.syntaxProfiles": {
    "html": "xhtml"
 },

마지막으로 html문서에 img태그같은 빈 태그를 입력해 보고 잘 적용됐는지 확인한다.
끝.

이렇게 간단한 문제였다..
html을 xhtml의 방식으로 입력되도록 emmet기능을 추가한게 전부인 듯 하다.
참.. ㅎㅎ
쉽게 생각하면 쉽고 어렵게 생각하면 한없이 어려운 것 같다.
html을 xhtml방식으로 입력되는 방법을 검색했으면 어렵지 않게 찾을 수 있었을텐데, 하하..
분명 누군가 한 명 쯤은 나 처럼 검색을 잘못해서 오랫동안 이 기능을 찾아다닐 수도 있겠지? ㅎㅎ
그 분을 위해 쓴 글이다.(How to set the xhtml style in vscode를 검색하세요!)
결론은..
스택오버플로우 짱.

profile
멋진 둥지를 위한 제비의 흔적

관심 있을 만한 포스트

0개의 댓글