Chapter 1-12. 목록만들기(HTML)

2025. 3. 28. 16:31·HTML & CSS
목차
  1. 📌 HTML 목록 만들기
  2. 🔹 순서 없는 목록 (Unordered List)
  3. 🔹 순서 있는 목록 (Ordered List)
  4. 📊 목록 항목 추가 및 구성
  5. 🔸 <ul>, <ol>, <li> 태그 설명
  6. ✅ 예시 (혼합 사용)
  7. 📌 목록을 사용한 레이아웃과 디자인
  8. 🚩 결론

📌 HTML 목록 만들기

HTML에서는 **목록(list)**을 만들어 관련된 항목(item)들을 나열할 수 있습니다. 목록은 크게 두 가지 종류로 나눌 수 있습니다:

  1. 순서 없는 목록(Unordered List): 항목에 순서가 없고, 보통 점이나 동그라미 기호로 나열됩니다.
  2. 순서 있는 목록(Ordered List): 항목에 순서가 있으며, 번호가 매겨집니다.

🔹 순서 없는 목록 (Unordered List)

  • 순서가 중요한 항목이 아닐 때 사용합니다.
  • <ul> 태그를 사용하여 목록을 시작하고, 각 항목은 <li> 태그로 나열합니다.

✅ 예시

<ul>
  <li>고양이</li>
  <li>강아지</li>
  <li>토끼</li>
</ul>
  • 이 코드는 순서 없는 목록을 생성하며, 각 항목은 점으로 표시됩니다.

🔹 순서 있는 목록 (Ordered List)

  • 항목에 순서가 중요한 경우 사용하며, 번호가 매겨진 목록을 생성합니다.
  • <ol> 태그를 사용하여 목록을 시작하고, 항목은 <li> 태그로 나열합니다.

✅ 예시

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>
  • 이 코드는 순서 있는 목록을 생성하며, 각 항목은 숫자로 표시됩니다.

📊 목록 항목 추가 및 구성

<li> 태그는 목록에 항목을 추가하는 데 사용됩니다. 항목들을 포함하는 태그가 <ul>(순서 없는 목록) 또는 <ol>(순서 있는 목록)인지에 따라 항목이 어떻게 표시되는지가 달라집니다.

  • <ul>: 순서 없는 목록, 항목은 기본적으로 점이나 동그라미로 표시됩니다.
  • <ol>: 순서 있는 목록, 항목은 번호로 표시됩니다.

🔸 <ul>, <ol>, <li> 태그 설명

  • <ul>: 순서 없는 목록을 정의하는 태그입니다.
  • <ol>: 순서 있는 목록을 정의하는 태그입니다.
  • <li>: 목록의 각 항목을 정의하는 태그입니다.

✅ 예시 (혼합 사용)

<h2>애완 동물 목록</h2>

<p>순서 없는 목록:</p>
<ul>
  <li>고양이</li>
  <li>강아지</li>
  <li>토끼</li>
</ul>

<p>순서 있는 목록:</p>
<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>
  • 위 예시는 애완 동물 목록을 순서 없는 목록과 순서 있는 목록으로 각각 나누어 보여줍니다.

📌 목록을 사용한 레이아웃과 디자인

  • 목록을 사용하여 항목을 나열하는 것 외에도, 목록을 활용하여 레이아웃을 정리하거나 디자인 요소로 활용할 수 있습니다.
  • 목록은 웹 페이지에서 콘텐츠를 구분하고 정리하는 데 유용합니다.

🚩 결론

  • HTML 목록은 콘텐츠를 나열하는 데 사용되는 기본적인 도구입니다.
  • **<ul>**은 순서 없는 목록을, **<ol>**은 순서 있는 목록을 생성합니다.
  • 목록 항목은 <li> 태그로 정의됩니다.
  • HTML 목록을 적절히 활용하면 효율적인 콘텐츠 구성과 가독성 향상에 도움이 됩니다.

'HTML & CSS' 카테고리의 다른 글

Chapter 1-14. 입력 태그 <input> (HTML)  (0) 2025.03.28
Chapter 1-13. 표만들기 (HTML)  (0) 2025.03.28
Chapter 1-11. 링크 표시하기(HTML)  (0) 2025.03.28
Chapter 1-8. 컨테이너와 전역 속성  (0) 2025.03.28
Chapter 1-6. 텍스트 표시하기  (0) 2025.03.28
  1. 📌 HTML 목록 만들기
  2. 🔹 순서 없는 목록 (Unordered List)
  3. 🔹 순서 있는 목록 (Ordered List)
  4. 📊 목록 항목 추가 및 구성
  5. 🔸 <ul>, <ol>, <li> 태그 설명
  6. ✅ 예시 (혼합 사용)
  7. 📌 목록을 사용한 레이아웃과 디자인
  8. 🚩 결론
'HTML & CSS' 카테고리의 다른 글
  • Chapter 1-14. 입력 태그 <input> (HTML)
  • Chapter 1-13. 표만들기 (HTML)
  • Chapter 1-11. 링크 표시하기(HTML)
  • Chapter 1-8. 컨테이너와 전역 속성
Chansman
Chansman
안녕하세요! 코딩을 시작한 지 얼마 되지 않은 초보 개발자 찬스맨입니다. 이 블로그는 제 학습 기록을 남기고, 다양한 코딩 실습을 통해 성장하는 과정을 공유하려고 합니다. 초보자의 눈높이에 맞춘 실습과 팁, 그리고 개발하면서 겪은 어려움과 해결 과정을 솔직하게 풀어내려 합니다. 함께 성장하는 개발자 커뮤니티가 되기를 바랍니다.
찬스맨의 프로그래밍 스토리안녕하세요! 코딩을 시작한 지 얼마 되지 않은 초보 개발자 찬스맨입니다. 이 블로그는 제 학습 기록을 남기고, 다양한 코딩 실습을 통해 성장하는 과정을 공유하려고 합니다. 초보자의 눈높이에 맞춘 실습과 팁, 그리고 개발하면서 겪은 어려움과 해결 과정을 솔직하게 풀어내려 합니다. 함께 성장하는 개발자 커뮤니티가 되기를 바랍니다.
  • Chansman
    찬스맨의 프로그래밍 스토리
    Chansman
  • 전체
    오늘
    어제
    • 분류 전체보기 (582) N
      • Python (31)
      • 프로젝트 (43)
      • 과제 (25)
      • Database (40)
      • 멘토링 (10)
      • 특강 (26)
      • 기술블로그 (196) N
      • AI 분석 (3)
      • HTML & CSS (31)
      • JavaScript (17)
      • AWS_Cloud (21)
      • 웹스크래핑과 데이터 수집 (14)
      • Flask (42)
      • Django (58)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
Chansman
Chapter 1-12. 목록만들기(HTML)

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.