html 파일에서 css 코드 미리보는 방법 [Emmet 미리보기 기능-Peek Definition]

강의 듣다가 신기한 기능 발견해서 기억해두려고 적어본다!

 

 

 

 

프론트엔드 패키지 강의 끊어놓고 기본기부터 보고 있는데

이렇게 html 파일에서 link 된 css 파일의 해당 클래스 관련 css가 뿅뿅 나오는 거다..!(오?)

 

 

무슨 기능일까? 바로 gpt 한테 물어봤다 😆

 

 

 

Emmet 미리보기 기능

 

- settings.json 을 통해 변경

 

VS Code 에서 Preferences: Open Settings(JSON) 실행 후

{
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
    "editor.suggest.showWords": true,
    "editor.suggest.showSnippets": true
}

위 코드를 붙여 넣는다.

 

 

 

Peek Definition (CSS 코드 미리보기)

단축키 : Option + F12

 

1. HTML 코드에서 해당 태그 위에 커서 놓기

2. Option + F12 눌러 Peek Definition 실행

➡️ 현재 HTML 파일에서 적용된 CSS 코드가 작은 팝업으로 표시됨

 

 

---

 

 

Go to Definition (CSS 정의로 이동)

단축키 : Cmd + 클릭

 

1. HTML 코드에서 해당 태그 위에 커서 놓기

2. Cmd 키 누른 상태로 클릭

➡️ 해당 요소에 적용된 CSS 코드가 있는 파일(~.css)로 바로 이동