3단계: 첫 프로젝트 만들기 & 작업 공간(Workspace) 이해하기
초보자가 가장 많이 하는 실수는 '개별 파일 하나만 달랑 여는 것'입니다. 왜 반드시 폴더(Folder)를 열고 작업해야 하는지, 그리고 1초 만에 HTML 뼈대 코드를 완성하는 마법 단축키를 배웁니다.
초보자 필독 원칙: 파일 열기(X) vs 폴더 열기(O)
VS Code에서 [파일 열기(Open File)]로 index.html 하나만 열면, CSS나 이미지 상대 경로를 찾지 못하고 Live Server 실행 버튼도 나타나지 않습니다.
항상 내 컴퓨터에 폴더를 먼저 만들고, [폴더 열기(Open Folder)]를 통해 전체 작업 공간(Workspace)을 여는 습관을 들이세요!
순서대로 따라하는 첫 프로젝트 생성 실습
-
1
프로젝트 폴더 만들기
내 컴퓨터의 바탕화면이나 작업용 드라이브(예:
C:\my-study또는~/Desktop/my-first-web)에 새 폴더my-first-web을 생성합니다. (※ 폴더 이름은 가급적 영문 소문자와 하이픈(-)을 권장합니다) -
2
VS Code에서 폴더 열기 (Open Folder)
VS Code 상단 메뉴에서 [파일(File)] > [폴더 열기(Open Folder...)]를 누르거나, 단축키 Ctrl + K 누른 뒤 Ctrl + O (Mac: ⌘ + O)를 눌러 방금 만든
my-first-web폴더를 선택합니다.💡 "이 폴더의 작성자를 신뢰합니까? (Trust Authors)" 팝업이 뜨면 [예, 작성자를 신뢰합니다]를 클릭하세요. -
3
새 파일 index.html 생성
좌측 파일 탐색기(Explorer)에서 폴더 이름 옆에 있는 [새 파일(New File)] 아이콘(플러스가 달린 문서 모양)을 누르고,
index.html을 입력한 뒤 엔터를 칩니다. -
4
★ Emmet 마법: 느낌표(!) 하나로 뼈대 코드 생성하기
빈
index.html편집 화면에서 느낌표!를 하나 입력하면 작은 추천 박스가 뜹니다. 이 상태에서 키보드 Tab 키 또는 Enter 를 누르세요!1초 만에 HTML5의 표준 뼈대 코드가 자동으로 완성됩니다:
index.html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>나의 첫 웹사이트</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <h1>안녕하세요! 코딩 시작을 환영합니다 🎉</h1> <p>VS Code로 작성한 저의 첫 번째 웹페이지입니다.</p> <button>버튼 클릭해보기</button> </div> </body> </html> -
5
style.css 파일 만들고 연동하기
다시 새 파일 아이콘을 눌러
style.css파일을 만들고 아래 스타일 코드를 입력한 후 저장(Ctrl+S)합니다.style.cssbody { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #f0f7ff; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .card { background: white; padding: 32px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 120, 212, 0.15); text-align: center; max-width: 420px; } h1 { color: #0078d4; font-size: 1.5rem; } p { color: #475569; font-size: 1rem; } button { background: #0078d4; color: white; border: none; padding: 10px 20px; font-size: 0.95rem; border-radius: 6px; cursor: pointer; font-weight: 600; margin-top: 12px; }