프로그래밍/HTML

9강 - 리스트(list)를 나타내는 태그 (li, ul, ol tag)

월횽 2019. 3. 1. 06:30
반응형

안녕하세요! 진로상담과 진로 강연을 하는 "월횽(박진형)"입니다. 오늘은 HTML에서 리스트를 나타내는 태그에 대해 알아보려고 합니다. 이 태그는 웹 개발 시 자주 사용하는 중요한 요소 중 하나입니다.

리스트를 나타내는 태그란?

 

반응형

리스트를 나타내는 태그는 웹 페이지에서 목록을 표현할 때 사용하는 태그입니다. 예를 들어, 수업의 목차를 작성할 때 다음과 같은 형식으로 표현할 수 있습니다.

1. 기초
2. 초급
3. 중급
4. 고급

이러한 리스트 목록을 만들 때 사용하는 태그가 <li>, <ul>, <ol> 태그입니다. 이 태그들은 서로 다른 특징이 있어 각각의 태그에 대해 알아보겠습니다.

 

<li> 태그

• <li> 태그는 리스트의 각 항목을 나타내는 요소입니다.
• li 태그는 항상 부모 태그인 <ul> 또는 <ol> 안에 포함되어야 합니다.

<ul> 태그

• <ul> 태그는 순서가 없는 리스트를 나타낼 때 사용됩니다.
• 리스트 항목 앞에 점(•)이 자동으로 붙습니다.

예를 들어, 다음과 같이 사용됩니다.

<ul>
   <li>리스트1</li>
   <li>리스트2</li>
   <li>리스트3</li>
</ul>

 

<ol> 태그

• <ol> 태그는 순서가 있는 리스트를 나타낼 때 사용됩니다.
• 리스트 항목 앞에 숫자가 자동으로 붙어 정렬됩니다.

예를 들어, 다음과 같이 사용됩니다.

<ol>
   <li>리스트1</li>
   <li>리스트2</li>
   <li>리스트3</li>
</ol>

 

위 예시와 같이 <ul> 또는 <ol> 부모 태그와 <li> 자식 태그를 조합하여 리스트를 표현할 수 있습니다. 순서 없는 리스트를 만들 때는 <ul> 태그를, 순서가 있는 리스트를 만들 때는 <ol> 태그를 사용하세요.

오늘은 이렇게 간단하게 HTML의 <li>, <ul>, <ol> 리스트 태그에 대해 알아보았습니다. 추가적인 질문이나 궁금점이 있다면 댓글로 남겨주세요. 즐거운 하루 보내세요!

 

 

 

 

 

 

 

 

반응형

'프로그래밍 > HTML' 카테고리의 다른 글

11강 - 링크 태그 (Link Tag)  (0) 2019.03.05
10강 - 주석 태그 (Comment Tag)  (0) 2019.03.04
8강 - 이미지 태그 (img tag)  (0) 2019.02.28
7강 - 줄바꿈 태그 (br tag)  (0) 2019.02.27
6강 - 단락 태그 (p tag)  (0) 2019.02.26