폴더구조

├── css
│   └── style.css
├── images
│   └── favicon.ico
├── js
│   └── main.js
└── index.html

해당 프로젝트는 다음과 같은 구조로 이루어져 있습니다:

  1. index.html: 프로젝트의 진입점이며, 웹 페이지의 기본 구조와 내용이 담겨 있습니다.

  2. css 폴더: 웹 페이지의 스타일을 정의하는 CSS 파일이 위치하는 폴더입니다. 여기에는 style.css 파일이 있습니다.

  3. images 폴더: 웹 페이지에서 사용되는 이미지 파일들이 저장되는 폴더입니다. favicon.ico와 같은 이미지 파일이 여기에 있습니다.

    gymcodingx2-removebg.png

  4. js 폴더: 프로젝트의 JavaScript 소스 코드가 위치하는 폴더입니다. 여기에는 main.js와 같은 주요 JavaScript 파일이 있을 것입니다.

index.html

<!doctype html>
<html lang="ko">
  <head>
	  <!-- 문서의 문자 인코딩을 UTF-8로 설정합니다. -->
    <meta charset="UTF-8" />
    <!-- 모바일 디바이스에서 뷰포트의 초기 크기와 배율을 지정합니다. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- favicon -->
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />
    <!-- JavaScript -->
    <script src="js/main.js" defer></script>
    <title>짐코딩 포트폴리오</title>
  </head>
  <body></body>
</html>

참고

자바스크립트 파일 효과적으로 가져오기 | script defer, async | 웹 개발 입문자들을 위한 강좌!