왕진 블로그
반응형
Web Development · Project
HTML5 개인 포트폴리오 사이트
4페이지 구조 완전 정리
소개·경력·학술·인적 4페이지 + 공통 CSS로 만드는 시맨틱 포트폴리오
시작 만들 사이트의 구조
이 프로젝트는 4개의 HTML 파일이 하나의 외부 CSS를 공유하는 멀티페이지 포트폴리오다. 각 페이지가 같은 헤더·내비·푸터·사이드바를 공유하면서 본문(section)만 다르다. 외부 CSS 파일 하나(mportpolio.css)만 수정하면 4개 페이지에 동시에 적용되는 구조 — "외부 CSS의 진짜 힘"을 체감할 수 있는 예제다.
파일 구성
mintro.html
소개
자기소개 + 사진
mcareer.html
경력
세미나·인턴쉽·봉사 + 갤러리
mstudy.html
학술
프로젝트·자격증·수상 + 비디오
minfo.html
인적
기본 정보 + 학력 표
mportpolio.css
공통 스타일시트
4페이지 모두가 link로 가져다 씀
사이트 시각화
용어 핵심 키워드
<link rel>외부 CSS 파일을 모든 페이지에서 공유
<header>사이트 상단 (제목)
<nav>페이지 이동 메뉴
<section>본문 핵심 콘텐츠
<aside>사이드바 (보조 정보)
<footer>하단 (저작권 — fixed로 고정)
@media화면 너비 따라 다른 스타일
text-shadow글자 그림자
list-style-image불릿을 이미지로
<video> <source>여러 포맷 비디오 폴백 제공
opacity: 0.3로고 워터마크 효과
transform: scale이미지 호버 확대
1 모든 페이지의 공통 뼈대
4개 페이지 모두 head + header + nav + content(section + aside) + footer 구조를 공유한다. 차이는 section 안의 내용뿐이다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="mportpolio.css"> </head> <body> <header><h1>홍길동 홈페이지</h1></header> <nav> <span><a href="mcareer.html"> 경력 </a></span> <span><a href="mstudy.html"> 학술 </a></span> <span><a href="minfo.html"> 인적 </a></span> <span><a href="mintro.html"> 소개 </a></span> </nav> <div class="content"> <section class="section1"> <!-- 페이지마다 다른 본문 --> </section> <aside> <h3>참조링크</h3> <a href="http://www.naver.com"><img src="naver.jpg"></a> </aside> </div> <footer><h2>© 2014 Hong, GilDong</h2></footer> </body> </html>
반응형
2 공통 CSS의 핵심 (mportpolio.css)
초기화 + 공통 폰트
* { margin: 0; padding: 0; } /* 모든 요소 여백 초기화 */ header, body, footer { font-size: 14px; font-family: 나눔고딕, 굴림, 돋움, serif; width: 100%; } footer { position: fixed; /* 스크롤해도 화면 하단에 고정 */ bottom: 0; }
제목 스타일 + text-shadow
h3 { color: green; text-shadow: 4px 4px 7px green; /* x y blur color */ } h1, h2 { background-image: url(bg.jpg); background-repeat: repeat-x; /* 가로로만 반복 */ }
nav — 우측 정렬 + 호버 색 변환
nav > span > a { padding: 3px; border: 2px solid purple; float: right; /* 우측에서 시작 */ text-decoration: none; background: purple; color: white; } nav > span > a:hover { background: #ff00ff; /* 호버 시 마젠타 */ }
3 미디어쿼리 — 가로 모드 2단
화면 너비가 321px 이상이고 가로(landscape) 모드일 때만 section과 aside를 좌우로 배치한다. 모바일 세로 모드에서는 자동으로 위아래로 쌓인다.
@media only screen and (min-width: 321px) and (orientation: landscape) { section { width: 80%; float: left; } aside { width: 20%; float: right; } footer { clear: both; } }
💡
@media는 디바이스의 특성(너비·방향·해상도 등)에 따라 다른 CSS를 적용한다. orientation: landscape는 가로가 세로보다 넓을 때(가로 모드)만.4 페이지별 차별점
mintro.html — 자기소개 + 사진 띄우기
#stu-pic { width: 6em; height: 8em; float: left; } /* 사진을 좌측에 띄워 텍스트가 옆으로 흐르게 */
mcareer.html — 갤러리 호버 확대
.semi-pic { width: 4em; height: 3em; } #pic-container { overflow: hidden; } #pic1:hover { transform: translate(150px, 50px) scale(7, 7); } /* 호버 시 7배 확대 + 위치 이동 — 줌인 효과 */
mstudy.html — 멀티 포맷 비디오
<video autoplay controls preload="metadata"> <source src="video.ogv" type="video/ogv"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> 브라우저에서 비디오 파일을 지원하지 않습니다. </video>
브라우저가 위에서부터 차례로 읽어 첫 번째로 재생 가능한 포맷을 사용한다. 어떤 포맷도 지원 안 되면 안의 텍스트가 표시된다.
minfo.html — 학력 표 + 워터마크 로고
#year-table { table-layout: auto; width: 80%; } #year-table thead { background: #E4F2D0; } #logo { position: fixed; /* 스크롤해도 따라옴 */ top: 130px; left: 70px; opacity: 0.3; /* 30% 투명 — 워터마크 효과 */ }
5 이 프로젝트로 배우는 것
※ 멀티페이지 사이트의 핵심 패턴
- 외부 CSS 한 파일 — 모든 페이지가 동일한 디자인 공유
- HTML5 시맨틱 태그 — header / nav / section / aside / footer
- 고정 footer —
position: fixed; bottom: 0 - 반응형 미디어쿼리 — 가로/세로 모드 분기
- 비디오 폴백 — 여러 source 태그로 포맷 호환성
- 호버 효과 — transform: scale로 갤러리 줌
- 워터마크 — fixed + opacity로 배경 로고
6 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| CSS 파일명 오타 | 스타일이 전혀 안 먹힘 | 대소문자·확장자 정확히 (mportpolio.css) |
| nav 링크의 href 잘못 | 404 오류 | 같은 폴더라면 파일명만 (mintro.html) |
| footer fixed 후 본문 가림 | 마지막 콘텐츠가 안 보임 | body에 padding-bottom: 60px |
| 한 페이지만 CSS 수정 | 다른 페이지에 안 반영 | 외부 CSS는 자동 반영 — 캐시 새로고침 필요 |
| video 한 포맷만 제공 | 일부 브라우저 재생 불가 | mp4 + webm 최소 두 개 제공 |
전역 * {margin:0} 부작용 |
의도한 여백까지 사라짐 | 구체 셀렉터로 다시 부여 |
요약 핵심 한 줄 정리
HTML5 포트폴리오 사이트 핵심
멀티페이지4개의 .html이 1개의 .css 공유
시맨틱 구조header → nav → section + aside → footer
footer fixed스크롤해도 화면 하단에 고정
@media landscape가로 모드일 때만 2단 레이아웃
video + source여러 포맷 폴백 — 첫 재생 가능한 것 사용
opacity + fixed워터마크 로고 효과
scale(7) hover갤러리 이미지 줌인
text-shadow제목에 그림자 효과
list-style-image불릿을 커스텀 이미지로
Tags
#포트폴리오 #HTML5 #시맨틱태그 #외부CSS #멀티페이지 #nav #aside #footer고정 #video #미디어쿼리 #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
포트폴리오, HTML5, 시맨틱태그, 외부CSS, 멀티페이지, nav, aside, footer고정, video, 미디어쿼리, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| 미디어쿼리 + Flexbox 완전 정리 — 반응형 핵심 두 축 (0) | 2026.06.10 |
|---|---|
| 반응형 레이아웃 — 가변 그리드 · 가변 폰트 · 가변 이미지 완전 정리 (0) | 2026.06.10 |
| transition-delay + translateY 슬라이드 효과 — 상품 hover 애니메이션 (0) | 2026.06.10 |
| CSS3 transition · transform 완전 정리 — 부드러운 변환 효과 (1) | 2026.06.10 |
| jQuery Mobile data-role 완전 정리 — 페이지·리스트·전환 효과 (0) | 2026.06.10 |
댓글