HTML to CSS Selector

🤖 AI로 코딩할 때 필수!

ChatGPT, Claude, Copilot으로 페이지마다 CSS를 따로 생성하면 중복 선택자가 쌓입니다.

/* AI가 만든 페이지1 CSS */
.header { color: red; }
.container { width: 100%; }

/* AI가 만든 페이지2 CSS */
.header { font-size: 16px; }
.container { padding: 20px; }

Ctrl+Alt+V 한 번이면 자동 병합!

.header {
  color: red;
  font-size: 16px;
}
.container {
  width: 100%;
  padding: 20px;
}

⌨️ 단축키

Mac: Cmd 사용 템플릿 단축키는 HTML 파일에서만 동작하며, 현재 문서 전체를 템플릿으로 교체합니다.

📝 예시

1. HTML → CSS

<section id="hero">
  <div class="textbox">
    <strong>제목</strong>
    <p>내용</p>
  </div>
  <video></video>
</section>

Ctrl+Shift+V (가로):

#hero {}
#hero .textbox {}
#hero .textbox strong {}
#hero .textbox p {}
#hero video {}

Ctrl+Shift+Alt+V (세로):

#hero {
  
}
#hero .textbox {
  
}
#hero .textbox strong {
  
}
#hero .textbox p {
  
}
#hero video {
  
}

2. CSS 세로/가로 정리 (빈 줄 유지)

.nav-menu { display: none; }
.mobile-menu-btn { display: flex; }

.hero { height: 700px; }

Ctrl+Alt+1 (세로 정리):

.nav-menu {
  display: none;
}
.mobile-menu-btn {
  display: flex;
}

.hero {
  height: 700px;
}

Ctrl+Alt+2 (가로 정리):

.nav-menu { display: none; }
.mobile-menu-btn { display: flex; }

.hero { height: 700px; }

3. 미디어쿼리 지원

.footer { width: 200px; }
@media (max-width: 480px) {
  .footer { width: 300px; }
}

모든 단축키에서 미디어쿼리도 정상 처리됩니다!

✨ 특징

• 🤖 AI 생성 CSS 중복 자동 병합
• 📐 세로/가로 포맷 변환 (빈 줄 유지)
• 🔄 선택 영역 자동 대체 (선택 후 붙여넣기)
• 잘못 복사된 CSS도 자동 정리 (앞뒤 } { 제거)
• 주석 자동 제거
• @media 미디어쿼리 지원

🎯 지원 파일

.css .scss .sass .less (변환/정리 기능) .html (Shift+Enter <br> 삽입)

⚙️ 설정

File > Preferences > Settings 에서 htmlToCss 검색

예시:

• linesPerStep: 1 → 한 줄씩
• linesPerStep: 3 → 세 줄씩 나타남

💡 타이핑 중 ESC 누르면 나머지 즉시 붙여넣기!

Made with ❤️ by dunopi