Visual Studio Code

VS Code에서 HTML/CSS/JS 프로젝트 만들어보기

jonbeo 2025. 5. 16. 09:35
반응형

 

 

1. 새로운 폴더 만들기

  1. 바탕화면이나 원하는 위치에 새 폴더 생성
    이름 예: my-first-website
  2. VS Code 실행 후 [파일 > 폴더 열기] 클릭 → 방금 만든 폴더 선택

 

폴더 생성
폴더 생성

2. 새 파일 만들기

폴더가 열리면 왼쪽 사이드바에서

  1. 우클릭 > 새 파일 선택
  2. 다음 3개의 파일을 만듭니다:
index.html  
style.css  
script.js

 

 

HTML, CSS, JS 새파일 생성
HTML, CSS, JS 새파일 생성

3. HTML 기본 구조 작성

index.html 파일에 다음 코드 입력:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>나의 첫 웹페이지</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>Hello, VS Code!</h1>
  <button onclick="showMessage()">눌러보세요</button>

  <script src="script.js"></script>
</body>
</html>

 

4. CSS로 디자인 추가

style.css 파일에 다음 코드 입력:

body {
  font-family: 'Arial';
  text-align: center;
  padding-top: 100px;
  background-color: #f0f8ff;
}

h1 {
  color: #2c3e50;
}

button {
  padding: 10px 20px;
  font-size: 16px;
}

 

5. JavaScript로 기능 추가

script.js 파일에 다음 코드 입력:

function showMessage() {
  alert('버튼을 눌렀어요!');
}

 

6. 웹페이지 실행해보기

  1. index.html 파일에서 우클릭 > 기본 브라우저에서 열기
    또는
    [Live Server 확장 프로그램] 설치 후 Go Live 버튼 클릭
  2. 브라우저에서 페이지가 열리고, 버튼을 누르면 팝업이 떠요!

7. 마무리 한 마디

이제 VS Code로 기본적인 웹 페이지 프로젝트를 만들 수 있게 되었어요!
이 구조를 기반으로 앞으로 다양한 HTML/CSS/JS 실습을 이어나갈 수 있습니다.
조금씩 수정하면서 직접 만들어보는 연습 강추강추 😊

반응형