본 튜토리얼은 바로 본론으로 들어가 프로젝트를 설정하고 코딩을 시작하고 싶은 분들을 위한 것입니다.
파일 모양은 PC마다 다를 수 있지만 파일 설명은 위 이미지와 동일해야 합니다.
파일을 연결할 때 각 파일이 폴더의 어디에 있는지 기록해 두는 것이 중요합니다. 우리의 경우 파일은 모두 동일한 수준에 있으므로 바로 연결할 수 있습니다.
html 파일의 내용은 다음과 같아야 합니다.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
`
css와 js 파일을 연결하려면 서로 다른 종류의 태그가 필요하므로 두 개의 서로 다른 태그를 사용하여 연결하겠습니다.
CSS 파일을 연결하기 위해 태그를 사용합니다. 그런 다음 rel 및 href 속성을 사용하여 링크 태그 콘텐츠와 페이지의 관계 및 CSS 파일이 있는 위치를 나타냅니다. 이는 다음과 같습니다.
잉크태그는 헤드태그 사이에 넣어야 합니다.
자바스크립트 파일의 경우 src 속성의 자바스크립트 파일 위치에 있는 스크립트 태그와 패스를 사용합니다. 이런 모습입니다.
스크립트 태그는 head 태그와 body 태그 모두 안에 배치할 수 있습니다. 그러나 성능을 위해 스크립트 태그는 마지막으로 구문 분석되는 방식으로 body 태그의 맨 아래에 배치하는 것이 좋습니다. head에도 배치할 수 있습니다.
중 하나를 사용하여 태그를 지정하세요.
유사한 로딩 동작을 복제하기 위해 "Async" 또는 "Defer" 속성이 추가되었습니다.
위의 지침을 따랐다면 HTML 파일의 내용은 다음과 같아야 합니다.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<script src="index.js" ></script>
</body>
</html>
`
이제 매우 기본적인 HTML, CSS 및 자바스크립트 설정이 완료되었습니다. 질문이 있거나 막히는 경우 댓글 섹션에 질문을 남겨주시면 답변해 드리겠습니다.
위 내용은 기본 Html, CSS 및 JavaScript 프로젝트를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
