HTML, CSS, JS의 관계

HTML

웹 문서의 뼈대를 구축하는 개념

 

CSS

디자인을 입히는 개념

 

JS (java Script)

HTML로 만든 뼈대에 CSS로 디자인을 입힌 웹 문서에 움직임을 넣는 개념

 

 

세가지의 파일을 연결하는 방법

1. 코드를 작성할 파일 생성

2. html 기본구조 입력 후 style, css, main.js 파일 생성

3.CSS는 head태그 안에 link태그를 사용하여 href="style.css"로 링크를 걸어준다

4.js는 헤드태그 안에 script 태그에서 넣는 방법과

   바디태그 가장 아래에 script태그를 넣는 방법 두가지방법이 존재

이렇게 된다면 모든 파일이 연결 된 프로그램으로 동작을 한다.

 

- js 연결 시 script tag 위치에 따른 차이점은 무엇인가?

scipt tag의 파일은 2가지 과정을 거쳐 실행되는데

     1. 다운로드 ㅡ> 2. 실행

 

1. 헤드태그안에 script tag 가있다면

html를 읽는 도중 script tag가 있으면 읽기를 멈추어 script tag를 우선적으로 다운로드, 실행을 거친다.

간단히 설명하자면

웹사이트가 완벽한 형태로 보여진다는 장점을 가지지만,

js 파일이 크거나 인터넷이 느린환경의 경우 웹사이트의 로딩이 오래 걸리는 단점을 가진다.

 

2. body tag 마지막에 script tag 있다면

html의 읽기가 끝난후 script tag를 읽어오기때문에 위의 방법보다 빠르게 페이지를 볼 수 있다.

 

3. async

헤드태그안 script tag 에서

<scipt async src = "main.js"></scriprt> 형태로 사용한다.

위에서 설명한 script tag 파일실행 과정에서 다운로드를 html 파일을 읽으면서 한후

실행할때만 html의 읽기를 멈추는 방법이다.

1번 방법과 같은 문제점을 겪을 수 있으며,

실행시킬 script tag 가 여러개일 경우 순서와 상관없이 먼저 다운로드되는 script tag를 실행

script 파일의 실행 순서에 영향을 받는 프로젝트일 경우 문제가 발생될 수 있다.

 

4.defer

헤드태그 안 script tag 에서

<script defer src = "main.js"></script> 형태로 사용한다.

html을 읽으며 script 또한 다운 받아 html의 파싱이 끝나면

순서대로 script 를 실행시켜 async의 단점을 보완하였다.