2025. 4. 9. 12:54ㆍWEB/HTML
이번 포스팅은 <script> 태그에 대해 배워본다.
<script>
script 태그가 무엇인가?
TCP school 사이트를 통해 script 태그의 정의를 찾아봤다. (출처 : TCPSchool)
위 정의에서 확인할 수 있듯이 script 태그는 자바스크립트 같은 프로그래밍 언어를 HTML 문서에서 사용할 수 있도록 해주는 태그이다.
HTML과 자바스크립트에 대해 공부하다보면 HTML은 정적인 언어라는 말을 들을 수 있는데,
HTML 자체는 어떤 동적인 동작을 수행하지 않기 때문에 정적 웹페이지라고 표현한다.
작성해놓은 문서 그대로를 출력하며, 해당 웹페이지를 제공하는 서버에서 내용이 변경되지 않는 한 항상 똑같은 웹페이지를 보게 되는 것이다.
이와 반대로 동적으로 만들어지는 동적 웹페이지가 있는데,
이것은 자바스크립트와 같은 프로그래밍 언어를 사용하여 접속한 웹페이지에서 상황에 따라 동적으로 웹페이지의 내용이 만들어지는 것을 말한다.
Apple 맥북 에어 13 M2 - 노트북 | 쿠팡
쿠팡에서 Apple 맥북 에어 13 M2 구매하고 더 많은 혜택을 받으세요! 지금 할인중인 다른 노트북 제품도 바로 쿠팡에서 확인할 수 있습니다.
www.coupang.com
예시를 만들어보자.
웹페이지에서 사용자가 입력 필드에 어떤 내용을 입력하면 그 내용이 화면에 바로 출력되는 동작을 만들어보기로 한다.
html만으로 했을 때는 사용자의 입력을 받고, 전송까지는 구현할 수 있다.
다만, 전송한 내용이 웹페이지에 출력되지는 않는다.
왜냐하면 html 자체는 이미 만들어둔 내용만 출력할 수 있기 때문에 사용자 입력에 의한 반응을 웹페이지에 적용할 수 없기 때문이다.
아래의 코드를 작성하고 웹브라우저에서 실행해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML만 사용한 입력 폼</title>
</head>
<body>
<h1>HTML 폼 예제</h1>
<form>
<label for="username">이름을 입력하세요:</label>
<input type="text" id="username" name="username">
<input type="submit" value="제출">
</form>
<p>HTML은 입력한 값을 화면에 바로 출력하는 기능 또는 태그 자체가 없다.</p>
</body>
</html>
작성한 위의 코드를 웹브라우저에서 실행하면 아래와 같이 폼이 작성되어 나온다.
입력창에 "script 태그 예제" 라고 입력하고 "제출" 버튼을 눌렀다.
"제출" 버튼을 누르면 주소창의 주소만 변경될 뿐, 웹페이지의 내용에는 변화가 없는 것을 볼 수 있다.
(주소가 변경되는 이유는 form 태그가 사용자의 입력을 서버로 전송하는 역할을 하는데, 데이터 전송에 대한 속성을 넣지 않으면 주소창에 입력값이 그대로 전송되기 때문이다)
HTML은 form 태그를 활용해 어떠한 입력 정보를 작성하고 input 태그의 type="submit" 으로 입력 내용을 전송하는 기능은 있지만, 이것을 기반으로 웹페이지에 동적으로 출력해주는 기능 자체는 없는 것이다.
이런 HTML 문서에 script 태그를 적용하면 정적인 웹페이지를 동적인 웹페이지로 변경할 수 있게 된다.
동적인 웹페이지의 표현을 위해 아래의 코드를 작성해보자.
앞서와 같이 사용자의 입력을 받으면 그것을 웹페이지에서 출력해주는 동작을 수행할 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JavaScript로 사용자 입력 출력</title>
</head>
<body>
<h1>입력한 값을 웹페이지에 출력하기</h1>
<input type="text" id="userInput" placeholder="텍스트를 입력하세요">
<button onclick="printInput()">출력</button>
<p>출력 결과: <span id="output"></span></p>
<script>
function printInput() {
const inputValue = document.getElementById('userInput').value;
document.getElementById('output').textContent = inputValue;
}
</script>
</body>
</html>
작성한 파일을 웹브라우저에서 실행하고, 아무 텍스트를 넣고 출력해보자.
위 그림에서 볼 수 있듯이 "출력 결과"에 입력한 "script 태그 예제"라는 텍스트가 출력되는 것을 확인할 수 있다.
button 태그에 onclick 속성값을 넣어서 버튼을 클릭했을 때 어떤 동작이 수행되도록 했는데,
onclick 속성값에는 "printInput()" 이라는 값이 들어가 있다.
"printInput()" 이라는 값은 자바스크립트로 만든 함수의 이름이고, onclick="printInput()" 이라는 속성은 버튼을 클릭하면 "printInput()" 이라는 함수가 실행된다는 뜻이다.
printInput() 함수 내부를 설명하면,
const inputValue = document.getElementById('userInput').value;
HTML문서에서 id="userInput"인 요소를 찾는다. (즉, <input> 요소를 가리킨다)
.value 는 input 요소에 사용자가 입력한 값을 말한다. (예제에서는 "script 태그 예제"가 값이 된다)
document.getElementById('output').textContent = inputValue;
HTML문서에서 id="output"인 요소를 찾는다. (즉, <span> 요소를 가리킨다)
.textContent = inputValue; 부분에서 <span>태그 안에 글자를 넣는 동작으로 textContent가 사용되고,
textContent의 값으로 inputValue를 대입해서 앞서의 <input> 요소에 사용자가 입력한 값이 <span> 태그에 적용되는 것이다.
그러한 결과물이 앞서 확인한 "출력 결과: script 태그 예제"가 되겠다.
이렇게 HTML문서에 적용해 정적인 웹페이지를 동적인 웹페이지로 동작할 수 있도록 해주는 기능을 가진 것이 <script> 태그이다.
이 script 태그를 활용하기 위해서는 JavaScript 언어를 따로 익혀야한다.
본 포스팅에서는 HTML에 대해서만 기록하고 있기 때문에 자바스크립트에 대한 추가적인 설명은 배제한다.
끝으로 script 태그의 위치에 대해 조금 더 언급하고 마무리한다.
script 태그는 head 태그 내부 또는 body 태그 내부에 작성하면 된다.
1. <head> 태그 안에 작성할 경우
- 이 경우 자바스크립트는 HTML문서가 완전히 로드되기 전에 실행되기 때문에 아직 DOM 요소가 만들어지기 전이라 오류가 날 수 있다.
- 이런 문제를 방지하기 위해 defer 속성이나 DOMContentLoaded 이벤트를 사용해야 한다.
<script src="script.js" defer></script>
// 또는
document.addEventListener("DOMContentLoaded", function() {
// DOM이 준비된 뒤 실행할 코드
});
2. </body> 바로 위에 작성하는 경우 (가장 흔한 방식)
- HTML 요소들이 모두 로드된 후 실행되기 때문에 안전하게 DOM 조작이 가능하다.
- 초보자에게 가장 추천되는 위치이기도 함.
<body>
<h1>입력한 값을 웹페이지에 출력하기</h1>
<input type="text" id="userInput" placeholder="텍스트를 입력하세요">
<button onclick="printInput()">출력</button>
<p>출력 결과: <span id="output"></span></p>
<script>
function printInput() {
const inputValue = document.getElementById('userInput').value;
document.getElementById('output').textContent = inputValue;
}
</script>
</body>
* DOM (Document Object Model)
: 브라우저가 HTML을 읽고 만들어낸 객체 트리구조
script 태그에 대해서는 여기까지.
끝.
Apple 맥북 에어 13 M2 - 노트북 | 쿠팡
쿠팡에서 Apple 맥북 에어 13 M2 구매하고 더 많은 혜택을 받으세요! 지금 할인중인 다른 노트북 제품도 바로 쿠팡에서 확인할 수 있습니다.
www.coupang.com
쿠팡파트너스 활동을 통해 일정수수료를 받을 수 있음
'WEB > HTML' 카테고리의 다른 글
| [HTML] CSS stylesheet를 연결해주는 <link> 태그를 배워보자 (0) | 2025.04.01 |
|---|---|
| [HTML] 이미지를 삽입해주는 <img> 태그를 배워보자 (0) | 2025.03.30 |
| [HTML] HTML 문서 안의 또 다른 HTML 문서 <iframe> 태그를 배워보자 (0) | 2025.03.25 |
| [HTML] 다른 웹페이지로 이동 시켜주는 <a> 태그를 배워보자 (0) | 2025.03.19 |
| [HTML] 의미없는 태그 <div> 태그를 배워보자 (0) | 2025.03.19 |