왕진 블로그
반응형
Web Development · Portfolio HTML
포트폴리오 — 경력 페이지(mcareer.html) 분석
section + aside 2단 구조 · 사진 hover 확대 · 공통 CSS 연결
시작 오늘 분석할 코드
4페이지로 구성된 개인 포트폴리오 사이트(경력·학술·인적·소개) 중 경력 페이지다. 모든 페이지가 같은 header / nav / footer 골격을 공유하고, 페이지마다 section 안의 콘텐츠만 달라진다. CSS는 외부 파일(mportpolio.css) 한 개에서 공통으로 관리한다.
<!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"> <h3>세미나(연수)</h3> <ul><li>2012. 4 빅 데이터 응용 세미나 참석</li>...</ul> <div id="pic-container"> <img id="pic1" class="semi-pic" src="seminar1.jpg"/> <img id="pic2" class="semi-pic" src="seminar2.jpg"/> <img id="pic3" class="semi-pic" src="seminar3.jpg"/> </div> <h3>인턴쉽 / 봉사</h3> ... </section> <aside>참조 링크들</aside> </div> <footer><h2>Copyright © 2014 Hong, GilDong</h2></footer> </body> </html>
실제 출력 미리보기
홍길동 홈페이지
세미나(연수)
- 2012. 4 빅 데이터 응용 세미나 참석
- 2013. 3~6 IT 멘토링 사업 참여
SEM 1
SEM 2
SEM 3
인턴쉽
- 2013.7~8 하계 인턴쉽 참여
봉사
- 2011.7 농어촌 봉사활동
- 2012.8 IT 방문교육
참조링크
naver
google
daum
위 사진(SEM)에 마우스를 올리면 hover 확대 효과가 발동합니다
용어 용어 정리
<header>페이지 상단 영역 (제목·로고)
<nav>메인 메뉴 모음 영역
<section>독립적인 본문 블록
<aside>본문 보조 정보 (사이드바)
<footer>페이지 하단 영역
link rel=stylesheet외부 CSS 파일 연결
id vs classid는 페이지 내 1개, class는 여러 개 가능
시맨틱 태그의미를 가진 태그 (<div> 대신)
1 시맨틱 태그로 골격을 짠 이유
HTML5 이전에는 모든 영역을 <div id="header">처럼 div + id 조합으로 만들었다. HTML5는 같은 역할을 의미가 담긴 태그로 대체했다 — header, nav, section, aside, footer. 화면 결과는 div와 똑같지만, 검색엔진과 스크린 리더에 영역의 의미를 알려주고, 코드 가독성도 좋아진다.
[옛 방식] [HTML5 시맨틱] <div id="header">...</div> <header>...</header> <div id="nav">...</div> <nav>...</nav> <div id="content"> <section>...</section> <div id="aside">...</div> <aside>...</aside> </div> <div id="footer">...</div> <footer>...</footer>
2 4페이지가 같은 골격을 공유하는 방법
mcareer.html, mstudy.html, minfo.html, mintro.html — 네 파일 모두 header / nav / footer는 정확히 동일하다. 다른 건 section 안의 콘텐츠뿐이다. 이 구조 덕분에:
※ 네 페이지 공유 구조의 장점
- CSS는 한 파일(
mportpolio.css)로 끝 → 한 번 수정하면 4페이지 모두 적용 - 이용자가 어느 페이지에 있든 같은 메뉴·헤더·푸터를 본다
- nav의
href로 페이지 간 이동 - 다만 단점: 서버 사이드 include가 없어서 헤더 수정 시 4파일 모두 손봐야 함 (PHP·React 등 도입 시 해결)
3 사진 hover 확대 — pic-container의 트릭
이 페이지의 가장 흥미로운 부분이다. 세미나 사진 3장이 #pic-container에 들어 있고, CSS는 다음과 같다.
.semi-pic { width: 4em; height: 3em; } #pic-container { overflow: hidden; } /* 평소엔 좁게 */ #pic-container:hover { height: 220px; } /* hover 시 영역 확장 */ #pic1:hover { transform: translate(150px,50px) scale(7,7); } #pic2:hover { transform: translate(100px,50px) scale(7,7); } #pic3:hover { transform: translate( 30px,50px) scale(7,7); }
왜 컨테이너 hover와 사진 hover를 따로 거는가?
사진을 7배 확대하면 컨테이너 밖으로 삐져나간다. 컨테이너의 overflow:hidden이 잘라버리므로, 컨테이너 자체도 같이 hover 시 height:220px로 키워야 확대된 사진이 보인다. 두 효과가 동시에 발동한다.
※ 원본 코드의 약점:
-webkit-transform은 7배인데 표준 transform은 0.5배로 적혀 있다. 두 줄이 충돌해서 최신 브라우저에서는 0.5배(축소)가 적용된다. 일관되게 transform: translate(...) scale(7,7)로 통일해야 한다.
반응형
4 aside의 참조 링크 패턴
오른쪽 사이드바의 네이버·구글·다음 로고는 <a>로 감싼 <img>다. 이미지를 클릭하면 외부 사이트로 이동한다.
<a href="http://www.naver.com"> <img class="portal" src="naver.jpg" alt="네이버이동"/> </a>
※ alt 속성의 중요성
- 이미지 로딩 실패 시 표시되는 대체 텍스트
- 스크린 리더가 시각장애인에게 읽어주는 내용
- SEO에도 영향 (검색엔진이 이미지 내용 파악)
- 외부 링크 이미지일수록 alt 필수 — "어디로 가는 링크인지" 명확히
5 외부 CSS 연결 — link rel="stylesheet"
이번 4페이지가 같은 디자인을 공유할 수 있는 핵심 이유다. <link> 태그로 외부 .css 파일을 불러오면, CSS는 한 곳에서 관리한다.
style 태그 (각 페이지마다)
- 4페이지 = CSS 4번 작성
- 색 하나 바꾸려면 4파일 수정
- 실수로 페이지마다 디자인이 어긋날 위험
link rel=stylesheet (이번 코드)
- CSS 1개 = 모든 페이지 공유
- 한 곳에서 수정 → 전체 일관성
- 브라우저가 CSS를 캐싱 → 두 번째 페이지부터 빠름
6 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| vendor prefix와 표준 속성 충돌 | 최신 브라우저에서 의도와 다른 결과 | 같은 값으로 통일 또는 표준 속성만 |
| 4페이지의 nav가 다름 | 이용자가 길을 잃음 | nav는 4파일에 정확히 같은 내용 |
overflow:hidden 누락 |
확대 사진이 페이지 깨뜨림 | 확대 영역의 부모에 overflow:hidden |
| alt 속성 생략 | 접근성·SEO 점수 하락 | 모든 의미 있는 이미지에 alt |
| 인라인 style과 외부 css 혼용 | 우선순위 꼬여 디버깅 어려움 | 외부 css에 통일 |
| CSS 파일명 오타 (mportpolio) | 스타일 안 적용 → 깨진 페이지 | 파일명 정확히, 경로 확인 |
핵심 한 줄 요약
시맨틱 골격header / nav / section / aside / footer
4페이지 공유골격은 동일, section 콘텐츠만 다름
외부 CSSlink rel=stylesheet — 한 파일로 관리
overflow:hidden + hover확대된 사진이 보이려면 컨테이너도 확장
aside 링크a로 감싼 img — alt 필수
vendor prefix 통일webkit과 표준 속성 값 충돌 주의
Tags
#경력페이지 #section #aside #시맨틱태그 #hover확대 #transform #외부CSS #link #overflow-hidden #2단레이아웃 #CSS #HTML #포트폴리오 #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
경력페이지, section, aside, 시맨틱태그, hover확대, transform, 외부CSS, link, overflow-hidden, 2단레이아웃, CSS, HTML, 포트폴리오, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| 고정 그리드 레이아웃 — px 기반 wrapper · float 2단 완전 정리 (0) | 2026.06.20 |
|---|---|
| 포트폴리오 — 학술(mstudy.html) 완전 정리 (0) | 2026.06.20 |
| 포트폴리오 — 인적사항(minfo.html) 완전 정리 (0) | 2026.06.20 |
| 포트폴리오 — 자기소개(mintro.html) 완전 정리 (0) | 2026.06.20 |
| 포트폴리오 공통 CSS — mportpolio.css 완전 정리 (0) | 2026.06.20 |
댓글