HTML/CSS 에센셜 | 위니북스

스니펫 만들기

1. snippet

(작은) 정보,소식, 한 토막
재사용할 수 있는 소스 코드 조각, 코드 일부분만을 발췌한 것을 가리키는 말입니다.
사용자가 조작 중 반복 타이핑을 줄일 수 있게 도와줍니다.
snippet-generator

!! html

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body></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></title>
  </head>
  <body></body>
</html>

변환하고자 하는 코드를 스니펫으로 변환해주기!

snippet generator

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

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

{ } 중괄호 안에 복사한 스니펫을 붙여넣으셔야 합니다.

커서 위치 순서 지정

$번호

잘 안된다면?

html.json 파일 내용을 지운다.
아래 코드를 복사해서 붙여넣는다.
잘되는지 !! 로 테스트해 본다.

{
  "html": {
    "prefix": "!!",
    "body": [
      "<!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>",
      ""
    ],
    "description": "한국어 페이지용 html 템플릿"
},

{
  "html": {
    "prefix": "!!",
    "body": [
      "<!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>",
      ""
    ],
    "description": "한국어 페이지용 html 템플릿"
},

vscode에서 제공하는 변수

vscode에서 제공하는 변수