포트폴리오 — 인적사항(minfo.html) 완전 정리

 

 

Web Development · Portfolio HTML

포트폴리오 — 인적사항 페이지(minfo.html) 분석

학력 테이블 · position:fixed 워터마크 로고 · ul 안의 table

시작 오늘 분석할 코드

4페이지 포트폴리오 중 인적사항 페이지다. 성명·생년월일·주소·연락처·학력을 ul > li로 보여준다. 특이점은 학력 항목이 li 안에 다시 표(table)를 품고 있다는 것과, 페이지 한쪽에 반투명 워터마크 로고가 떠 있다는 것이다.

<section class="section1"> <h3>인적사항</h3> <ul> <li>성 명 : 홍길동</li> <li>생년월일 : 1989. 12. 25</li> <li>주 소 : 서울시 종로구 창신동 123</li> <li>연 락 처 : 010-123-4567</li> <li>학 력 <table id="year-table" border="1"> <thead><tr><th>졸업년도</th><th>출신학교</th></tr></thead> <tbody> <tr><td>2003. 2</td><td>하늘초등학교 졸업</td></tr> <tr><td>2006. 2</td><td>미래중학교 졸업</td></tr> <tr><td>2009. 2</td><td>미래고등학교 졸업</td></tr> <tr><td>2014. 2</td><td>한국대학교 컴퓨터학과 졸업</td></tr> </tbody> </table> </li> </ul> </section> <img id="logo" src="logo.jpg"/> /* position:fixed로 떠있는 워터마크 */

/* 관련 CSS */ #year-table { table-layout:auto; width:80%; border-collapse:seperate; } #year-table thead { background:#E4F2D0; } #logo { position:fixed; top:130px; left:70px; opacity:0.3; }

실제 출력 미리보기

홍길동 홈페이지

경력학술인적소개

LOGO

인적사항

• 성명 : 홍길동
• 생년월일 : 1989. 12. 25
• 주소 : 서울시 종로구 창신동 123
• 연락처 : 010-123-4567
• 학력

  졸업년도	출신학교
  2003. 2	하늘초등학교 졸업
  2006. 2	미래중학교 졸업
  2009. 2	미래고등학교 졸업
  2014. 2	한국대학교 컴퓨터학과 졸업

참조링크

naver

google

daum

Copyright © 2014 Hong, GilDong

용어 용어 정리

ul / liunordered list, list item — 불릿 목록

thead / tbody표 머리 / 표 본문 영역 분리

border="1"HTML 속성으로 표 테두리 (옛 방식)

table-layoutauto(내용 기반) / fixed(첫행 기반)

border-collapseseparate(분리) / collapse(합침)

position:fixed스크롤해도 화면에 고정

opacity0(투명)~1(불투명) — 워터마크 효과

id페이지 내 유일한 식별자 (#로 선택)

---

1 li 안에 table을 품는 구조

일반적으로 li에는 짧은 텍스트만 들어간다. 이번 코드는 "학력" li 안에 표 전체를 넣었다. 이렇게 해도 HTML은 유효하다. 하지만 의미상 자연스럽지는 않다.

이번 코드 (li 안에 table)

• "학력" li가 매우 길어짐
• li의 list-style 효과가 표 위쪽에만 적용
• 유효하지만 의미가 어색

권장 (table을 ul 밖으로)

• ul로 단순 항목 나열
• 학력 표는 별도 h4 + table로 분리
• 구조가 깔끔, 스타일 적용 쉬움

---

2 thead / tbody — 표를 두 영역으로 나누는 이유

표는 thead(머리)와 tbody(본문)로 나눌 수 있다. 시각적으로 큰 차이가 없어 보이지만, 긴 표가 페이지를 넘길 때 브라우저가 thead를 매 페이지 상단에 자동 반복해준다(인쇄 시 특히 유용). 또 CSS에서 머리 행만 다른 배경을 주기도 쉽다.

#year-table thead { background: #E4F2D0; } → thead 안의 모든 td/th 배경이 연두색 → tbody는 흰색 그대로

---

3 border-collapse: separate vs collapse

이번 코드는 border-collapse: seperate로 적혀 있는데 오타다. 정확한 철자는 separate다. 오타이므로 브라우저가 무시하고 기본값(separate)을 쓴다. 결과적으로는 동작은 하지만 의도한 게 separate인지 collapse인지 모호해진다.

값	동작	모양
separate (기본)	table 테두리와 셀 테두리가 분리	이중선처럼 보일 수 있음
collapse	인접 테두리를 합침	한 줄로 깔끔 (실무 표준)

※ 원본의 seperate는 잘못된 철자. separate가 정답이며, 실무에서는 collapse를 거의 항상 쓴다.

---

 

반응형

 

4 position:fixed — 스크롤해도 따라오는 로고

#logo는 화면(viewport) 기준으로 위치가 고정된다. 페이지를 아래로 스크롤해도 로고는 같은 자리에 떠 있는다. opacity:0.3까지 더해 워터마크처럼 본문 뒤에 깔린다.

#logo { position: fixed; ← viewport 기준 고정 top: 130px; ← 화면 위에서 130px left: 70px; ← 화면 왼쪽에서 70px opacity: 0.3; ← 70% 투명 → 워터마크 }

absolute

조상 중 가장 가까운 position 기준 — 페이지 자체를 따라 스크롤됨

fixed (이번 코드)

viewport 기준 — 스크롤해도 같은 자리에 박혀있음

---

5 자주 하는 실수

실수	증상	해결
border-collapse: seperate	오타로 무시됨, 기본값 적용	separate로 수정 또는 collapse
border="1" HTML 속성	옛 방식 — CSS와 혼재	CSS의 border만 사용
fixed 요소가 본문을 가림	로고 뒤 텍스트가 안 읽힘	z-index 조정 또는 opacity 낮춤 + pointer-events:none
li 안에 큰 블록	구조 모호, 스타일 충돌	가능하면 단순 항목만 li
thead 없이 tr만 나열	인쇄 시 머리 행이 안 반복	thead로 머리 행 분리

---

핵심 한 줄 요약

li 안의 table유효하지만 어색 — 분리가 깔끔

thead / tbody머리·본문 분리 → 인쇄 반복, 스타일 분리

border-collapsecollapse가 실무 표준 (단선 깔끔)

position:fixedviewport 기준 — 스크롤 무시

opacity:0.3반투명 — 워터마크 효과

seperate 오타올바른 철자는 separate

Tags

#인적사항 #학력테이블 #table #thead #tbody #border-collapse #position-fixed #opacity #워터마크 #CSS #HTML #포트폴리오 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

인적사항, 학력테이블, table, thead, tbody, border-collapse, position-fixed, opacity, 워터마크, ul-table, CSS, HTML, 포트폴리오, 웹개발, 티스토리