1. 프로젝트 생성하기
- 폴더 생성하기
midir 폴더이름
code 프로젝트이름
- VS Code에서 프로젝트 생성하기
- 만들어놓은 폴더 열기
2. js 파일 만들기
- 이름은 상관없이 js로 만들면 됨
3. index.html 파일 만들기
4.파일 내용 열어보기
- app.js 파일에 코드 입력하기
alert("hi");- 저장된 폴더 열기
- 파일을 브라우저에 끌어넣기
- 코드 내용이 화면에 출력됨
- style.css 파일 만들기
- 코드 입력하기
body{
background-color: beige;
}
결론 : 파일을 가져오기만 한다고 실행되는 것이 아님! 브라우저가 HTML을 열어서 파일을 가져와야 실행됨
5. index.html 에서 파일 실행하기
- ! + enter키
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- style.css 적용하기
<link rel="stylesheet" href="style.css"> <!--style.css 적용하기--><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <!--style.css 적용하기-->
<title>JS Crome App</title>
</head>
<body>
</body>
</html>
- app.js 적용하기
<script src="app.js"></script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <!--style.css 적용하기-->
<title>JS Crome App</title>
</head>
<body>
<script src="app.js"></script> <!--app.js 적용하기-->
</body>
</html>
Share article