HTML <script> 태그는 일반적으로는 HTML 파일 내부에 자바스크립트 파일을 삽입하는데 사용됩니다.
document.write() 라는 자바스크립트 함수를 사용하는 예제를 통해 쓰임새를 알아봅니다.
document.write()는 브라우저 화면에 글씨를 출력해주는 역할을 합니다.
예제를 만들어보면, 하기와 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script Tag</title>
</head>
<body>
<script>
document.write('hello!');
</script>
</body>
</html>결과로는 브라우저 화면에 hello! 라고 텍스트를 출력해줍니다.
<script> 태그 의 주요특성 중 하나는 <script> 태그 사이에 자바스크립트 코드가 와야 한다는 점 입니다.
<script> 태그는 웹 문서 어디든 위치 할수 있으며, 하나의 웹문서 안에서 여러번 사용이 가능합니다.
하지만, <script> 브라우저가 HTML 코드를 읽어들일때 위에서 부터 아래로 한줄씩 읽으면서 분석을 하기때문에 <head> 섹션 사이에 <script>코드가 있으면 웹페이지를 로딩하는게 시간이 걸릴 수 있겠습니다. 특이한 상황이 아니라면 </body> 종료 태그 전에 삽입하는 것이 좋습니다.
그리고, 웹 문서와 자바스크립트 코드가 혼용이 되면 소스분석 및 유지보수에도 어려움이 생깁니다.
그렇기에 HTML 웹 문서와 자바스크립트 파일을 분리해서 사용하는 것이 좋겠죠.
<script> 태그의 src 속성을 활용하여 외부의 자바스크립트 파일을 연결하기도 합니다.
해당 예제는 하기 포스팅에서 다루어 보겠습니다.
HTML에 자바스크립트 연결 하기
자바스크립트 파일을 HTML 파일과 분리하여 만들면 소스 관리 및 유지보수에 유용합니다., 여러 HTML에 하나의 자바스크립트 파일을 연동해서 사용할 수 있고, HTML 에는 웹 문서의 구조만 표현하고
soo0100.tistory.com
<script> 태그의 기능에 대해서 알아보았습니다.
감사합니다.
'앱 만들기 > HTML5 study' 카테고리의 다른 글
| 1강 HTML 기본구조 (1) | 2024.06.16 |
|---|---|
| HTML <style>태그 와 style 속성 (1) | 2023.07.25 |
| HTML onkeydown 이벤트 (4) | 2023.07.22 |
| HTML 태그 구조 (3) | 2023.07.03 |
| HTML 태그 와 속성 이란? (2) | 2023.05.31 |
댓글