📌리스트태그 와 링크태그 란?
- 리스트 태그란 HTML에서 목록을 생성하는 데 사용되는 태그들을 의미합니다.
- 링크태그는 a태그는 HTML에서 링크(하이퍼링크)를 생성하는 데 사용됩니다
1️⃣ol, ul, li 태그
📌 ol (Ordered List)
- 순서가 있는 목록을 생성하는 태그입니다.
- li 태그를 사용하여 각 항목을 나타냅니다.
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>결과
1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목
📌 ul (Unordered List)
- 순서가 없는 목록을 생성하는 태그입니다.
- li 태그를 사용하여 각 항목을 나타냅니다.
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul>결과
- 사과
- 바나나
- 딸기
📌 li (List Item)
- 목록의 각 항목을 정의하는 태그입니다.
- ol이나 ul 안에 위치하여 각 항목을 나타냅니다.
2️⃣리스트태그 속성들
📌 type 속성 (ol 태그에 적용)
- 순서 있는 목록의 마커 유형을 지정합니다.
<ol type="A">
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ol>결과
A. 첫 번째 항목
B. 두 번째 항목
값
1 (기본값): 1, 2, 3, ...
A: A, B, C, ...
a: a, b, c, ...
I: I, II, III, ...
i: i, ii, iii, ...
📌start 속성 (ol 태그에 적용)
- 목적: 순서 있는 목록에서 시작 숫자를 지정합니다.
- 값: 양의 정수 (기본값은 1)
<ol start="5">
<li>다섯 번째 항목</li>
<li>여섯 번째 항목</li>
</ol>결과
5.다섯 번째 항목
6.여섯 번째 항목
📌value 속성 (li 태그에 적용)
- 개별 항목의 값 지정 (순서 있는 목록에서만 사용 가능).
- 값: 양의 정수
<ol>
<li>아홉 번째 항목</li>
<li value="10"> 열 번째 항목</li>
<li>열한 번째 항목</li>
</ol>결과
1.아홉 번째 항목
10.열번째 항목
11.열한번째 항목
📌 type 속성 (li 태그에 적용)
- 순서 있는 목록에서 개별 항목의 마커 유형을 지정합니다.
<ol>
<li>A로 시작하는 항목</li>
<li type="D">D로 시작하는 항목</li>
<li>E로 시작하는 항목</li>
</ol>결과
1.A로 시작하는 항목
D.D로 시작하는 항목
E.E로 시작하는 항목
값
1 (기본값): 1, 2, 3, ...
A: A, B, C, ...
a: a, b, c, ...
I: I, II, III, ...
i: i, ii, iii, ...
💡 알아두기
ul 태그는 순서가 없는 목록을 나타내는 태그이기 때문에, 순서 있는 목록과 관련된 일부 속성은 사용할 수 없습니다.
즉 type, start, value와 같은 속성은 순서 있는 목록(< ol>)에서만 의미가 있습니다.
ul태그는 주로 점, 원, 사각형 등과 같은 기본 마커로 표현되며, 이러한 스타일을 변경하려면 CSS를 사용해야 합니다.
CSS를 활용하여 list-style-type 속성을 설정해야합니다.
<style>
ul {
list-style-type: square; /* 마커를 사각형으로 변경 */
}
ul.custom {
list-style-image: url('custom-marker.png'); /* 사용자 정의 이미지로 마커 지정 */
}
</style>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ul>
<ul class="custom">
<li>사용자 정의 마커</li>
<li>다른 항목</li>
</ul>3️⃣ < a > 태그
< a > 태그는 HTML에서 링크를 생성하는 데 사용됩니다.
주로 다른 웹페이지로 이동하거나, 동일한 페이지 내에서 다른 부분으로 스크롤하는 등의 기능을 수행합니다.
📌href (Hypertext Reference)
- 링크의 대상 URL을 지정합니다. 이 속성은 필수적으로 포함되어야 합니다.
<a href="https://www.example.com">이 링크는 example.com으로 이동합니다.</a>📌target
- 링크를 어떻게 열지를 지정합니다.
값
_blank: 새 창에서 열기
_self: 현재 창에서 열기 (기본값)
_parent: 부모 창에서 열기
_top: 최상위 창에서 열기
<a href="https://www.example.com" target="_blank">새 창에서 열기</a>📌 download
- 링크의 대상을 다운로드할 수 있도록 지정합니다.
📌 rel (Relationship)
- 현재 문서와 링크된 문서 사이의 관계를 지정합니다.
📌title
- 링크에 대한 추가 정보를 제공합니다. 마우스를 올렸을 때 툴팁으로 표시됩니다.
💡(ul, ol, li)와 (a)를 조합하여 리스트와 하이퍼링크를 구성하기
⭐️ 예시 1
<ul>
<li><a href="#">첫 번째 링크</a></li>
<li><a href="#">두 번째 링크</a></li>
<li><a href="#">세 번째 링크</a></li>
</ul>예시 1 해설 : < ul> 태그로 순서 없는 목록을 생성하고, 각 목록 항목< li> 내부에 < a> 태그를 사용하여 링크를 만듭니다.
각링크의 href 속성에는 이동하고자 하는 url을 넣어주면 됩니다.
만약 순거가 있는 목록을 만들고 싶다면 ul 을 ol로 변경하면 됩니다.
⭐️예시2
<ul>
<li>
<a href="#">첫 번째 항목</a>
<ul>
<li>
<a href="#">하위 항목 1</a>
</li>
<li>
<a href="#">하위 항목 2</a>
<ul>
<li>
<a href="#">최하위 항목 1</a>
</li>
<li>
<a href="#">최하위 항목 2</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">두 번째 항목</a>
</li>
</ul>HTML 구조는 중첩된 목록으로도 나타낼수있습니다.
각 항목은 < ul>(순서 없는 목록)과 < li>(목록 항목)로 구성되어 있고, < a> 태그를 사용하여 링크를 생성하고 있습니다.
중첩된 목록은 하위 항목을 표현하고 있습니다.
중첩된 목록 구조를 사용하면 다층으로 구성된 내비게이션 메뉴나 카테고리를 표현할 수 있습니다.
