HTML - 비정렬 목록
안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 HTML 비정렬 목록의 fascinante 세계로 창을 뜰 것입니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 안내해 드리는 것을 기쁘게 생각합니다. 믿으세요, 이 튜토리얼의 끝을 맞아서, 여러분은 프로처럼 목록을 만들 수 있을 것입니다!
비정렬 목록이란?
코드로 뛰어들기 전에, 비정렬 목록이 무엇인지 이해해 보겠습니다. HTML에서 비정렬 목록은 특정 순서가 없는 관련 항목들의 모음입니다. 쇼핑 목록을 생각해 보세요 - 빵을 우유보다 먼저 사야 할 필요는 없고, 사과를 바나나보다 먼저 사야 할 필요도 없습니다. 순서는 중요하지 않지만, 모두가 같은 목록의 일부입니다.
HTML에서 비정렬 목록을 만들기 위해서는 <ul> 태그를 사용하며, 각 목록 항목은 <li> 태그로 둘러싸입니다. 간단한 예제를 보겠습니다:
<ul>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ul>이 코드는 다음과 같이 렌더링됩니다:
- 사과
- 바나나
- 오렌지
보시 thấy 만큼 쉬웠죠? 브라우저가 자동으로 각 항목에 실시간을 추가합니다. 하지만, 실시간을 변경하고 싶다면 어떻게 하죠? 그게 다음 섹션에서 유용하게 쓰일 것입니다!
비정렬 HTML 목록 - 목록 항목 마커 선택
이제 좀 더 재미있는 부분으로 넘어가겠습니다. HTML은 우리가 실시간의 스타일을 변경할 수 있도록 허용합니다. 우리는 이를 "목록 항목 마커"라고 부릅니다. 세 가지 주요 옵션을 가지고 있습니다:
- disc (기본)
- circle
- square
마커를 변경하려면 <ul> 태그에 type 속성을 사용합니다. 어떻게 작동하는지 보겠습니다:
<ul type="disc">
<li>이 목록은 기본 disc 마커를 사용합니다</li>
</ul>
<ul type="circle">
<li>이 목록은 원형 마커를 사용합니다</li>
</ul>
<ul type="square">
<li>이 목록은 사각형 마커를 사용합니다</li>
</ul>이 코드는 다음과 같이 렌더링됩니다:
• 이 목록은 기본 disc 마커를 사용합니다
○ 이 목록은 원형 마커를 사용합니다
■ 이 목록은 사각형 마커를 사용합니다
쿨하지 않나요? 목록에 미니 메이크오버를 해주는 것 같아요!
비정렬 목록 예제
이제 기본적인 내용을 이해했으므로, 더 복잡한 예제를 살펴보겠습니다. 연습이 완벽을 이루는 열쇠이므로, 이 예제들을 복사해 직접 시도해 보세요!
중첩된 비정렬 목록
occasionally, 목록 안에 또 다른 목록을 만들고 싶을 수 있습니다. 이를 중첩 목록이라고 합니다. 이렇게 만드는 방법을 보겠습니다:
<ul>
<li>커피</li>
<li>차
<ul>
<li>블랙 티</li>
<li>그린 티</li>
<li> 허브 티</li>
</ul>
</li>
<li>우유</li>
</ul>이는 다음과 같이 렌더링됩니다:
- 커피
- 차
- 블랙 티
- 그린 티
- 허브 티
- 우유
중첩 목록이 들여쓰기 되어 있음을 주목하세요. 이는 HTML이 이 항목들이 "차"의 하위 카테고리임을 보여주는 방식입니다.
링크가 포함된 비정렬 목록
목록은 단순한 텍스트만으로 구성되지 않습니다. 목록 항목에 다른 HTML 요소를 포함할 수 있습니다. 예를 들어, 좋아하는 웹사이트 목록을 만들어 보겠습니다:
<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.wikipedia.org">Wikipedia</a></li>
<li><a href="https://www.github.com">GitHub</a></li>
</ul>이는 클릭 가능한 웹사이트 목록을 생성합니다:
이미지가 포함된 비정렬 목록
이제 좀 더 화려하게 만들기 위해 목록에 이미지를 추가해 보겠습니다:
<ul>
<li><img src="apple.jpg" alt="Apple"> 사과</li>
<li><img src="banana.jpg" alt="Banana"> 바나나</li>
<li><img src="orange.jpg" alt="Orange"> 오렌지</li>
</ul>이 코드는 각 과일 이름 옆에 작은 이미지를 표시합니다. 목록을 시각적으로 더 매력적으로 만드는 좋은 방법입니다!
비정렬 목록 방법 요약
이제 비정렬 목록을 만들고 커스터마이즈하는 방법을 요약한 표를 제공합니다:
| 방법 | 문법 | 설명 |
|---|---|---|
| 기본 비정렬 목록 | <ul><li>항목</li></ul> |
기본 비정렬 목록 생성 |
| 목록 마커 변경 | <ul type="circle"> |
목록 항목 마커 스타일 변경 |
| 중첩 목록 | <ul><li><ul><li>중첩 항목</li></ul></li></ul> |
목록 안에 목록 생성 |
| 링크가 포함된 목록 | <ul><li><a href="url">링크</a></li></ul> |
클릭 가능한 링크 목록 생성 |
| 이미지가 포함된 목록 | <ul><li><img src="이미지.jpg"> 항목</li></ul> |
목록 항목에 이미지 추가 |
이제 여러분은 HTML에서 비정렬 목록을 만들고 커스터마이즈하는 데 필요한 모든 도구를 갖추었습니다. 연습이 스킬을 완성하는 열쇠이므로, 이 예제들을 실험해 보세요!
마무리하면서, 작은 코딩 유머를 떠올립니다: 왜 개발자가 일을 그만뒀을까요? 그는配列를 얻지 못했기 때문입니다! ? 걱정하지 마세요, 다음 날에配列에 대해 배우겠습니다. 지금은 목록을 만들고 코딩을 계속하세요!
Credits: Image by storyset