이번 편의 결과물: web-practice/portfolio/ 폴더가 만들어지고 디자인 시안(design-spec.md)·원고(copy.md)·이미지가 받아져 있습니다. 다루는 개념: HTML·CSS·JS 역할 분담, 요소·태그 개념 예고, 4개 과목이 함께 만드는 포트폴리오 프로젝트 개요, 스타터 파일 구조
이 편에서 만드는 파일
web-practice/
+ portfolio/
+ design-spec.md
+ copy.md
+ favicon.svg
+ images/
+ profile.svg
+ project-01.svg ~ project-06.svg
+ og-image.svg개념 정리
HTML·CSS·JS는 왜 나뉘어 있는가
웹 페이지 하나는 세 가지 언어가 각자 다른 역할을 맡아 만듭니다. 한 언어가 다른 언어의 역할을 대신하면 유지보수가 어려워지므로, 이 과목부터 시작해 4개 과목 내내 이 역할 분담을 지킵니다.
| 언어 | 역할 | 이 과목에서 다루는가 |
|---|---|---|
| HTML | 구조와 의미(제목인지, 목록인지, 표인지) | 다룬다 |
| CSS | 색·레이아웃·타이포 같은 모양 | 다루지 않는다(css/css_fundamentals 담당) |
| JavaScript | 클릭·입력 같은 동작 | 다루지 않는다(javascript/web_apis 담당) |
이 과목에서는 CSS를 한 줄도 쓰지 않습니다. 완성된 페이지도 브라우저 기본 스타일 그대로 보입니다. 모양이 없어도 구조와 의미만으로 콘텐츠를 전달할 수 있는지 확인하는 것이 목표입니다.
HTML 요소란 무엇인가(예고)
HTML 문서는 요소(element)로 이루어집니다. 요소는 보통 여는 태그·내용·닫는 태그로 구성됩니다. 예를 들어 문단 요소는 <p>내용</p> 형태입니다. 태그의 정확한 문법(속성값 인용, 빈 요소 등)은 02편에서 다룹니다. 이번 편에서는 “요소 하나가 콘텐츠 한 덩어리를 감싼다”는 것만 기억합니다.
이 과목에서 만드는 것
개인 포트폴리오 사이트를 정적 3페이지로 만듭니다. 가상 인물 Zeno Kim의 사이트이며 실제 개인정보가 아닙니다.
| 파일 | 담는 내용 |
|---|---|
index.html | 자기소개(히어로·About), 기술 스택 리스트, 경력 표 |
projects.html | 프로젝트 카드 6개 |
contact.html | 레이블이 연결된 연락 폼 |
이 세 파일은 html_fundamentals → modern_html → css_fundamentals → modern_css 네 과목을 거치며 계속 이어서 자랍니다. 이 과목이 끝나는 16편까지는 CSS 없이 시맨틱 마크업만으로 완성합니다.
실습
1. 실습 폴더 만들기
VS Code에서 원하는 위치에 web-practice 폴더를 열고, 그 안에 portfolio 폴더를 만듭니다.
mkdir -p web-practice/portfolio
cd web-practice/portfolio
mkdir images2. 스타터 파일 받기
이 사이트의 디자인 시안·원고·이미지는 https://zeno.it.kr/practice/portfolio/ 아래에 그대로 공개되어 있습니다. 터미널에서 curl로 받습니다.
curl -o design-spec.md https://zeno.it.kr/practice/portfolio/design-spec.md
curl -o copy.md https://zeno.it.kr/practice/portfolio/copy.md
curl -o favicon.svg https://zeno.it.kr/practice/portfolio/favicon.svg
curl -o images/profile.svg https://zeno.it.kr/practice/portfolio/images/profile.svg
curl -o images/og-image.svg https://zeno.it.kr/practice/portfolio/images/og-image.svg프로젝트 썸네일 6장은 번호가 바뀌므로 반복문으로 받습니다.
for n in 01 02 03 04 05 06; do
curl -o "images/project-$n.svg" "https://zeno.it.kr/practice/portfolio/images/project-$n.svg"
done터미널 대신 브라우저를 쓴다면 각 URL을 열어 Ctrl+S(또는 Cmd+S)로 같은 파일명으로 저장합니다.
3. 받은 파일 확인
ls -R.:
copy.md design-spec.md favicon.svg images
./images:
og-image.svg profile.svg project-01.svg project-02.svg
project-03.svg project-04.svg project-05.svg project-06.svg4. 확인
design-spec.md를 열어 1절 “사이트 구성” 표가 보이는지 확인합니다.copy.md를 열어 로고 이름이Zeno Kim인지 확인합니다.images/폴더에 svg 파일 8개(프로필 1 + 프로젝트 6 + og 1)가 있는지 확인합니다.
직접 해보기
design-spec.md의 4절 “레이아웃 스펙”에서 브레이크포인트가 몇 단계로 나뉘는지 찾아보세요.
답 보기
3단계입니다. 모바일(기본, ~767px)·태블릿(768px 이상)·데스크톱(1024px 이상)이며, css_fundamentals 과목에서 실제로 적용합니다.
copy.md에서contact.html의 제출 버튼 문구를 찾아보세요.
답 보기
보내기입니다. 11편에서 실제 버튼 요소로 만듭니다.
자주 하는 실수
| 증상 | 원인 | 고치는 법 |
|---|---|---|
curl 실행 시 command not found | Windows 기본 셸에 curl이 없는 구버전 | PowerShell에서는 curl이 Invoke-WebRequest 별칭이므로 그대로 실행하거나 브라우저로 다운로드 |
| 받은 파일이 0바이트 | URL 오타(대소문자·확장자) | 파일명은 소문자, 확장자는 .svg·.md까지 정확히 입력 |
images 폴더가 안 만들어짐 | mkdir images를 portfolio 밖에서 실행 | cd web-practice/portfolio부터 다시 실행 |
| 이미지가 열리지 않음 | 저장 시 확장자가 .svg.txt로 붙음 | 브라우저 저장 대화상자에서 파일 형식을 “모든 파일”로 바꾸고 저장 |