생각 작업실 The atelier of thinking

21. <JavaScript> HTML과 연결하기 본문

웹(Web) 이야기

21. <JavaScript> HTML과 연결하기

knowledge-seeker 2024. 2. 29. 17:55

기본적으로 JavaScript는 HTML 위에서 작동하는 언어이기 때문에 이 둘을 연결하는 것은 가장 기초적이고 중요한 작업입니다.

CSS는 <style></style> 태그를 이용하여 연결하였다면,
JavaScript는 <script> </script> 태그를 이용하여 연결합니다.

또한, style 태그 안에서는 CSS를 사용한 것 처럼 script 태그 안에서는 JavaScript를 사용해야합니다.

HTML 파일과 JavaScript를 연결하는 방법은 여러 가지가 있습니다.

 

1. HTML 파일 안에서 직접 코드 작성하여 연결

 

HTML 파일 내에서 <script> 태그를 사용하여 직접 JavaScript 코드를 작성할 수 있습니다. 이 방법은 간단한 작업에 유용합니다.

 

▶ <body> 태그 안에 위치

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML with JavaScript</title>

</head>
<body>
// JavaScript 코드 작성
<button onclick="alert('Hello World!')">Click me</button>
</body>
</html>

 

▶ <head> 태그 안에  위치

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML with JavaScript</title>
<script>
// JavaScript 코드 작성
function myFunction() {
alert('Hello, World!');
}
</script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>

 

2. <script src=' '></script> - 외부 파일을 네트워크로 연결

 

JavaScript 코드를 별도의 외부 파일로 분리하고 HTML에서 이 파일을 로드할 수 있습니다. 이는 코드의 재사용성을 높이고 유지보수를 용이하게 만듭니다.

 

▶ myscript.js

<!-- myscript.js 파일 -->

// JavaScript 코드 작성
function myFunction() {
alert('Hello, World!');
}

 

▶ HTML

<!-- HTML 파일 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML with External JavaScript</title>
<script src="myscript.js"></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>

 

<script src=' '></script> 에 외부 파일을 네트워크로 연결할 수 있습니다.

 

3. CSS의 외부 파일을 연결하는 방법은 link 태그

 

CSS 파일을 HTML에 연결하는 방법은 `<link>` 태그를 사용합니다. 이를 통해 외부 스타일 시트를 로드할 수 있습니다.

 

▶ mystyle.css

<!-- mystyle.css 파일 -->
/* CSS 코드 작성 */
body {
    background-color: black;
    color: white;
    }

 

▶ HTML

<!-- HTML 파일 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML with External CSS</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<p>This is a paragraph with external styling.</p>
</body>
</html>

 

 

4. 외부 파일 및 라이브러리 연결 - CDN 활용

 

외부 라이브러리나 프레임워크를 사용할 때, CDN(Content Delivery Network)을 통해 해당 라이브러리를 로드할 수 있습니다.

 

<!-- jQuery를 CDN을 통해 연결하는 예시 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- React를 CDN을 통해 연결하는 예시 -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

 

CDN은 Content Delivery Network의 약자로, 전 세계에 분산된 서버 네트워크를 사용하여 콘텐츠를 더 빠르게 제공하는 기술을 말합니다. CDN은 주로 정적인 콘텐츠(이미지, 스타일 시트, 자바스크립트 파일 등)를 효율적으로 전달하고 웹 페이지의 성능을 최적화하는 데 사용됩니다.

CDN을 사용하는 이유는 아래와 같습니다.

(1) 성능 향상
CDN은 사용자와 가까운 서버에서 콘텐츠를 제공함으로써 웹 페이지의 로딩 속도를 향상시킵니다. 이는 지연 시간을 감소시키고 빠른 콘텐츠 전송을 가능케 합니다.

(2) 부하 분산
CDN은 여러 서버에 콘텐츠를 분산 저장하고 사용자의 요청을 분배하여 부하를 분산시킵니다. 이는 단일 서버에 부하가 집중되지 않도록 도와 성능을 일관되게 유지할 수 있습니다.

(3) 안정성 및 가용성 향상
CDN은 서버 다운이나 네트워크 문제 시에도 여러 서버를 통해 안정성과 가용성을 제공합니다. 하나의 서버가 다운되어도 다른 서버에서 콘텐츠를 제공할 수 있습니다.

(4) 저장 및 캐싱
CDN은 콘텐츠를 여러 위치에 저장하고 캐시하여 반복적인 요청에 대한 응답을 빠르게 처리할 수 있습니다. 이는 대역폭을 절약하고 서버 부하를 줄이는 데 도움이 됩니다.

이렇게 CDN을 사용하면 라이브러리의 최신 버전을 손쉽게 사용할 수 있고, 사용자의 웹 페이지에서 해당 라이브러리에 대한 로딩 시간을 최소화할 수 있습니다.

 

'웹(Web) 이야기' 카테고리의 다른 글

23. <JavaScript> 제어할 태그  (0) 2024.03.04
22. <HTML> Input 태그와 <JavaScript> 이벤트  (1) 2024.03.01
20. 자바스크립트 (JavaScript)  (2) 2024.02.28
19. <CSS> Flexbox  (1) 2024.02.25
18. <CSS> Grid Layout 예제  (1) 2024.02.24
'웹(Web) 이야기' Related Articles more