소개
JavaScript은 별도의 소개가 필요 없습니다. 웹 개발을 위한 가장 인기 있는 프로그래밍 언어 중 하나입니다. 작동 방식은 HTML 및 CSS와 유사합니다. 이 모든 언어는 웹 기반 애플리케이션 및 프로그램을 디자인하고 개발하는 데 도움이 됩니다.
그렇다면 JavaScript는 구체적으로 어떻게 유용할까요? JavaScript의 도움으로 웹 애플리케이션과 웹 페이지를 매우 대화형으로 만들 수 있습니다. 현대 사회에서는 안주할 여유가 없습니다. 처음 몇 초 안에 시청자의 시선을 사로잡고 계속 참여하도록 유도해야 합니다. 흥미롭고 반응이 빠른 웹 디자인이 이를 위한 가장 좋은 방법 중 하나라는 점에는 의심의 여지가 없습니다. 다행히도 대부분의 브라우저는 JavaScript를 지원합니다. 일부 내장 엔진의 도움으로 브라우저에서 실행할 수 있습니다.
HTML에 JavaScript 추가하기
웹 앱에 JavaScript 파일을 사용하려면 HTML 마크업과 함께 실행해야 합니다. HTML에 JavaScript를 추가하는 방법에는 두 가지가 있습니다. 한 가지 방법은 HTML 문서 내에서 인라인으로 수행하는 것입니다. 다른 방법은 별도의 파일로 추가하는 것입니다. 이 파일은 HTML 문서와 함께 다운로드됩니다.
이 튜토리얼에서는 HTML에 JavaScript를 추가하는 방법을 자세히 살펴볼 것입니다 이 두 가지 방법을 사용하여.
HTML 문서에 인라인으로 JavaScript를 추가하는 방법
먼저, HTML 문서에 인라인으로 JavaScript를 추가하는 방법을 살펴보겠습니다. 이를 위해 전용 HTML 태그를 사용해야 합니다. 바로 <script>입니다. 이 태그는 JavaScript 코드를 감쌉니다. HTML 마크업 전체에서 원하는 곳 어디에나 태그를 배치할 수 있습니다. 배치하는 위치는 JavaScript가 로드되기를 원하는 시점에 따라 다릅니다.
예를 들어, <head> 섹션, <body> 섹션 또는 </body> 닫는 태그 뒤에 배치할 수 있습니다. JavaScript를 HTML 코드의 메인 콘텐츠와 분리해 두고 싶다면 <head> 섹션에 태그를 넣는 것이 좋습니다. 여기에 JavaScript 코드가 포함됩니다. 반면에 JavaScript 코드가 웹 페이지의 레이아웃 내부에서 실행되도록 하려면 <body> 섹션에 태그를 배치해야 합니다. 예를 들어, 콘텐츠를 생성하기 위해 document.write를 사용하는 경우에 이렇게 합니다.
이를 이해하는 더 좋은 방법은 코드 예제를 통한 것입니다. 비어 있는 다음 HTML 문서를 고려해 보세요. 이 문서의 브라우저 제목은 Today’s Date입니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Today's Date</title> </head> <body> </body> </html> |
보시다시피 여기에는 JavaScript의 흔적이 없습니다. 이 문서는 지금까지 HTML 마크업만 포함하고 있습니다. 이제 동시에 로드되고 실행되도록 인라인으로 JavaScript 코드를 추가해 보겠습니다. 다음 JavaScript 코드를 고려해 보세요:
|
1 2 |
let d = new Date(); alert("오늘의 날짜는 " + d); |
위의 코드에 따라, 웹 페이지가 오늘의 날짜와 함께 알림창을 표시하도록 설정하고 있습니다. 따라서 방문자가 언제 사이트를 시작하든 페이지에 현재 날짜가 표시됩니다.
이제 이 JavaScript 코드를 HTML 문서에 추가하기 위해 <script> 태그를 사용하겠습니다. 우선, <head> 태그 사이에 JavaScript 코드를 추가해야 합니다. 이는 웹 페이지에 이 특정 코드가 페이지의 다른 콘텐츠보다 먼저 로드되어야 함을 알려줍니다. <title> 태그 아래에 코드를 추가할 수 있습니다. 방법은 다음과 같습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>오늘의 날짜</title> <script> let d = new Date(); alert("오늘의 날짜는 " + d); </script> </head> <body> </body> </html> |
이제 JavaScript 코드가 추가되었습니다. 웹페이지가 실행되고 페이지의 나머지 부분을 로드하기 전에 이 스크립트를 로드합니다. 사이트를 시작하면 다음과 같이 현재 날짜가 표시된 알림창이 나타납니다:
이것이 HTML 문서의 <head> 섹션에 코드를 추가하는 방법입니다. 다른 방법으로는 <body> 태그 내부 또는 외부에 스크립트를 추가하는 것이 있습니다. 아래 예시에서 볼 수 있듯이, <head> 섹션 뒤에 코드 조각을 추가해 보겠습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>오늘의 날짜</title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>오늘의 날짜는 " + d + "</h1>" </script> </body> </html> |
이 수정의 결과로, 페이지를 새로고침하면 다음과 같은 화면이 표시됩니다:
별도의 JavaScript 파일로 HTML에 JavaScript를 추가하는 방법
짧은 JavaScript 스크립트는 HTML 파일과 잘 작동합니다. 전체 스크립트가 한 페이지 이하에서 실행되기 때문입니다. 여러 페이지에 걸쳐 있는 더 큰 스크립트를 작업하는 경우, 파일이 매우 이해하기 어려워질 수 있습니다. 그렇기 때문에 별도의 JavaScript 파일로 추가해야 할 수 있습니다. 이 파일은 HTML 문서와 동시에 로드됩니다.
이 섹션에서는 별도의 파일을 사용하여 HTML에 JavaScript를 추가하는 방법에 대해 설명합니다. 코드는 일반적으로 하나 이상의 .js 파일에 저장됩니다. HTML 문서는 다른 외부 자산과 마찬가지로 이 파일들을 참조합니다. 완전히 별도의 JavaScript 파일을 사용하려는 이유는 많습니다. 주로 코드를 읽고 이해하기가 훨씬 쉬워집니다. 말할 것도 없이, 별도의 파일을 사용하면 캐시된 페이지가 빠르게 로드되고 유지 관리도 상대적으로 더 쉬워집니다.
이러한 이점을 활용하려면 JavaScript 파일과 HTML 문서라는 두 가지를 서로 연결하는 방법을 알아야 합니다. 이해를 돕기 위해 작은 웹 프로젝트의 예를 들어보겠습니다. 이 가상의 프로젝트는 루트에 메인 index.html, css/ 디렉토리에 style.css, js/ 디렉토리에 script.js를 포함하고 있습니다. 우리의 작은 프로젝트는 다음과 같습니다:
|
1 2 3 4 5 6 7 8 9 10 11 |
project/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html |
HTML 마크업의 경우, 이전에 사용했던 문서를 사용하겠습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>오늘의 날짜</title> </head> <body> </body> </html> |
이제 두 문서가 준비되었으므로, 이들을 연결하기 시작할 수 있습니다. 날짜와 관련된 JavaScript 코드를 script.js 파일에 추가해야 합니다. 다음과 같이 <h1> 헤더로 추가합니다:
|
1 2 |
let d = new Date(); document.body.innerHTML = "<h1>오늘의 날짜는 " + d + "</h1>" |
코드를 HTML 문서에 연결하려면 스크립트에 대한 참조를 추가해야 합니다. 참조는 HTML 템플릿의 <body> 섹션 내부 또는 아래에 있어야 합니다. 여기에 사용할 코드는 다음과 같습니다:
|
1 |
<script src="js/script.js"></script> |
보시다시피, <script> 태그를 사용하고 있습니다. 이 태그는 프로젝트의 js/ 디렉토리에 있는 script.js 파일을 가리킵니다. HTML 문서에서 코드는 다음과 같이 나타납니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>오늘의 날짜</title> </head> <body> </body> <script src="js/script.js"></script> </html> |
원하는 경우 페이지를 멋지게 꾸미기 위해 몇 가지 스타일을 수정할 수 있습니다. 예를 들어, <h1> 헤더에 배경색을 추가해 보겠습니다. 이 수정은 style.css 파일에서 진행합니다:
|
1 2 3 4 5 6 7 8 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
이 수정 사항은 헤더에 표시되어야 하므로, HTML 문서의 <head> 섹션에서 이를 참조합니다. 이 CSS 파일에 대한 참조를 작성하는 방법은 다음과 같습니다:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>오늘의 날짜</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> <script src="js/script.js"></script> </html> |
이제 필요한 참조를 모두 마쳤으므로 변경 사항을 시각적으로 확인할 수 있습니다. 브라우저에서 index.html을 로드하면 다음과 같은 페이지가 표시됩니다:
코드를 업데이트하려는 경우 한 곳에서 모든 페이지를 편집할 수 있습니다. 이를 통해 웹 페이지 유지 관리가 매우 쉬워집니다. 이것이 JavaScript 스크립트에 별도의 파일을 사용하는 이점입니다.
결론
이 튜토리얼이 HTML에 JavaScript를 추가하는 과정에 대해 더 많이 배우는 데 도움이 되었기를 바랍니다. HTML 문서 내에 인라인으로 추가하는 방법과 .js 파일로 추가하는 방법을 모두 살펴보았습니다. 이제 기본 사항을 알았으니 HTML에서 JavaScript로 훨씬 더 많은 작업을 수행할 수 있습니다.
JavaScript를 더 활용하는 데 도움이 되는 저희 블로그의 몇 가지 리소스를 소개합니다:
- 자신만의 웹 애플리케이션을 구축하고 있다면, 가장 적합한 서버 설정을 선택하는 방법에 대한 가이드를 확인해 보세요.
- 다음 내용을 배우고 싶다면 Ghost로 블로그를 설정하는 방법은 이 튜토리얼을 참고하세요.
- 이 튜토리얼을 살펴보세요: Ubuntu 18.04에 Node.js를 설치하는 방법을 알아보려면.
즐거운 컴퓨팅 되세요!
댓글
아직 댓글이 없습니다. 첫 번째로 작성해 보세요.