Day 27 - 순서 없는 목록 - ul 태그

Day 27: 순서 없는 목록 - ul 태그

📖 오늘 배울 내용

안녕하세요! 🎉 오늘부터 Week 5: 리스트와 목록이 시작돼요! 오늘은 <ul> 태그를 배워서 순서가 없는 목록을 만드는 방법을 알아봐요. 쇼핑 목록, 메뉴, 할 일 목록을 만들 수 있어요! 📝✨

💡 어제 배운 것 복습

• Week 4 완주: 특수 텍스트 마스터 🏆
• sup: 위 첨자 (x²)
• sub: 아래 첨자 (H₂O)
• code: 코드 표시 (alert())
• kbd: 키보드 키 (Enter)

---

1. ul 태그란? 📚

<ul> 태그는 "Unordered List"의 줄임말이에요. 순서가 없는 목록을 만들 때 사용해요. 각 항목 앞에 점(bullet)이 표시돼요!

기본 구조

<ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ul>

결과:

• 첫 번째 항목
• 두 번째 항목
• 세 번째 항목

비유로 이해하기 🎯

🛒 쇼핑 목록에 비유하면?

쇼핑 목록을 작성할 때:
• 사과
• 바나나
• 우유
• 빵

순서가 중요하지 않죠?
어떤 걸 먼저 사도 돼요!

바로 이럴 때 ul 태그를 사용해요! 🛍️

---

2. ul 태그 사용법 🎨

예시 1: 간단한 목록

<h3>좋아하는 과일</h3>
<ul>
    <li>사과</li>
    <li>바나나</li>
    <li>포도</li>
</ul>

결과:

좋아하는 과일

• 사과
• 바나나
• 포도

예시 2: 할 일 목록

<h3>오늘 할 일</h3>
<ul>
    <li>HTML 공부하기</li>
    <li>운동하기</li>
    <li>책 읽기</li>
    <li>친구 만나기</li>
</ul>

결과:

오늘 할 일

• HTML 공부하기
• 운동하기
• 책 읽기
• 친구 만나기

예시 3: 메뉴 목록

<h3>카페 메뉴</h3>
<ul>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>카푸치노</li>
    <li>에스프레소</li>
</ul>

결과:

카페 메뉴

• 아메리카노
• 카페라떼
• 카푸치노
• 에스프레소

비유로 이해하기 🎯

🎒 가방 안 물건에 비유하면?

가방 안에 있는 것들:
• 필통
• 노트
• 책
• 물병

어떤 순서로 넣어도 상관없어요!
중요한 건 "뭐가 있는지"예요!

ul 태그가 바로 이런 거예요! 🎒

---

3. ul 태그 활용 사례 🌟

📱 웹사이트 메뉴

<h3>네비게이션 메뉴</h3>
<ul>
    <li>홈</li>
    <li>소개</li>
    <li>서비스</li>
    <li>문의</li>
</ul>

결과:

네비게이션 메뉴

• 홈
• 소개
• 서비스
• 문의

🎨 특징 나열

<h3>HTML의 특징</h3>
<ul>
    <li>배우기 쉬워요</li>
    <li>웹페이지를 만들어요</li>
    <li>태그를 사용해요</li>
    <li>누구나 무료로 사용할 수 있어요</li>
</ul>

결과:

HTML의 특징

• 배우기 쉬워요
• 웹페이지를 만들어요
• 태그를 사용해요
• 누구나 무료로 사용할 수 있어요

🌍 다중 목록 (중첩)

<h3>대륙과 나라</h3>
<ul>
    <li>아시아
        <ul>
            <li>한국</li>
            <li>일본</li>
            <li>중국</li>
        </ul>
    </li>
    <li>유럽
        <ul>
            <li>프랑스</li>
            <li>독일</li>
            <li>영국</li>
        </ul>
    </li>
</ul>

결과:

대륙과 나라

• 아시아
  • 한국
  • 일본
  • 중국
• 유럽
  • 프랑스
  • 독일
  • 영국

목록 안에 목록을 넣을 수도 있어요!

---

4. ul과 li의 관계 🔗

📦 ul과 li는 한 팀!

태그	의미	역할
ul	Unordered List	목록 전체를 감싸는 컨테이너
li	List Item	각각의 목록 항목

💡 기억하세요:

• ul은 목록 상자예요
• li는 상자 안의 항목이에요
• ul 안에는 반드시 li가 있어야 해요!

비유로 이해하기 🎯

🍱 도시락 통에 비유하면?

<ul> = 도시락 통 (전체)
<li> = 반찬 칸 (각 항목)

도시락 통 안에:
• 밥
• 김치
• 계란말이
• 과일

ul이 통이고, li가 각 반찬이에요! 🍱

---

5. 주의사항 ⚠️

💡 ul 태그 사용 팁

✅ 좋은 사용:

<ul>
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
</ul>

❌ 피해야 할 사용:

<!-- li 없이 ul만 사용 (X) -->
<ul>
    항목 1
    항목 2
</ul>

<!-- ul 없이 li만 사용 (X) -->
<li>항목 1</li>
<li>항목 2</li>

🔑 핵심 규칙:

• ul 안에는 반드시 li를 사용하세요
• li는 항상 ul 안에 있어야 해요
• 순서가 중요하지 않을 때 ul을 사용하세요

---

6. 실습 과제 💪

🎯 직접 해보세요!

미션 1: 좋아하는 것 목록 만들기

자신이 좋아하는 음식, 색깔, 취미 중 하나를 골라 목록을 만들어보세요!

예: "좋아하는 음식" - 피자, 치킨, 떡볶이

미션 2: 할 일 목록 만들기

오늘 또는 이번 주에 할 일 5가지를 ul 태그로 만들어보세요!

미션 3: 중첩 목록 만들기

큰 카테고리와 작은 카테고리를 나눠서 중첩 목록을 만들어보세요!

예: 운동 → 실내 운동 (요가, 헬스), 실외 운동 (달리기, 자전거)

---

7. 퀴즈 타임! 🎮

Q1. ul은 무엇의 줄임말인가요?

① Unique List
② Unordered List
③ Universal List
④ Under List

정답 보기 👆

정답: ② Unordered List

ul은 "Unordered List"의 줄임말로
"순서 없는 목록"이라는 뜻이에요!

특징:
- 순서가 중요하지 않아요
- 항목 앞에 점(bullet)이 표시돼요
- 쇼핑 목록, 메뉴 등에 사용해요

Unordered = 순서 없는
List = 목록 📝

Q2. ul 태그 안에 반드시 들어가야 하는 태그는?

① <p>
② <li>
③ <div>
④ <span>

정답 보기 👆

정답: ② <li>

ul 안에는 반드시 li 태그가 있어야 해요!

올바른 구조:
<ul>
    <li>항목 1</li>
    <li>항목 2</li>
</ul>

ul = 목록 상자
li = 상자 안의 항목

둘은 항상 함께 사용해요! 📦

Q3. ul 태그를 사용하기 적합한 경우는?

① 순서가 중요한 요리 레시피
② 순서 없는 쇼핑 목록
③ 1등부터 3등까지의 순위
④ 단계별 설치 가이드

정답 보기 👆

정답: ② 순서 없는 쇼핑 목록

ul은 순서가 중요하지 않을 때 사용해요!

ul 사용 예:
• 쇼핑 목록
• 메뉴
• 특징 나열
• 할 일 목록

나머지는 순서가 중요해서
ol 태그를 사용해야 해요!
(내일 배울 거예요!)

Q4. 다음 중 올바른 ul 태그 사용은?

① <ul>항목1 항목2</ul>
② <li>항목1</li><li>항목2</li>
③ <ul><li>항목1</li><li>항목2</li></ul>
④ <ul><p>항목1</p><p>항목2</p></ul>

정답 보기 👆

정답: ③ <ul><li>항목1</li><li>항목2</li></ul>

올바른 구조는:
- ul로 전체를 감싸고
- 각 항목을 li로 만들어요

왜 나머지는 틀렸을까요?
① ul 안에 li가 없어요
② ul로 감싸지 않았어요
④ p 태그 대신 li를 써야 해요

항상 ul과 li를 함께 사용하세요! ✓

---

8. 오늘 배운 것 정리 📝

✨ 핵심 요약

1. <ul> 태그는 Unordered List (순서 없는 목록)이에요
2. 순서가 중요하지 않을 때 사용해요
3. 항목 앞에 점(bullet)이 표시돼요
4. <ul> 안에는 반드시 <li> 태그가 있어야 해요
5. 쇼핑 목록, 메뉴, 특징 등에 사용해요
6. 목록 안에 목록을 중첩할 수도 있어요

💡 기억하세요:
순서 없는 목록 = ul 태그!
ul과 li는 항상 함께 사용해요! 📝✨

---

9. 다음편 예고 🎬

📚 Day 28: 목록 항목 - li 태그

무엇을 배우나요?

내일은 <li> 태그를 자세히 배워요! 목록의 각 항목을 만드는 방법과 li 태그 안에 다양한 내용을 넣는 방법을 알아봐요! 📋

• li 태그 상세 사용법
• li 안에 다양한 태그 넣기
• li 스타일링 방법
• 실전 목록 만들기

ul과 li를 완벽하게 마스터해봐요! 🚀

---

📝 오늘의 한마디

"ul 태그로 목록의 세계에 입문! 📝
쇼핑 목록, 할 일, 메뉴...
순서 없는 목록은 ul로 만들어요!
Week 5 시작, 화이팅! 🎉✨"

✅ 오늘 배운 것 체크리스트

ul 태그가 무엇인지 이해했다

ul과 li를 함께 사용할 수 있다

순서 없는 목록을 만들 수 있다

중첩 목록을 만들 수 있다

모두 체크했다면 오늘 공부 완료! 🎉