바닐라 JS 맛보기

Oct 15, 2024

Contents

1. 폴더 및 파일 셋팅 2. app.js - alart 창으로 띄우고 싶다.3. CSS 파일 만들어서 스타일 입히기 4. 브라우저 화면 확인 - app.js 같은 현상 우리는 파일을 실행하는 것이 아니라 지금은 그냥 열어 보고만 있어~ 여기서 알 수 있는 것은 브라우저는 CSS 파일을 이런식으로 실행하지 않는 다는 것~5. 지금 필요한건 중간 접착제 같은 역할의 HTML이 필요!!6. 화면 확인

1. 폴더 및 파일 셋팅

2. app.js - alart 창으로 띄우고 싶다.

브라우저 화면 확인 했을때 내용이 다나온다.


alert("hi");

3. CSS 파일 만들어서 스타일 입히기


body{
    background-color: beige;
}

4. 브라우저 화면 확인 - app.js 같은 현상

우리는 파일을 실행하는 것이 아니라 지금은 그냥 열어 보고만 있어~ 여기서 알 수 있는 것은 브라우저는 CSS 파일을 이런식으로 실행하지 않는 다는 것~

5. 지금 필요한건 중간 접착제 같은 역할의 HTML이 필요!!

브라우저는 HTML을 열고 HTML은 자바스크립트를 가져 오는 것!

문서를 만들자!!


<!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">
    <title>Momentum</title>
</head>
<body>
    <script src="app.js"></script>
</body>
</html>

6. 화면 확인

alart 창도 띄워지고 배경색도 바뀜

See more posts

바닐라 JS 맛보기

1. 폴더 및 파일 셋팅

2. app.js - alart 창으로 띄우고 싶다.

3. CSS 파일 만들어서 스타일 입히기

4. 브라우저 화면 확인 - app.js 같은 현상

우리는 파일을 실행하는 것이 아니라 지금은 그냥 열어 보고만 있어~ 여기서 알 수 있는 것은 브라우저는 CSS 파일을 이런식으로 실행하지 않는 다는 것~

5. 지금 필요한건 중간 접착제 같은 역할의 HTML이 필요!!

6. 화면 확인

More articles

[바닐라 JS] Variables (변수)

[바닐라 JS] Basic Data Types

[Tistory] 게시글 상세보기

[Tistory] 게시글 리스트 보기