바닐라 JS로 크롬 앱 만들기 - 1 일차

1. Vscode install.

 

먼저 Vscode 설치가 필요합니다.

아래 link 로 들어가서 자신의 운영체제에 맞는 파일을 설치하도록 합시다.

 

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

2. Explorer 에 자신의 폴더 만들기.

 

내컴퓨터에 "Study" 라는 폴더를 만들고 Vscode 에서 폴더 불러오기를 하면 아래와 같은 화면이 만들어 집니다.

 

3. Banner 만들기.

 

  # Chrome 상단에 알람이 "hi" 라는 banner 가 뜨도록 만들어 보자.

 

Study 폴더 하단으로 아래와 같이 만들어 보자. app.js 를 만들고 alert("hi") 를 입력하자.

이렇게 code 를 만들고 실행시켜보면 banner 가 뜨는 것 없이 아래와 같이 글만 나타날 것이다.

그 다음. style.css 를 만들고 body{background-color: beige;}를 입력하여 베이지 배경색을 입혀주도록 하자.

이것도 실행시켜보면 글로만 나온다.

이제 위 2개를 연결시켜 보자. index.html 을 만들고 !를 입력하면 아래와 같이 script 가 생성된다.

그 다음 title 을 폴더명(Study), body 에 app.js 를 입력하고 link rel 을 입력하여 연결해주면~!

 

 

짠! 위와 같은 beige color "hi" banner 가 생성된다!!