<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<sricpt src="https://code.jquery.com/jquery-3.3.1.min.js"></sricpt>
<sricpt src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></sricpt>
</body>
</html>위 HTML 코드를 보면 css와 js의 위치가 서로 다르다.
HTML은 위에서부터 아래로 코드가 실행되기 때문에 head가 모두 실행된 후 body가 실행된다.
즉, head가 로딩되기 전까지 사용자에게 백지 화면만 노출된다.
불러올 js 용량이 클 경우 페이지 로딩 속도 이슈가 발생 할 수 있기 때문에 js는 body안에 작성하는 것이 좋다.
반면에, css는 화면을 그리는 역할이므로 body에서 작성 시 스타일이 적용되지 않은 화면을 볼 수 있어 head에 작성 하는 것이 좋다.
별도로 bootstrap을 사용할 경우 bootstrap.js는 제이쿼리에 의존하기 때문에 jquery.js를 먼저 호출해야 한다.
'Web & Mobile > HTML' 카테고리의 다른 글
| [HTML] id, class 차이 (0) | 2020.08.10 |
|---|---|
| [HTML] 태그와 엘리먼트(요소) (0) | 2020.08.10 |