[노마드코더]바닐라JS로 크롬 앱 만들기 (2)HTML은 JavaScript와 CSS를 붙여주는 접착제 역할이다!

웹 페이지를 만들기 위해서는 index.html / app.js / style.css 세 가지가 필요하다.

app.js는 JavaScript를 기반으로 작성하는 파일이고, style.css는 CSS를 기반으로 작성하는 파일이다.

이 두 파일을 웹 브라우저에서 실행하면 단순히 코드를 해석하는게 아니라 읽어오는 역할만 한다.

따라서 두 파일을 해석할 수 있는, 합쳐서 보여주는 '접착제' 역할이 필요하다.

바로 이 접착제 역할을 하는 것이 HTML이다.

웹 브라우저는 HTML을 열고, HTML에서 CSS와 JavaScript 파일을 가져오게 된다.

app.js

style.css

index.html

코드는 간단하다.

VSCode에서 자동 완성 기능을 이용하여 '!' 입력 후 엔터를 치면 기본 양식을 제공해준다.

여기서 우리는 #11 에 app.js를 연결해주고, #7 에 style.css 를 연결해준다.

index.html 파일을 웹 브라우저에서 실행하면 다음과 같이 alert 창이 나타나게 된다.