📝 HTML 목록 태그 h · ul · ol · li + CSS 노멀라이즈
웹 페이지에서 메뉴, 순서, 목록을 표현할 때 사용하는 태그입니다.
ul, ol, li 세 가지만 알면 대부분의 목록을 만들 수 있어요!
그리고 실무에서 반드시 해야 하는 노멀라이즈까지 함께 정리합니다.
1. h1 ~ h6이란? 💡
HTML에서 제목을 표시할 때 사용하는 태그입니다.
숫자가 커질수록 크기가 작아지고 중요도도 낮아집니다.
<!-- h1 : 큰 제목 -->
<!-- h2 : h1 다음으로 큰 제목 -->
<!-- h3 : h2 다음으로 큰 제목 -->
<!-- h4 : h3 다음으로 큰 제목 -->
<!-- h5 : h4 다음으로 큰 제목 -->
<!-- h6 : h5 다음으로 큰 제목 -->h1 — 페이지의 핵심 제목 (가장 크고 중요)
h2 — 큰 섹션 제목
h3 — 소 섹션 제목
h4 — 세부 항목
h5 — 더 세부적인 항목
h6 — 가장 낮은 단계 (가장 작고 덜 중요)💡 비유로 이해하기 — 책의 목차와 같습니다.
h1은 책 제목,h2는 챕터,h3는 소챕터, 이런 식으로 계층이 내려갑니다.
2. ul과 li란? 🗂️
ul (Unordered List) — 순서가 없는 목록입니다. 앞에 점(•) 이 붙습니다.
li (List Item) — 목록의 각 항목입니다. 반드시 ul 또는 ol 안에서 사용합니다.
📝 HTML 코드
<!-- ul : 목록 -->
<!-- li : 항목 -->
<!-- ul의 역할 : li의 부모 -->
<ul>
<!-- li의 역할 : 항목을 표현 -->
<li>동물</li>
<li>식물</li>
<li>광물</li>
</ul>🔍 렌더링 결과
• 동물
• 식물
• 광물💡 실무 팁 — 네비게이션 메뉴도 사실
ul > li > a구조로 만드는 것이 표준입니다.
순서가 없는 항목의 나열이라면ul을 쓰는 게 의미상 올바릅니다.
3. ol이란?
ol (Ordered List) — 순서가 있는 목록입니다. 앞에 숫자(1, 2, 3...) 가 붙습니다.
순서가 중요한 단계별 설명, 조리법, 절차 등에 사용합니다.
📝 HTML 코드
<!-- ol : 목록 (순서 있는 목록) -->
<ol>
<li>물을 끓인다.</li>
<li>라면을 넣는다.</li>
<li>후레이크와 스프를 넣는다.</li>
<li>맛있게 먹는다.</li>
</ol>🔍 렌더링 결과
1. 물을 끓인다.
2. 라면을 넣는다.
3. 후레이크와 스프를 넣는다.
4. 맛있게 먹는다.4. ul vs ol 차이
| 태그 | 이름 | 기호 | 사용 상황 |
|---|---|---|---|
ul | Unordered List | • (점) | 순서가 없는 목록 (메뉴, 특징, 재료 등) |
ol | Ordered List | 1, 2, 3 (숫자) | 순서가 중요한 목록 (단계, 절차, 순위 등) |
📌 한 줄 선택 기준
순서를 바꿔도 의미가 같다 → ul 사용
순서를 바꾸면 의미가 달라진다 → ol 사용5. 노멀라이즈: 브라우저 기본값 제거하기 🧹
브라우저는 h 태그와 ul, li 태그에 기본 스타일을 지정해 놓습니다.
이 기본값들이 디자인을 방해하기 때문에 CSS 작업 시 가장 먼저 제거해야 합니다.
🔍 브라우저 기본값이 뭔데요?
h1 ~ h6 → 위아래 margin이 자동으로 붙어있음
ul, li → 앞에 점(•)이 붙고, padding과 margin이 있음직접 지워보기 전까지는 잘 모르지만, 레이아웃을 잡다 보면 원인 모를 여백이 생겨서 고생하게 됩니다!
✅ h 시리즈 노멀라이즈
/* h 시리즈 태그에는 기본적인 margin이 들어있다. 그걸 제거하고 써야 한다. */
h1, h2, h3, h4, h5, h6 {
margin: 0;
}| 속성 | 기본값 | 제거 후 |
|---|---|---|
margin | 브라우저마다 다름 | 0 |
✅ ul · li 노멀라이즈
ul, li {
list-style: none; /* 앞에 점(•) 없애기 */
padding: 0; /* 안쪽 여백 제거 */
margin: 0; /* 바깥쪽 여백 제거 */
}| 속성 | 기본값 | 제거 후 |
|---|---|---|
list-style | disc (점) | none |
padding | 왼쪽 40px | 0 |
margin | 위아래 여백 | 0 |
📝 적용 예제
<ul>
<li>메뉴 아이템 1</li>
<li>메뉴 아이템 2</li>
<li>메뉴 아이템 3</li>
</ul>ul, li {
list-style: none;
padding: 0;
margin: 0;
}적용 전: 적용 후:
• 메뉴 아이템 1 메뉴 아이템 1
• 메뉴 아이템 2 메뉴 아이템 2
• 메뉴 아이템 3 메뉴 아이템 3🍯 꿀팁 — 이전 포스팅에서 다룬
a태그 노멀라이즈와 함께 묶어서 CSS 파일 최상단에 항상 써두는 습관을 들이자!
/* ✅ 실무 노멀라이즈 세트 */
a {
color: inherit;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
body {
margin: 0;
}6. 📖 핵심 요약
| 포인트 | 내용 |
|---|---|
🔵 ul | 순서 없는 목록, 점(•) 기호 |
🔢 ol | 순서 있는 목록, 숫자 기호 |
📌 li | ul 또는 ol 안에서만 사용 |
🧹 list-style: none | 점(•) 제거 |
🧹 margin: 0 | h 태그, ul/li 기본 여백 제거 |
| 📌 노멀라이즈 순서 | CSS 파일 최상단에 가장 먼저 작성 |
