html에서 <ul>, <ol>태그로 목록만드는 방법

오늘은 HTML에서 정렬되지 않은 목록과 정렬된 목록을 만드는 방법을 알아보겠습니다. 

사용하는 태그는 

1. 정렬되지 않은 목록 <ul>

2. 정렬된 목록<ol>

 

1. 정렬되지 않은 목록은  <ul>태그를 사용하여 만듭니다. <ul>태그 안에 <li>태그를 사용하여 개별 목록 항목을 추가할 수 있습니다. 

 

예시입니다. 

 

 

이 값을 HTML에 삽입하면 출력값은 이렇게 나옵니다. 

---

 

 

Unordered List Example

• Item 1
• Item 2
• Item 3

 

---

 

2. 이번엔 정렬된 목록 <ol> 태그를 사용한 예를 살펴보겠습니다. 정렬된 목록 <ol>도 태그 내에서 <li>태그를 사용하여 개별 목록을 추가할 수 있습니다. 

 

예시의 출력 값은 다음과 같습니다. 

 

---

 

 

Ordered List Example

1. First item
2. Second item
3. Third item

 

---

위에 정렬되지 않은 목록과의 차이점이 느껴지시나요? 숫자를 앞에 붙여주지 않았지만, 숫자가 매겨져 있는 것을 볼 수 있습니다. 

이렇듯 정렬된 목록은 1부터 순차적으로 번호가 매겨지게 됩니다. 원하는 경우에는 CSS를 사용해서 번호 매기기 스타일을 사용자 지정으로 할 수도 있습니다. 

 

 

이렇게 간단히 목록을 만들어 보았습니다. 

그럼 오늘도 실습으로 여태까지 만들었던 HTML문서들을 저는 ordered list <ol>로 번호를 매겨서 링크를 걸어보겠습니다. 

약간은 오늘 배운 기능과 하이퍼링크 기능을 함께 써보도록 하겠습니다. 

 

 

Ordered List Example

1. html의 기본구조
2. HTML 하이퍼링크 설정
3. html 하이퍼링크 새탭, 새창으로 열기 방법
4. HTML 텍스트 서식 글자 꾸미기
5. html 이미지 삽입 방법
6. html 이미지 사이즈 조정 크기조정 하는 방법