📌HTML VScode 유용한 익스텐션 ⌨️단축키

25-02-27 기준. 기술 발전에 따라 나중엔 사용 안하게 될지도 모름주의.
                       사용하는 시점에서 확인이 필요 (깨끗한 익스텐션 관리🧼🫧)

 

• Auto Rename tag : 여닫 양쪽 자동수정
• htmltagwrap: 이미 내용 쓰고 나서 감싸주는 코드 생성할 때 ( Alt + W )
• Error Lens : 코드에 에러가 있을 경우 해당 줄에 오버레이 형식으로 띄워줌 (출처: https://inpa.tistory.com/entry/VS-Code- )
• bookMarks : 브라우저에서 사이트를 북마크하면, 나중에 메뉴에서 찾아 클릭만 하면 바로 그 사이트로 이동
  출처: https://inpa.tistory.com/entry/VS-Code- 
• Bracket Select
  괄호 안의 문자열을 선택할때 , 이제 alt + a 로 편리하고 빠르게 선택
  출처: https://inpa.tistory.com/entry/VS-Code-⏱️
• Surround : 제어문 블럭을 자동완성해주는 아주 편한 도구
                   (코드를 선택하고 ctrl + shift + T 를 누르고 제어문을 선택하면 자동완성)
  
  
• Highlight Matching Tag : 여러 태그가 중첩되어 있을 때 해당 태그의 끝이 어디인지 찾기 힘들 때가 있다. 그럴 때 쌍이 되는 태그를 표시해 주는 플러그인. 깔지않아도 회색, but 색변경가능  (출처: https://inpa.tistory.com/entry/VS-Code-⏱️-)
• HTML End Tag Labels : html 태그 코드가 길어 이 태그가 어느 태그였는지 깜빡할때, 도움을 주는 익스텐션이다.
  마지막 닫는 태그에 클래스명을 주석처리로 표시
  Shift + Enter          |||  Next Line (insert "<br> + \n")
  Ctrl(Cmd) + Enter ||| Next Paragraph (insert "\n + </p> + \n + <p> + \n"
• Html Auto Completion : 자주 쓰이는 태그 구성 자동완성 익스텐션이다. 
  !html 치고 엔터 
  !table 치고 엔터
  !form 치고 엔터

 

-기존사용-

• Tabnine : VScode ai 툴 (비교적 보안에 안전. 예전 HTML CSS Support 기능이 Tabnine에 있음)
• prettier : 코드  스타일링. 줄정렬 , 자동정렬 ( Alt + Shift + f )
• Live Preview : 라이브 서버보다 이것이 짱임 (Live Sever : 라이브로 볼수있다 이말인것)
                            

Live Preview 짱

-기존 재미루-

• Power Mode

 

-VS익스텐션 말고 추가로 설치할 거-

• DeepL

 

-현재는 필요없지만 나중에 설치할것-

• Color Highlight (굳이, 이젠 다 색 뜸)
• es6-string-html
  
• GitLens, Git Graph
• TailwindCSS : 이건 한두페이지 만들 때 유용할듯 ( 여러 비슷한 페이지 생성은 유지보수 이슈 비추) .     
                         이거쓰면 CSS파일 안만들어도 됨
• Brackets Extension Pack  : 4가지 다 들어있음
  (Live Server, IntelliSense for CSS class names in HTML, CSS Peek, ~ )
  진한글씨 두개가 쓸만해보임 ^+E누르면 css바로 입력할 수 있는 
  CSS Peek이 강력한데 다음과 같은 기능
• CSS Peek :
  엿보기: CSS 파일을 인라인으로 로드하고 거기서 바로 빠르게 편집합니다. (Ctrl+Shift+F12)
  이동: css 파일로 바로 이동하거나 새 편집기에서 엽니다(F12 또는 컨트롤 누르고 클릭).
  호버: 심볼 위로 마우스를 가져가면 정의가 표시됩니다(Ctrl+호버).

 

⌨️ 단축키

^ + /	주석처리
shift + alt + 화살표	선택줄 복제
alt + 화살	선택줄 이동
^ + x (또는 ^+shift+k)	커서 줄 삭제
^ + enter	선택무시 다음줄로
^ + D	다중 편집 1 (수정하고픈만큼 ^ + D 누름됨) esc 는 해지
^ +alt+화살표	다중 선택 편집 2 ( ^ + D가 더 유용)
alt + 클릭	다중 선택 편집3 (선택한 부분만)

 

🪄🎩자동생성 활용

!    →HTML템플릿자동생성

div.className  →<div class="className"></div> 자동생성

div#id →<div id="idName"></div>

div>ul>li →    
<div>
        <ul>
            <li></li>
        </ul>
    </div>

div>ol+ul →    
    <div>
        <ol></ol>
        <ul></ul>
    </div>

div.wrap>ul>li*3.item →
<div class="wrap">
    <ul>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

div.wrap>(ul>li*3.item)+ol>li*3.item  →
    <div class="wrap">
        <ul>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        <ol>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ol>
    </div>

ul>li*3>a[href="#"] →
<ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">제품</a></li>
    <li><a href="#">연락처</a></li>
</ul>

    header>nav>ul>li*3>a[href="#"]  →
    <header>
        <nav>
            <ul>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </nav>
    </header>

📌 설명

Emmet 코드의미변환 결과

ul>	<ul> 생성	<ul>
li*3>	<li>를 3개 생성	<li>...</li> 3개
a[href="#"]	<a> 태그 생성 & href="#" 속성 추가	<a href="#">...</a>

 

ul.nav-menu> li*3 > a[href="#"] →
<ul class="nav-menu">
    <li><a href="#">홈</a></li>
    <li><a href="#">제품</a></li>
    <li><a href="#">연락처</a></li>
</ul>

 

---

✅ CSS에서 자주 쓰는 Emmet 단축어

1️⃣ 기본 속성

Emmet 입력 변환 결과

w100	width: 100px;
h100	height: 100px;
m10	margin: 10px;
p20	padding: 20px;
bgc#f00	background-color: #f00; (빨강)
c#333	color: #333; (텍스트 색상)

📌 예제

div {
    w100; /* width: 100px; */
    h50;  /* height: 50px; */
    bgc#f00; /* background-color: red; */
}

🔹 입력 후 Tab 또는 Enter 키 누르면 자동완성! 🚀

---

2️⃣ margin & padding (여러 값)

Emmet 입력 변환 결과

m10-20	margin: 10px 20px;
m10-20-30-40	margin: 10px 20px 30px 40px;
p5-10	padding: 5px 10px;

📌 예제

.box {
    m10-20; /* margin: 10px 20px; */
    p5-10;  /* padding: 5px 10px; */
}

---

3️⃣ display, position, border, flex 관련

Emmet 입력 변환 결과

d	display: block;
dib	display: inline-block;
df	display: flex;
jc-sb	justify-content: space-between;
ai-c	align-items: center;
pos-a	position: absolute;
pos-r	position: relative;
b1-s#000	border: 1px solid #000;

📌 예제

.flex-container {
    df;       /* display: flex; */
    jc-sb;    /* justify-content: space-between; */
    ai-c;     /* align-items: center; */
}

---

4️⃣ font, text, opacity

Emmet 입력 변환 결과

fs20	font-size: 20px;
fw700	font-weight: 700;
ta-c	text-align: center;
lh1.5	line-height: 1.5;
o0.8	opacity: 0.8;

📌 예제

h1 {
    fs20;  /* font-size: 20px; */
    fw700; /* font-weight: 700; */
    ta-c;  /* text-align: center; */
}

---

🎯 정리

🔹 Emmet을 사용하면 CSS 코드도 빠르게 작성 가능!
🔹 Tab 또는 Enter 키를 눌러 자동완성
🔹 자주 쓰는 w100, m10-20, df 같은 단축어 활용

---