바닐라 JS) 1. 프로젝트 생성하기

Aug 30, 2024

1. 프로젝트 생성하기

폴더 생성하기


midir 폴더이름

VS Code 프로젝트 생성하기


 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>

HTML 파일에서 CSS 파일을 불러와서 적용됨

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>

See more posts

바닐라 JS) 1. 프로젝트 생성하기

1. 프로젝트 생성하기

2. js 파일 만들기

3. index.html 파일 만들기

4.파일 내용 열어보기

결론 : 파일을 가져오기만 한다고 실행되는 것이 아님! 브라우저가 HTML을 열어서 파일을 가져와야 실행됨

5. index.html 에서 파일 실행하기

More articles

바닐라 JS) 3. 변수 사용하기

바닐라 JS) 2. 데이터 타입

Firebase Cloud Messaging 푸쉬 알림 테스트하기

Firebase Cloud Messaging : 푸쉬 알림