HTML/CSS 에센셜 | 위니북스

스니펫 만들기

1. snippet

스니펫은 자주 사용하는 코드 조각을 미리 저장해두고 짧은 키워드로 불러와 사용할 수 있게 해주는 기능입니다. 개발 시 반복적으로 작성하는 코드 패턴(예: HTML 기본 구조, 함수 템플릿, 자주 쓰는 CSS 속성 세트 등)을 매번 직접 타이핑하는 대신, 몇 글자만 입력하고 탭 키를 누르면 미리 정의해둔 전체 코드가 자동으로 삽입됩니다.

2. snippet 설정하기

!! 을 입력하면 한국어 Snippet이 나오게 직접 설정해봅시다.

VSCode에서 File > Preferences > User Snippets 메뉴를 클릭합니다.
드롭다운 목록에서 html.json을 선택합니다.

만약 아래에 자동 완성 `html.json` 리스트가 뜨지 않는다면?

최초 스니펫 설정 시 자동 완성이 뜨지 않을 수 있습니다. 그럴 땐 `html`만 입력하여 항목을 클릭하면 동일하게 적용할 수 있습니다.

snippet generator 에 들어가 원하는 코드 조각을 정의합니다. 이때 $ 을 통해 탭으로 이동 가능한 커서 위치를 조정할 수 있습니다.

snippet generator

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>$1</title>
  </head>
  <body>
    $2
  </body>
</html>

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>$1</title>
  </head>
  <body>
    $2
  </body>
</html>

{ } 중괄호 안에 복사한 스니펫을 붙여넣습니다.

vscode에서 제공하는 변수

vscode에서 제공하는 스니펫