Day 28 - 목록 항목

Day 28 - 목록 항목 - li 태그

Day 28: 목록 항목 - li 태그

📖 오늘 배울 내용

오늘은 <li> 태그를 자세히 배워요! 목록의 각 항목을 만드는 태그예요. li 태그 안에 텍스트뿐만 아니라 링크, 이미지, 심지어 다른 목록도 넣을 수 있어요! 📋✨

💡 어제 배운 것 복습

ul 태그: Unordered List (순서 없는 목록)
순서가 중요하지 않을 때 사용해요
항목 앞에 점(bullet)이 표시돼요
ul과 li는 항상 함께 사용해요

1. li 태그란? 📚

<li> 태그는 "List Item"의 줄임말이에요. 목록의 각 항목을 만들 때 사용해요. ul이나 ol 안에서만 사용할 수 있어요!

기본 구조

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

결과:

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

비유로 이해하기 🎯

🎒 학생 출석부에 비유하면?

출석부 = <ul> (전체 명단)
각 학생 이름 = <li> (개별 항목)

출석부:
• 김철수 ← li
• 이영희 ← li
• 박민수 ← li

li는 각각의 학생이에요! 👥

2. li 태그 다양한 사용법 🎨

예시 1: 단순 텍스트

<ul>
    <li>사과</li>
    <li>바나나</li>
    <li>포도</li>
</ul>

결과:

사과
바나나
포도

예시 2: li 안에 강조 태그 넣기

<ul>
    <li><strong>HTML</strong>은 웹페이지 구조를 만들어요</li>
    <li><strong>CSS</strong>는 스타일을 꾸며줘요</li>
    <li><strong>JavaScript</strong>는 동작을 추가해요</li>
</ul>

결과:

HTML은 웹페이지 구조를 만들어요
CSS는 스타일을 꾸며줘요
JavaScript는 동작을 추가해요

예시 3: li 안에 code 태그 넣기

<ul>
    <li><code>&lt;h1&gt;</code> - 가장 큰 제목</li>
    <li><code>&lt;p&gt;</code> - 단락</li>
    <li><code>&lt;ul&gt;</code> - 순서 없는 목록</li>
</ul>

결과:

<h1> - 가장 큰 제목
 - 단락
<ul> - 순서 없는 목록

예시 4: 여러 줄 내용 넣기

<ul>
    <li>
        <strong>사과</strong><br>
        빨간색이고 달콤해요
    </li>
    <li>
        <strong>바나나</strong><br>
        노란색이고 부드러워요
    </li>
</ul>

결과:

사과
빨간색이고 달콤해요
바나나
노란색이고 부드러워요

3. li 태그 중첩하기 🌟

li 안에 ul 넣기 (중첩 목록)

<ul>
    <li>과일
        <ul>
            <li>사과</li>
            <li>바나나</li>
        </ul>
    </li>
    <li>채소
        <ul>
            <li>당근</li>
            <li>오이</li>
        </ul>
    </li>
</ul>

결과:

과일
- 사과
- 바나나
채소
- 당근
- 오이

li 안에 또 다른 ul을 넣을 수 있어요!

비유로 이해하기 🎯

📁 폴더 구조에 비유하면?

📂 과일 (li)
  └ 🍎 사과 (li)
  └ 🍌 바나나 (li)

📂 채소 (li)
  └ 🥕 당근 (li)
  └ 🥒 오이 (li)

폴더 안에 폴더처럼!
목록 안에 목록이에요! 📁

4. li 태그 활용 예시 🎯

📝 학습 계획

<h3>이번 주 학습 계획</h3>
<ul>
    <li>
        <strong>월요일</strong>
        <ul>
            <li>HTML 기초</li>
            <li>태그 연습</li>
        </ul>
    </li>
    <li>
        <strong>화요일</strong>
        <ul>
            <li>목록 태그</li>
            <li>실습 프로젝트</li>
        </ul>
    </li>
</ul>

결과:

이번 주 학습 계획

월요일
- HTML 기초
- 태그 연습
화요일
- 목록 태그
- 실습 프로젝트

🍕 레시피 재료

<h3>피자 재료</h3>
<ul>
    <li><strong>도우:</strong> 밀가루, 이스트, 물</li>
    <li><strong>소스:</strong> 토마토소스, 올리브유</li>
    <li><strong>토핑:</strong> 치즈, 페퍼로니, 버섯</li>
</ul>

결과:

피자 재료

도우: 밀가루, 이스트, 물
소스: 토마토소스, 올리브유
토핑: 치즈, 페퍼로니, 버섯

5. 주의사항 ⚠️

💡 li 태그 사용 팁

✅ 좋은 사용:

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

❌ 피해야 할 사용:

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

<!-- p 태그 안에 li 넣기 (X) -->
<p>
    <li>항목 1</li>
</p>

🔑 핵심 규칙:

li는 반드시 ul이나 ol 안에서 사용하세요
li 안에는 다양한 태그를 넣을 수 있어요
li 안에 또 다른 목록을 넣을 수도 있어요

6. 실습 과제 💪

🎯 직접 해보세요!

미션 1: 좋아하는 것 3가지 나열하기

li 태그를 사용해서 좋아하는 음식, 색깔, 취미를 각각 목록으로 만들어보세요!

미션 2: 강조가 있는 목록 만들기

li 안에  태그를 넣어서 중요한 부분을 강조한 목록을 만들어보세요!

미션 3: 2단계 중첩 목록 만들기

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

예: 운동 → (요가, 헬스), 음악 → (피아노, 기타)

7. 퀴즈 타임! 🎮

Q1. li는 무엇의 줄임말인가요?

① List Item
② Line Item
③ Link Item
④ List Index

정답 보기 👆

정답: ① List Item

li는 "List Item"의 줄임말로
"목록 항목"이라는 뜻이에요!

역할:
- 목록의 각 항목을 만들어요
- ul이나 ol 안에서 사용해요
- 여러 개를 나열할 수 있어요

Q2. li 태그는 어디에 사용할 수 있나요?

① 어디든 자유롭게
② ul이나 ol 안에서만
③ p 태그 안에서만
④ div 태그 안에서만

정답 보기 👆

정답: ② ul이나 ol 안에서만

li 태그는 반드시 ul이나 ol 안에서 사용해야 해요!

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

li는 목록의 항목이므로
목록(ul, ol) 안에 있어야 의미가 있어요!

Q3. li 태그 안에 넣을 수 있는 것은?

① 텍스트만
② 텍스트와 강조 태그
③ 텍스트, 강조 태그, 다른 목록
④ 아무것도 넣을 수 없다

정답 보기 👆

정답: ③ 텍스트, 강조 태그, 다른 목록

li 안에는 거의 모든 것을 넣을 수 있어요!

예시:
- 텍스트: <li>항목</li>
- 강조: <li>중요</li>
- 코드: <li><code>alert()</code></li>
- 중첩 목록: <li>과일<ul>...</ul></li>

매우 유연한 태그예요!

Q4. 다음 중 올바른 코드는?

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

정답 보기 👆

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

li는 반드시 ul이나 ol로 감싸야 해요!

왜 나머지는 틀렸을까요?
① ul로 감싸지 않았어요
③ p 태그 안에는 li를 넣을 수 없어요
④ li 안에 ul은 넣을 수 있지만, ul 안에 li가 있어야 해요

항상 ul/ol + li 조합을 기억하세요!

8. 오늘 배운 것 정리 📝

✨ 핵심 요약

<li> 태그는 List Item (목록 항목)이에요
ul이나 ol 안에서만 사용해요
li 안에는 텍스트, 강조 태그, 코드, 다른 목록 등을 넣을 수 있어요
중첩 목록을 만들 수 있어요 (li 안에 ul)
각 항목을 독립적으로 구성할 수 있어요

💡 기억하세요:
li는 목록의 각 항목!
ul/ol 안에서 사용하고, 안에 다양한 내용을 넣을 수 있어요! 📋✨

9. 다음편 예고 🎬

📚 Day 29: 순서 있는 목록 - ol 태그

무엇을 배우나요?

내일은 <ol> 태그를 배워요! 순서가 있는 목록을 만들 때 사용하는 태그예요. 레시피, 단계별 가이드, 순위 등을 만들 수 있어요! 🔢

ol 태그 기본 사용법
ul과 ol의 차이
숫자 스타일 변경하기
실전 순서 목록 만들기

순서가 있는 목록도 마스터해봐요! 🚀

📝 오늘의 한마디

"li 태그 완전 정복! 📋
목록의 각 항목을 만드는 마법사!
다양한 내용을 넣을 수 있어요!
목록 마스터가 되어가요! 🎉✨"

✅ 오늘 배운 것 체크리스트

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

li는 ul/ol 안에서만 사용한다는 걸 안다

li 안에 다양한 태그를 넣을 수 있다

중첩 목록을 만들 수 있다

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

저작자표시 비영리 변경금지 (새창열림)

'AI로 배우는 epub 시리즈' 카테고리의 다른 글

Day 26 - 주간 복습 + 퀴즈 (0)	2025.12.28
Day 27 - 순서 없는 목록 - ul 태그 (0)	2025.12.28
Day 27 - 순서 없는 목록 - ul 태그 (0)	2025.12.28
Day 20 - 실습 - 중요한 부분 강조하기 (0)	2025.12.26
Day 19 - 복습 - 강조 태그 비교 (0)	2025.12.20

전자책에 대한 모든 것

Day 28 - 목록 항목 - li 태그