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
