1.1 리스트 종류
HTML의 리스트는 정보를 조직하고 구조화하는 데 중요한 도구야. 숫자나 마커(굵은 점)로 요소를 표시할 수 있어.
HTML의 리스트 요소 각각에 대해 자세히 살펴볼게: <ul>, <ol>, 그리고 <li>.
순서 없는 리스트 (<ul>)
<ul> 태그는 순서 없는(마커가 있는) 리스트를 만드는 데 사용돼. 리스트 항목들은 마커(점, 원, 사각형)로 표시돼.
예제:
<ul>
<li>리스트의 첫 번째 항목</li>
<li>리스트의 두 번째 항목</li>
<li>리스트의 세 번째 항목</li>
</ul>
순서 있는 리스트 (<ol>)
<ol> 태그는 순서 있는 리스트를 만드는 데 사용돼. 리스트 항목들은 숫자나 문자로 표시돼.
예제:
<ol>
<li>리스트의 첫 번째 항목</li>
<li>리스트의 두 번째 항목</li>
<li>리스트의 세 번째 항목</li>
</ol>
1.2 리스트 항목 <li>
<li> 태그는 순서 없는 리스트든 순서 있는 리스트든 각 리스트 항목을 나타내는 데 사용돼.
항상 <ul> 또는 <ol> 안에 있어야 해.
이 태그들을 쉽게 기억할 수 있는 방법:
- Ordered List – 정렬된(순서 있는) 리스트
- Unordered List – 정렬되지 않은(순서 없는) 리스트
- List Item – 리스트 항목
type 속성
이 속성은 <ul> 및 <ol> 내에서 마커 또는 번호 매김 유형을 변경하는 데 사용될 수 있어.
예를 들어, <ol>의 경우 "1", "A", "a", "I", "i" 값을 사용할 수 있고,
<ul>의 경우 "disc", "circle", "square"를 사용할 수 있어.
<ul>에 마커 유형을 변경하는 예:
<ul type="square">
<li>리스트의 첫 번째 항목</li>
<li>리스트의 두 번째 항목</li>
</ul>
<ol>에 번호 매김 유형을 변경하는 예:
<ol type="A">
<li>리스트의 첫 번째 항목</li>
<li>리스트의 두 번째 항목</li>
</ol>
start 속성:
이 속성은 <ol>에서만 사용할 수 있으며 번호 매김의 시작 숫자를 지정하는 데 사용돼.
예를 들면:
<ol start="5">
<li>리스트의 다섯 번째 항목</li>
<li>리스트의 여섯 번째 항목</li>
</ol>
중첩된 리스트
리스트는 중첩될 수 있어서 더 복잡한 구조를 만들 수 있어.
중첩된 리스트의 예:
<ul>
<li>리스트의 첫 번째 항목</li>
<ul type="circle">
<li>중첩된 첫 번째 항목</li>
<li>중첩된 두 번째 항목</li>
</ul>
<li>리스트의 두 번째 항목</li>
<li>리스트의 세 번째 항목</li>
</ul>
list-style-type는 type 속성보다 더 많은 마커 유형을 제공해.
게다가 type 속성은 구식으로 간주돼.
1.3 리스트 스타일링
리스트는 CSS를 사용해서 마커의 색상, 마커 유형, 들여쓰기를 변경하여 스타일링 할 수 있어.
스타일링 예제:
ul.custom-list {
list-style-type: katakana; /* 일본어 카타카나 */
color: blue; /* 텍스트 색상 */
}
ol.custom-list {
list-style-type: hiragana-iroha; /* 일본어 정렬 시스템 */
color: green; /* 텍스트 색상 */
}
<ul class="custom-list">
<li>리스트의 첫 번째 항목</li>
<li>리스트의 두 번째 항목</li>
</ul>
<ol class="custom-list">
<li>리스트의 첫 번째 항목</li>
<li>리스트의 두 번째 항목</li>
</ol>
이렇게 <ul>, <ol>, 그리고 <li>를 사용하면
컨텐츠를 구조화하고 웹 페이지에서 읽기 쉽게 만들 수 있어.
GO TO FULL VERSION