반응형
Web Development · HTML Comprehensive
HTML 종합 정리 — 온라인 프로필 만들기
외부 CSS · section · 중첩 ul · table 한꺼번에
link로 외부 스타일시트 연결 + section 시맨틱 구조 + 표 + 리스트 종합
시작 오늘 분석할 코드
지금까지 배운 거의 모든 태그가 한 페이지에 모인 종합 예제다. 온라인 프로필을 만들면서 외부 CSS 연결, section 시맨틱 구조, 중첩 리스트, 표를 모두 다룬다.
<head> <title>온라인 프로필</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <style> table { width: 70%; border: 1px solid #222; border-collapse: collapse; } thead { background: #eee; } th, td { border: 1px solid #ccc; padding: 5px; font-size: 0.8em; } </style> </head> <body> <div id="container"> <div id="main"> <section> <h2 class="subtitle">Who am I?</h2> <p><mark>프런트엔드 웹 기술</mark>에 관심이 ...</p> </section> <section> <h2>Experience</h2> <ul> <li>프론트엔드 개발 <ul><li>업무 내용</li></ul> </li> </ul> </section> <section> <h2>Education</h2> <table>...</table> </section> </div> </div> </body>
용어 용어 정리
link외부 CSS 파일을 페이지에 연결
rel관계(relation) — stylesheet
href파일 경로 (Hyperlink Reference)
section의미 있는 콘텐츠 묶음 (시맨틱)
id고유 식별자 (페이지에 1개)
class분류 — 여러 요소에 같은 값 OK
border-collapse표 테두리 합치기
시맨틱 태그의미를 가진 태그 (section/article/nav)
1 <link> — 외부 CSS 연결
지금까지는 CSS를 head 안의 <style> 태그에 직접 적었다. 이번 코드는 별도 .css 파일을 외부에서 가져와 연결하는 방식을 추가했다.
<link rel="stylesheet" href="css/style.css"> │ │ │ │ │ └─ 가져올 파일 경로 │ └─ "스타일시트입니다" └─ relation (관계) 속성
왜 외부 CSS인가?
| 이점 | 설명 |
|---|---|
| 여러 페이지 공유 | 한 .css 파일을 100개 페이지가 사용 가능 |
| 유지보수 | 한 곳만 수정하면 모든 페이지 반영 |
| 브라우저 캐싱 | 한 번 다운로드 후 재사용 → 속도 ↑ |
| 관심사 분리 | HTML(구조)과 CSS(디자인) 분리 |
※ 이번 코드는 외부 CSS와 내부
<style>이 함께 있다. 우선순위는 같은 강도면 늦게 작성된 것이 적용된다. 외부 CSS를 link로 먼저 불러오고 head 마지막에 style을 두면 internal이 우선.HTML 파일
+
link로 연결
→
style.css 적용
2 <section> — 시맨틱 구조
<section>은 HTML5에서 추가된 의미 있는 컨테이너다. 그냥 <div>로 묶을 수도 있지만, section은 "여기는 독립된 주제 단락입니다"라는 의미를 명시한다.
<div> — 의미 없음
단순 박스 컨테이너
그저 묶는 용도
SEO·접근성 정보 없음
그저 묶는 용도
SEO·접근성 정보 없음
<section> — 시맨틱
"독립된 주제 영역"
안에 보통 제목 포함
SEO·접근성에 도움
안에 보통 제목 포함
SEO·접근성에 도움
※ 이번 코드는 자기소개 / 경력 / 숙련도 / 학력 — 4개의 독립된 주제 → 각각 section으로 분리. 깔끔한 시맨틱 구조.
시맨틱 태그 가족
| 태그 | 의미 |
|---|---|
<header> |
페이지·섹션의 머리말 |
<nav> |
네비게이션 메뉴 |
<main> |
페이지 핵심 콘텐츠 (1개만) |
<section> |
주제 단위 묶음 |
<article> |
독립 콘텐츠 (블로그 글, 뉴스 등) |
<aside> |
사이드바·부가 정보 |
<footer> |
페이지·섹션 꼬리말 |
3 id vs class — 어떻게 다른가?
이번 코드의 <div id="container">와 <h2 class="subtitle">의 차이는 무엇일까?
| 항목 | id | class |
|---|---|---|
| 중복 가능? | X — 페이지에 1개만 | O — 여러 요소에 OK |
| CSS 셀렉터 | #container |
.subtitle |
| JS 접근 | getElementById |
getElementsByClassName |
| 용도 | 고유 영역 (헤더, 푸터) | 분류, 스타일 그룹 |
| 우선순위 | 높음 | 낮음 (id의 1/10) |
※ 판단 기준 — "이 페이지에 정확히 하나만 있는가?" YES → id, NO → class. 같은 모양 제목이 여러 개면 class. 페이지의 메인 컨테이너는 id.
4 <mark> 한 번 더 — 강조 기법
"Who am I?" 섹션의 <mark>프런트엔드 웹 기술</mark>이 노란 형광펜으로 강조된다. 자기소개에서 핵심 키워드만 시각적으로 부각시키는 좋은 패턴.
반응형
5 중첩 ul — 경력 트리 구조
경력 섹션은 2단 깊이의 중첩 ul이다. 큰 카테고리(직무) → 그 아래 세부 업무가 자동으로 들여쓰기로 표현된다.
<ul> <li>프론트엔드 개발 ← 1단계 <ul> <li>업무 내용 ...</li> ← 2단계 (들여쓰기, 다른 모양 불릿) <li>업무 내용</li> </ul> </li> <li>웹 디자인</li> </ul>
※ 중첩 시 주의
- 안쪽 ul은 li 안에 위치 — li 사이에 두면 안 됨
- 1단계 li 텍스트 다음에 바로 ul 시작 (한 줄에 같이 둬도 OK)
- 2단계 ul도 자체로 li로 감싸야 — ul 직접 자식은 li만
6 border-collapse: collapse — 표의 핵심 옵션
이번 표는 border-collapse: collapse;가 추가됐다. 앞선 시리즈(table-1, table-3, table-6)에는 없던 옵션이다.
기본 (separate)
셀마다 자기 테두리
+
표 테두리
= 이중 선처럼 보임
+
표 테두리
= 이중 선처럼 보임
collapse
테두리가 합쳐짐
한 줄로 표시
깔끔한 격자
실무 표준
한 줄로 표시
깔끔한 격자
실무 표준
7 0.8em — 글자 크기 단위
font-size: 0.8em;는 부모 요소 글자 크기의 80%를 의미한다. 부모가 16px이면 12.8px이 된다.
| 단위 | 의미 | 예: 부모 16px일 때 |
|---|---|---|
| 0.5em | 50% | 8px |
| 0.8em | 80% | 12.8px (이번 코드) |
| 1em | 100% | 16px |
| 1.5em | 150% | 24px |
| 2em | 200% | 32px |
※ em은 누적된다. 부모(20px)의 자식이 0.8em(16px), 그 자식이 다시 0.8em이면 12.8px... 깊은 중첩에서 의도치 않게 작아진다. 이걸 피하려면
rem(html 기준)을 쓴다.8 전체 페이지 구조 — 한눈에
<div id="container">
↓
<div id="main">
↓
section: Who am I? (mark 강조)
↓
section: Experience (중첩 ul)
↓
section: Skills
↓
section: Education (table)
9 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| link href 경로 오타 | 스타일이 적용 안 됨 | F12 콘솔에서 404 확인 |
| id를 여러 요소에 중복 | JS·접근성 오류 | 중복은 class로 |
| 모든 영역을 div로 | SEO·접근성 약화 | section/article/nav 등 시맨틱 |
| border-collapse 빼먹음 | 테두리 이중선 | 거의 항상 collapse |
| em 깊게 중첩 | 예상치 못한 크기 변화 | rem 사용 |
| 중첩 ul을 li 사이에 둠 | HTML 검증 오류 | li 안으로 |
10 이번 시리즈 종합
지금까지 본 시리즈에서 다룬 모든 개념을 한 페이지에 통합한 셈이다.
| 개념 | 이전 학습 위치 | 이번 코드 적용 |
|---|---|---|
| HTML 골격 | basic.html | 전체 구조 |
| table·tr·th·td | table-1 | 학력 표 |
| caption | table-3 | 학력 사항 라벨 |
| thead·tbody | table-6 | 표 머리/몸통 분리 |
| 제목 h1·h2 | text-1 | 섹션 제목 |
| strong·em | text-3 | 본문 강조 (외부 css에서) |
| mark | text-5 | 형광펜 키워드 |
| span / 인라인 style | text-5 | 스타일 적용 |
| ul / 중첩 | ul.html | 경력 트리 |
| section / id / class | 이번 처음 | 전체 구조 시맨틱 |
| 외부 CSS link | 이번 처음 | head에 추가 |
핵심 한 줄 요약
<link>외부 CSS 파일 연결 (rel + href)
<section>의미 있는 주제 묶음 (시맨틱)
id고유 식별자 — 페이지에 1개
class분류 — 여러 요소 공유 가능
border-collapsecollapse가 표 실무 표준
em 단위부모 크기 기준 — 누적 주의
시맨틱 우선div 대신 section/article/nav
관심사 분리HTML(구조) + CSS(디자인) 분리
Tags
#link #외부CSS #section #id #class #HTML #시맨틱태그 #border-collapse #em단위 #HTML종합 #프로필페이지 #중첩리스트 #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
link, 외부CSS, section, id, class, HTML, 시맨틱태그, border-collapse, em단위, HTML종합, 프로필페이지, 중첩리스트, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| HTML 외부 링크 — target=_blank · text-decoration 완전 정리 (0) | 2026.05.01 |
|---|---|
| HTML 앵커 — a · href · id로 페이지 내 점프 완전 정리 (0) | 2026.05.01 |
| HTML 형광펜과 인라인 영역 — mark · span 완전 정리 (0) | 2026.05.01 |
| HTML 글자 강조 — strong · b · em · i · font-size · line-height 완전 정리 (0) | 2026.05.01 |
| HTML pre 태그 — 입력한 그대로 보여주기 완전 정리 (0) | 2026.05.01 |
댓글