html 줄 깔끔하게 만들기 (VS code : Shift + Alt + F)

VS code 사용하다가, html이 정리가 안되서 불편하셨다면, 아래 단축키를 활용해 보세요 (VS code 단축키 : Shift + Alt + F)


Shift + Alt + F 눌러주면 정렬 해결

html 정리가 안되서

불편하게 일일이 스페이스, 엔터 누르면서

작업하시지는 않죠?


설마 아직도 이렇게 작업하셨다면,

지금 당장,

Shift + Alt + F 눌러보세요.


VS Code에서 쉽게 드레그 해서,

눌러주면,

깔끔하게 정리됩니다.


html 깔끔하게 정렬하기

html 줄 깔끔하게 만들기 (작업 전)

아래와 같이 정리가 되지 않은

html을 쉽게, 깔끔하게 

만들어 드립니다.


       <p style="text-align: left;"><span style="font-size: large;">디스크립션 (150~200)</span></p>
              <p style="text-align: left;"><span style="font-size: large;">디스크립션&nbsp;</span></p>


<h1 data-ke-size="size26" style="border-bottom: 2px solid rgb(22, 67, 214); border-left: 10px solid rgb(22, 67, 214); border-right-width: 0px; border-top-width: 0px; box-sizing: border-box; letter-spacing: 1px; line-height: 1.5; margin: 5px 0px; padding: 3px 5px;">
    h1 주제목  반복</h1>
                 <p style="text-align: left;"><span style="font-size: large;">본문본문</span></p><p style="text-align: left;"><span style="font-size: large;"><br /></span></p>


html 줄 깔끔하게 만들기 (작업 후)

Shift + Alt + F 눌러주시면

아래와 같이 깔끔하게 정리가 됩니다.


<p style="text-align: left;"><span style="font-size: large;">디스크립션 (150~200)</span></p>
<p style="text-align: left;"><span style="font-size: large;">디스크립션&nbsp;</span></p>


<h1 data-ke-size="size26"
    style="border-bottom: 2px solid rgb(22, 67, 214); border-left: 10px solid rgb(22, 67, 214); border-right-width: 0px; border-top-width: 0px; box-sizing: border-box; letter-spacing: 1px; line-height: 1.5; margin: 5px 0px; padding: 3px 5px;">
    h1 주제목 반복</h1>
<p style="text-align: left;"><span style="font-size: large;">본문본문</span></p>
<p style="text-align: left;"><span style="font-size: large;"><br /></span></p>


주요 태그 : #html #html정렬 #VScode #shft+alt+f


글이 도움이 되셨다면, 댓글 남겨주시면, 더 좋은 글로 보답하겠습니다~!

wish wifi - 위시 와아파이에 방문해 주셔서 감사합니다!

댓글 쓰기

다음 이전