HTML to CSS Selector

HTML 마크업을 복사해서 CSS 파일에 붙여넣으면 전체 경로 선택자로 자동 변환!

✨ 기능

• HTML 복사 → CSS 파일에서 붙여넣기 → 선택자 자동 생성
• 부모-자식 관계가 유지되는 전체 경로 형식
• CSS 파일과 SCSS 파일 자동 구분

⌨️ 단축키

Mac: Cmd+Shift+V / Cmd+Alt+V

📝 사용 예시

1. HTML 복사

<div class="product-info">
  <p class="product-name"><a href="#">상품명</a></p>
  <div class="product-price">
    <span class="price-sale">₩158,000</span>
  </div>
</div>

2-1. CSS 파일에서 Ctrl+Shift+V (한 줄)

.product-info {}
.product-info .product-name {}
.product-info .product-name a {}
.product-info .product-price {}
.product-info .product-price .price-sale {}

2-2. CSS 파일에서 Ctrl+Alt+V (여러 줄)

.product-info {
  
}
.product-info .product-name {
  
}
.product-info .product-name a {
  
}
.product-info .product-price {
  
}
.product-info .product-price .price-sale {
  
}

2-3. SCSS 파일에서 붙여넣기 (자동 중첩)

.product-info {
  .product-name {
    a {
    }
  }
  .product-price {
    .price-sale {
    }
  }
}

🎯 지원 파일

• .css
• .scss
• .sass
• .less

📋 변환 규칙

1. 클래스가 있으면 → .classname
2. ID가 있으면 → #idname
3. 클래스/ID 없으면 → 태그명 (a, button, span 등)
4. 닫는 태그만 있는 경우 → 무시

💡 팁

• 수업/강의 중 빠른 CSS 작성에 유용!
• Emmet과 함께 사용하면 생산성 UP!

📄 라이선스

MIT License

Made with ❤️ by dunopi