VSCode Snippets 만들기

강의 목표

VSCode의 Snippets 기능을 활용하여 반복적인 코드 작성을 자동화하는 방법을 학습합니다.
Tailwind CSS CDN 템플릿을 VSCode Snippets로 설정하여 빠르게 프로젝트를 시작하는 방법을 배웁니다.
Tailwind CSS를 기본적으로 적용한 HTML 템플릿을 설정하고, 이를 확장하여 Tailwind CSS와 더욱 친해지는 실습을 진행합니다.

실습 자료 준비

실습 1: 기본 Snippets 파일 생성

VSCode에서 Snippets 설정을 위해 아래 경로를 따라 이동합니다:
- 파일(File) -> 기본 설정(Preferences) -> 사용자 코드 조각(User Snippets) -> html.json 선택
- 또는 단축키: Mac: cmd + shift + p, Windows: ctrl + shift + p
검색창에 "Snippets" 입력 후, html.json 파일을 선택하고 아래의 Snippet 코드를 추가합니다:

{
  "Tailwind CDN Template": {
		"prefix": "tailwind-cdn",
		"body": [
			"<!DOCTYPE html>",
			"<html lang='ko'>",
			"<head>",
			"    <meta charset='UTF-8'>",
			"    <meta name='viewport' content='width=device-width, initial-scale=1.0'>",
			"    <title>Tailwind CSS</title>",
			"    <script src='<https://cdn.tailwindcss.com>'></script>",
			"</head>",
			"<body>",
			"    $1",
			"</body>",
			"</html>"
		],
		"description": "Basic Tailwind CSS CDN Template"
	}
}

실습 2: 기본 Snippets 사용하기

새로운 HTML 파일을 생성합니다.
파일 내에서 tailwind-cdn을 입력한 후, 자동 완성 목록에서 해당 Snippet을 선택합니다.
Tailwind CSS CDN 템플릿이 자동으로 삽입되며, h1 태그의 내용에 포커스가 설정되어 바로 수정할 수 있습니다.

실습 3: Tailwind 확장 실습

이제 Tailwind CSS와 조금 더 친해지기 위해 템플릿에 추가적인 레이아웃을 설정하는 맛보기 실습을 진행합니다.

html.json 파일에 아래와 같이 기존 Snippet을 확장하여 새로운 내용을 추가합니다:

{
  "Tailwind CDN Template with Layout": {
		"prefix": "tailwind-cdn-layout",
		"body": [
			"<!DOCTYPE html>",
			"<html lang='ko'>",
			"<head>",
			"    <meta charset='UTF-8'>",
			"    <meta name='viewport' content='width=device-width, initial-scale=1.0'>",
			"    <title>Tailwind CSS</title>",
			"    <script src='<https://cdn.tailwindcss.com>'></script>",
			"</head>",
			"<body>",
			"    <main class='container mx-auto p-6'>",
			"        <div class='bg-white p-6 rounded-lg shadow-md'>",
			"            <h1 class='text-3xl font-bold mb-4'>$1</h1>",
			"        </div>",
			"    </main>",
			"</body>",
			"</html>"
		],
		"description": "Tailwind CSS CDN Template with Main Container (max-w-5xl)"
	}
}

새로운 HTML 파일을 생성한 후, tailwind-cdn-layout을 입력하여 확장된 템플릿을 사용합니다.
이 확장된 템플릿은 main 태그를 추가하여 Tailwind의 레이아웃 유틸리티를 실습할 수 있습니다.