이번 편의 결과물: web-practice/portfolio/에 이미지·파비콘 에셋이 갖춰지고 js/main.js가 준비됩니다(화면 변화 없음) · 다루는 개념: 이 과목의 3대 축(네이티브 인터랙션·미디어와 로딩·메타데이터와 보안), javascript/web_component와의 경계
이 편에서 만드는 파일
web-practice/portfolio/
├── index.html (기존, 수정 없음)
├── projects.html (기존, 수정 없음)
├── contact.html (기존, 수정 없음)
├── images/ + project-01.svg ~ project-06.svg, profile.svg, og-image.svg
├── favicon.svg +
└── js/
└── main.js + (빈 파일, 03편부터 채움)왜 여기서 다시 시작하는가
html/html_fundamentals를 마쳤다면 web-practice/portfolio/에 index.html·projects.html·contact.html 세 페이지가 있습니다. 시맨틱 sectioning 요소와 전통 폼만으로 구성되어 있고, CSS도 스크립트도 없는 상태입니다. 이 과목은 그 세 파일에 <dialog>·popover·<details>·반응형 이미지·새 폼 속성·메타데이터를 실제로 붙여 나갑니다. 새 프로젝트를 만드는 게 아니라 가진 파일을 계속 고칩니다.
이 과목 세 갈래 지도
19편을 관통하는 축은 세 가지입니다. 각 축은 “브라우저가 원래 자바스크립트 라이브러리 없이도 할 수 있었던 일”을 표준 태그·속성만으로 구현하는 방법을 다룹니다.
| 축 | 다루는 것 | 대표 편 |
|---|---|---|
| 네이티브 인터랙션 | dialog(모달)·popover(드롭다운·툴팁)·inert·details name(아코디언)·search/hidden=until-found | 03–08 |
| 미디어와 로딩 | srcset/picture/loading/fetchpriority, video/track, 리소스 힌트, 모듈 스크립트 정리 | 09–10, 13 |
| 메타데이터와 보안 | 새 입력 타입·Constraint Validation, Open Graph·manifest·JSON-LD, rel 보안 속성, 국제화 속성 | 11–12, 14–17 |
이 지도에서 오늘(01, 02편)은 어느 축에도 속하지 않습니다. 01편은 준비, 02편은 이후 모든 편에서 반복할 “지금 이 기능을 써도 되는가”를 판단하는 습관을 세우는 자리입니다.
경계 — 이 과목이 다루지 않는 것
<dialog>와 popover를 배우다 보면 <template>·<slot>·Shadow DOM이 궁금해질 수 있습니다. 이 세 가지는 컴포넌트를 캡슐화하는 기술이라 재사용 가능한 UI 부품을 직접 설계하는 javascript/web_component 과목의 몫입니다. 이 과목은 어디까지나 문서 하나 안에서 브라우저가 기본 제공하는 상호작용만 다룹니다. 아래 표로 경계를 분명히 합니다.
| 이 과목(modern_html)에서 다루는 것 | javascript/web_component로 넘어가는 것 |
|---|---|
dialog로 여는 모달 한 개 | 모달을 재사용 가능한 커스텀 엘리먼트로 만들기 |
| popover 드롭다운·툴팁 | Shadow DOM으로 스타일 캡슐화하기 |
| 페이지에 이미 있는 마크업 조작 | template/slot으로 마크업을 동적으로 조립하기 |
실습
1. 지금 가진 포트폴리오 확인하기
web-practice/portfolio/를 열어 index.html·projects.html·contact.html이 있는지 확인합니다. 세 파일 모두 <header> 안에 로고와 3개 링크 내비게이션이 있고, CSS·JavaScript 링크는 아직 없어야 합니다. projects.html은 프로젝트 카드 6개가 있는 상태입니다.
<!-- portfolio/projects.html의 카드 하나(수정 전, html_fundamentals 결과물) -->
<article class="project-card">
<img src="images/project-01.svg" alt="오늘의 날씨 프로젝트 화면" width="1200" height="800" />
<h3>오늘의 날씨</h3>
<p>위치 기반 날씨를 카드로 보여주는 웹앱입니다. 오프라인에서도 마지막 데이터를 보여줍니다.</p>
<ul class="tags">
<li>JavaScript</li>
<li>PWA</li>
</ul>
</article>2. 디자인 에셋 내려받기
public/practice/portfolio/에서 다음 파일을 그대로 받아 web-practice/portfolio/의 같은 경로에 둡니다.
images/project-01.svg~project-06.svg,profile.svg,og-image.svg→portfolio/images/favicon.svg→portfolio/favicon.svg
이 에셋들은 09편(반응형 썸네일)과 14편(Open Graph)에서 바로 씁니다. 지금은 폴더에 옮겨 두기만 합니다.
3. js 폴더와 진입 파일 만들기
portfolio/js/main.js를 빈 파일로 만듭니다. 03편부터 이 파일 하나에 코드를 쌓고, 21편(모듈 정리)에서 type="module"로 정식 연결합니다. 지금은 만들어만 둡니다.
$ mkdir portfolio/js
$ type nul > portfolio/js/main.js4. 확인
portfolio/폴더 구조가 이 편 상단 트리와 같은지 확인합니다.- 브라우저로 세 페이지를 열어 보면 html_fundamentals 때와 완전히 같은 화면이어야 합니다. 이번 편은 파일만 준비하는 편이라 시각적 변화가 없습니다.
직접 해보기
images/에 받은 SVG 파일을 열어 각각 몇 대 몇 비율인지(가로세로) 확인해 보세요. design-spec.md에 적힌 프로젝트 썸네일 비율과 실제 파일이 일치하는지 스스로 검산하는 습관이 09편에서 바로 쓰입니다.
답 확인
프로젝트 썸네일(project-01 ~ project-06)은 1200×800(3:2), 프로필 사진은 400×400(1:1), og-image는 1200×630(약 1.91:1)입니다. 세 비율이 서로 다른 이유는 각각 카드 썸네일·프로필·소셜 공유 미리보기라는 다른 용도로 쓰이기 때문입니다.
자주 하는 실수
| 증상 | 원인 | 고치는 법 |
|---|---|---|
projects.html을 열었는데 이미지가 깨져 보인다 | images/ 폴더 경로가 다르거나 파일명을 잘못 옮겼다 | img src 값과 실제 파일명(project-01.svg 등)을 문자 그대로 비교한다 |
main.js를 만들었는데 브라우저 콘솔에서 안 보인다 | 아직 어떤 HTML도 main.js를 script 태그로 연결하지 않았다 | 정상이다. 연결은 03편부터 시작한다 |
| html_fundamentals 결과물과 화면이 달라 보인다 | CSS가 이미 붙어 있거나 마크업이 임의로 바뀌었다 | css_fundamentals를 먼저 시작한 게 아닌지 확인하고, 이 과목은 CSS 없는 상태에서 시작한다 |