안녕하세요. beingfree79입니다.
오늘은 기본적인 index.html 파일에 main.css와 main.js파일을 추가하여 연결해 주는 방법에 대해서 알아보도록 하겠습니다.
설명할 코드는 아래와 같습니다. 아래의 실습코드를 기반으로 title을 변경하고, CSS와 JavaScript 파일을 연결하는 방법에 대해 알려드리겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
<script defer src="./main.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>타이틀 이름 변경
<title> 태그 내부의 "Document"를 원하는 타이틀로 변경하면 됩니다. 예를 들어, "My Webpage"로 변경하고 싶다면 다음과 같이 코드를 수정합니다
기존 내용
<title>Documente</title>변경 내용
<title>My Webpage</title>변경된 타이틀은 브라우저의 탭에 표시됩니다.
CSS 파일 연결
CSS 파일을 연결하기 위해서는 <link> 태그를 사용합니다. <head> 태그 내부에 <link> 태그를 추가하고, rel 속성을 "stylesheet"로, href 속성에 CSS 파일의 경로를 지정합니다. 예를 들어, CSS 파일이 main.css라는 파일명으로 동일한 디렉토리에 있다고 가정하면, 다음과 같이 코드를 추가합니다. 이 코드는 VSCode에서 link를 입력하고 탭키를 누르면 자동으로 완성되는 코드에서 href= 이후에 원하는 main.css 파일의 경로를 입력하면 됩니다.
<link rel="stylesheet" href="./main.css">위 코드에서 ./ 는 main.css 파일을 현재 HTML 파일과 동일한 디렉터리에서 가져온다는 의미입니다.
JavaScript 파일
JavaScript 파일을 연결하기 위해서는 <script> 태그를 사용합니다. <head> 태그 내부에 <script> 태그를 추가하고, src 속성에 JavaScript 파일의 경로를 지정합니다. defer 속성을 추가하면 스크립트가 비동기로 로드되어 페이지 로딩이 블로킹되지 않습니다. 예를 들어, JavaScript 파일이 main.js라는 파일명으로 동일한 디렉토리(./)에 있다고 가정하면, 다음과 같이 코드를 추가하면 됩니다.
<script defer src="./main.js"></script>마찬가지로 main.js 파일을 현재 HTML 파일과 동일한 디렉토리에서 가져와서 실행합니다.
위의 변경사항을 적용한 코드 예시는 다음과 같습니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
<link rel="stylesheet" href="./main.css">
<script defer src="./main.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>위의 코드를 수정하고 저장한 후, 해당 디렉토리에 실제로 main.css와 main.js 파일이 있는지 확인해야 합니다. 이렇게 수정된 코드는 HTML 파일의 타이틀을 변경하고, CSS와 JavaScript 파일을 연결하여 스타일링과 동적요소를 추가할 수 있게 됩니다.
추가된 CSS 파일은 웹 페이지의 콘텐츠의 눈, 코, 입 등의 모양 스타일링을 담당하고, JavaScript 파일은 웹 페이지의 동적인 동작과 상호작용을 구현하는 데 사용됩니다.
추가로, main.css 파일과 main.js 파일을 생성하고 해당 파일들에 원하는 스타일과 스크립트를 작성해야 합니다.
예를 들어, main.css 파일에서는 h1 요소의 색을 파란색, 폰트크기 크기 24로로 변경할 수 있고, main.js 파일에서는 웹 페이지와 관련된 JavaScript 코드를 작성할 수 있습니다.
아래는 예시로 main.css 파일과 main.js 파일을 작성한 예시입니다.
main.css:
h1 {
color: blue;
font-size: 24px;
}main.js:
window.addEventListener('load', function() {
// 웹 페이지가 로드되면 실행될 JavaScript 코드
alert('웹 페이지가 로드되었습니다.');
});마무리
위의 코드에서는 main.css 파일에서 h1 요소의 텍스트 색상을 파란색으로, 글꼴 크기를 24px로 설정하고 있습니다. 또한, main.js 파일에서는 웹 페이지가 로드되었을 때 경고창을 표시하는 간단한 JavaScript 코드를 작성하였습니다.
실행하면 다음과 같이 웹 페이지가 로드되었다는 메시지가 나오고, 확인을 누르게 되면 홈페이지의 내용이 표시됩니다.
이렇게 수정된 코드와 함께 CSS 파일과 JavaScript 파일을 생성하고 작성한 후, 같은 디렉터리에 위치시킨 뒤 HTML 파일을 웹 브라우저에서 열어보시면, h1 요소의 스타일이 변경되고 웹 페이지 로드 시 경고창이 표시되는 것을 확인할 수 있습니다.
코드를 수정하고 저장한 후 브라우저에서 HTML 파일을 열어보면 변경된 내용을 확인할 수 있습니다. 이렇게 HTML, CSS, JavaScript를 연결하여 웹 페이지를 구성하고 동적으로 동작하게 할 수 있습니다.