프로젝트 구조

zenoPortfolio는 빌드 도구 없이 브라우저가 직접 HTML, CSS, JavaScript를 읽는 정적 사이트입니다.

핵심 구조

zenoPortfolio/
├── index.html
├── header.html
├── footer.html
├── components/
├── css/
├── js/
├── images/
└── portfolio/

현재 메인 화면은 index.html에서 시작합니다.

index.html

<script type="module" src="components/index.js"></script>
<script defer src="js/main.js"></script>

두 개의 JavaScript가 핵심입니다.

파일	역할
`components/index.js`	Custom Elements 컴포넌트 등록
`js/main.js`	모드 전환, 필터, 무한스크롤, 메뉴 이벤트

HTML 구조

<body data-mode="dev">
  <site-header></site-header>

  <main>
    <hero-section></hero-section>
    <works-section></works-section>
  </main>

  <site-footer></site-footer>
</body>

브라우저가 처음 읽을 때는 <site-header> 같은 태그를 모릅니다.
그런데 components/index.js가 실행되면서 이 태그들이 실제 컴포넌트로 등록됩니다.

components 폴더

components/
├── index.js
├── BackToTop/
├── HeroSection/
├── PortfolioCard/
├── SiteFooter/
├── SiteHeader/
└── WorksSection/

각 컴포넌트는 JS와 CSS를 함께 가집니다.

PortfolioCard/
├── PortfolioCard.js
└── PortfolioCard.css

이 구조는 컴포넌트 단위로 파일을 찾기 쉽습니다.

css 폴더

파일	역할
`common.css`	디자인 토큰, reset, 공통 레이아웃
`main.css`	메인 페이지 섹션 스타일
`about.css`	about 페이지용 스타일

common.css에 CSS Variables가 모여 있어서 사이트 전체 색상과 간격을 관리합니다.

js 폴더

js/main.js

이 파일은 이미 렌더링된 DOM을 대상으로 기능을 붙입니다.

ModeToggle
Filter
InfiniteScroll
Menu
BackToTop

portfolio 폴더

기존 작업물 페이지들이 들어 있습니다.

예:

portfolio/site/starbucks/
portfolio/site/mgbox/
portfolio/page/villageanimation/

카드에서 href로 이 작업물 페이지를 연결합니다.

핵심 구조​

index.html​

HTML 구조​

components 폴더​

css 폴더​

js 폴더​

portfolio 폴더​