HTML 종합 — aside · section으로 프로필 사이드바 만들기

 

 

Web Development · HTML Comprehensive

HTML 종합 — 프로필 페이지에
aside 사이드바 추가하기

2단 레이아웃 시작 · aside · 시맨틱 구조 완성형

시작 오늘 분석할 코드

이전 시리즈의 프로필 페이지에 왼쪽 사이드바(이름·연락처·SNS)를 추가했다. 핵심 시맨틱 태그 <aside>가 처음 등장하고, 페이지 구조가 2단 레이아웃으로 발전한다.

<div id="container"> <!-- 사이드바 영역 --> <aside> <div id="namecard"> <img src="images/pf.jpg" alt=""> <h1>Kyunghee Ko</h1> <p>오늘은 남은 인생이 시작되는 첫째날</p> </div> <div id="detail"> <p>Jeju, Korea</p> <p>funcom@gmail.com</p> </div> <div id="sns"> <h2>SNS</h2> </div> </aside> <div id="main"> <section> ... </section> <!-- Who am I? --> <section> ... </section> <!-- Experience --> <section> ... </section> <!-- Skills --> <section> ... </section> <!-- Education --> </div> </div>

전체 레이아웃 구조

<aside>
이름카드 / 연락처 / SNS
(왼쪽 사이드바)

<div id="main">
Who am I? / Experience / Skills / Education
(메인 콘텐츠 영역)

용어 용어 정리

aside부가 정보·사이드바

main페이지 핵심 콘텐츠

section독립된 주제 단락

container전체를 감싸는 컨테이너

namecard이름·소개를 묶은 박스

id고유 식별자 (CSS·JS·앵커용)

---

1 <aside> — 부가 정보 영역

<aside>는 "본문과 별개의 부가 정보"를 담는 시맨틱 태그다. 사이드바, 광고, 관련 링크, 작성자 프로필 등이 들어간다.

※ 사전적 의미는 "옆에 두는 것". 본문(main)을 보면서 곁에 두고 참고하는 정보라는 뉘앙스.

aside가 적합한 곳

예시	설명
블로그 사이드바	최신 글, 카테고리, 광고
본문 옆 인용 박스	관련 정보·통계
저자 프로필	본문 끝 작성자 정보
이번 코드	이름·연락처·SNS 사이드바

※ aside는 단순히 "옆에 있는 것"이 아니다. 본문에 붙어 있어도 분리해도 의미가 통하는 정보여야 한다. 본문의 일부면 aside가 아니라 section.

---

2 시맨틱 태그 가족 — 페이지 구조 표준

이번 코드까지 합치면 시맨틱 태그 가족이 거의 다 등장한다. 모던 웹 페이지의 표준 구조.

┌─ <header> ───────────────────────────┐ │ 로고, 네비게이션 │ └────────────────────────────────────────┘ ┌─ <aside> ─┐ ┌─ <main> ──────────────┐ │ │ │ <article> │ │ 사이드바 │ │ <section> │ │ │ │ 본문 콘텐츠 │ │ │ │ </section> │ └───────────┘ └─────────────────────────┘ ┌─ <footer> ───────────────────────────┐ │ 저작권, 회사 정보 │ └────────────────────────────────────────┘

태그	역할	등장 횟수
<header>	페이지·섹션 머리말	여러 개 가능
<nav>	네비게이션 링크	여러 개 가능
<main>	핵심 콘텐츠	페이지에 1개만
<section>	주제 단위 묶음	여러 개 가능
<article>	독립적 콘텐츠	여러 개 가능
<aside>	부가 정보 (이번)	여러 개 가능
<footer>	꼬리말	여러 개 가능

---

3 aside vs section vs div — 헷갈리는 셋

<aside>

"본문과 다른 부가 정보"
분리해도 의미 통함
사이드바·광고

<section>

"본문의 한 단락"
본문에 종속
주제 분리

<div>

"의미 없는 박스"
스타일·레이아웃 용도만
다른 시맨틱 태그가 없을 때

사용 우선순위

aside / section 같은 의미 태그가 우선
적합한 게 없을 때만 div

---

4 명시적 id의 활용

aside 안에 다시 id="namecard"·id="detail"·id="sns"로 작은 단위들을 만들었다. 각각의 영역에 다른 스타일을 주거나 자바스크립트로 접근하기 위함.

CSS에서: #namecard { padding: 20px; } #namecard img { border-radius: 50%; } /* 동그란 프로필 사진 */ #detail { font-size: 13px; color: #666; } #sns { margin-top: 20px; } JavaScript에서: document.getElementById("sns")

※ id 명명 패턴

• 의미 있는 영문 단어로 (a, box1 X)
• 케밥 케이스 (name-card) 또는 카멜 케이스 (nameCard)
• 한 페이지에 같은 id 절대 중복 X
• 여러 군데 공통 스타일이면 id가 아니라 class로

반응형

---

5 이번 코드의 진화 — 이전과 비교

2번 폴더의 index-table-result.html과 거의 같지만, aside 영역이 추가됐다. 단순한 한 단 페이지에서 2단 레이아웃으로 발전.

이전 (index-table-result)	이번 (index-img-result)
main 영역만	aside + main 2단 레이아웃
한 줄로 진행	좌측 사이드바 + 메인 콘텐츠
section 4개	aside 1개 + section 4개
외부 CSS만	외부 CSS + 내부 style

---

6 2단 레이아웃을 만드는 CSS

이번 HTML은 구조만 잡았지만, 실제로 옆으로 배치되려면 CSS가 필요하다. 모던 표준은 flexbox나 grid.

/* Flexbox 방식 */ #container { display: flex; gap: 20px; } aside { width: 280px; flex-shrink: 0; } #main { flex: 1; } /* Grid 방식 */ #container { display: grid; grid-template-columns: 280px 1fr; gap: 20px; }

---

7 자주 하는 실수

실수	증상	해결
본문의 한 부분에 aside	의미 부정확	본문 내부면 section
aside 안에 메인 콘텐츠	구조 혼란	핵심은 main에
모든 영역을 div만	SEO·접근성 ↓	적절한 시맨틱 태그
id 중복	JS 동작 X, 검증 오류	id는 페이지에 유일
장식 이미지에 alt 채움	스크린 리더 노이즈	alt=""로 비우기
main을 여러 개 사용	표준 위배	main은 페이지에 1개

---

8 시리즈 종합 — 1·2·3 폴더 학습 정리

이번 코드는 지금까지 배운 거의 모든 개념의 종합판이다.

개념	학습 위치	이번 적용
HTML 골격	basic.html	전체 구조
table·thead·tbody	1폴더 table 시리즈	학력 표
제목 h1·h2	2폴더 text-1	이름·섹션 제목
mark	2폴더 text-5	본문 키워드 강조
중첩 ul	2폴더 ul	경력 트리
section / id / class	2폴더 index-table	구조 분리
외부 CSS link	2폴더 index-table	head에 추가
img · alt	3폴더 img-2	프로필 사진
aside (이번)	3폴더 index-img	2단 레이아웃 시작

---

핵심 한 줄 요약

<aside>부가 정보·사이드바 시맨틱

2단 레이아웃aside + main 구조 표준

시맨틱 우선div보다 aside·section·main 권장

main페이지에 1개만

aside 판단 기준분리해도 의미가 통하는가?

id 명명의미 있게 + 페이지에 유일

레이아웃 CSSflex 또는 grid가 모던 표준

alt=""장식 이미지는 비워두기

Tags

#aside #section #main #div #HTML #사이드바 #시맨틱태그 #2단레이아웃 #프로필페이지 #HTML종합 #레이아웃 #id #웹개발 #티스토리

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

aside, section, main, div, HTML, 사이드바, 시맨틱태그, 2단레이아웃, 프로필페이지, HTML종합, 레이아웃, id, 웹개발, 티스토리