스크립트 코드를 문서에 포함하거나 참조(외부 스크립트)
자바스크립트를 가져올 수 있는 스크립트 태그이다.
| 속성 | 의미 | 값 | 기본값 | 특징 |
| async | 스크립트의 비동기적 실행 여부 | Boolean | src 속성 필수 | |
| crossorigin | 별도의 도메인을 사용하는 사이트의 오류 로깅을 허용하기 위해 사용 | anonymous, use-credentials |
||
| defer | 문서 파싱(구문 분석) 후 작동 여부 | Boolean | src 속성 필수 | |
| src | 참조할 외부 스크립트 URL | URL | ||
| type | MIME 타입 | text/javascript |
cf. 동기 VS 비동기
동기 : 순차적으로 실행하는 것
비동기 : 순차적인것이 아니며, 필요에 의해서 건너띄거나 다시 돌아간다는것이 가능하다.
async는 직접적으로 입력할 일이 거의 없다.
defer 문서파싱은 중요하다! 왜냐하면 html에 있는 내용을 javascript로 찾아서 분석해야하는 경우, javascript로 실행해야하는 경우가 있는데 실행하는 자바스크립트가 언제 동작하느냐에 따라서 html을 제대로 실행 할 수도 있고, 제대로 실행하지 못할 수도 있다. 그래서 defer을 통해서 실행 시점을 제어 할 수 있다.
예시를 보여주겠다.
<head>
<meta charset="UTF-8">
<title>콘텐츠 구분 예제</title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="stylesheet" href="./main.css">
<script src="./js/main.js"></script>
</head>
<body>
<div id = "my-name">HEROPY!</div>
</body>const myName = document.getElementById('my-name');
console.log(myName.innerText);다음과 같이 실행을 하면, script태그는 my-name을 인지하지 못한다. 그러므로 defer을 추가해서 구문 분석 후 작동을 하게 해줘야 한다.
<방법은 두가지가 있다. 1. defer을 추가 2. script태그를 물리적으로 맨 밑에 두기>
<head>
<meta charset="UTF-8">
<title>콘텐츠 구분 예제</title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="stylesheet" href="./main.css">
<script src="./js/main.js" defer></script>
</head>
<body>
<div id = "my-name">HEROPY!</div>
</body>
<head>
<meta charset="UTF-8">
<title>콘텐츠 구분 예제</title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div id = "my-name">HEROPY!</div>
<script src="./js/main.js"></script>
</body>script태그를 맨 밑에 위치시켜서 물리적으로 읽은 후 실행하는 것이 아닌, defer을 이용해서 구문분석하는 방법도 있다. 실무에서 defer을 이용해서 많이 사용하고, defer없이 물리적으로 맨 밑으로 위치시켜서 작동 시키기도 한다.
'HTML > 요소' 카테고리의 다른 글
| 스크립트 - NOSCRIPT (0) | 2021.01.04 |
|---|---|
| 스크립트 - SCRIPT 2 (0) | 2021.01.04 |
| 내장 콘텐츠 - CANVAS (0) | 2021.01.04 |
| 내장 컨텐츠 - IFRAME (0) | 2021.01.04 |
| 멀티미디어 - figure, figcaption (0) | 2021.01.04 |