본문으로 건너뛰기
실습하기

ul, ol, li 태그

<ul>, <ol>, <li> 태그는 웹 페이지에서 목록(List)을 만들 때 사용합니다.

ul 태그는 순서가 없는 목록을, ol 태그는 순서가 있는 목록을 의미하며, li 태그는 목록 내 항목을 의미합니다.

li 태그는 ul 태그나 ol 태그의 자식 요소로만 사용됩니다.


<ul> 태그

<ul>은 "Unordered List"의 줄임말로, 순서에 특별한 의미가 없는 목록을 나타낼 때 사용합니다. 냉장고에 무작위로 넣은 과일들처럼 순서가 중요하지 않은 목록을 정의합니다.

순서가 없는 목록
<ul>
<li>사과</li>
<li>바나나</li>
<li>체리</li>
</ul>

<ol> 태그

<ol>은 "Ordered List"의 줄임말로, 할 일 목록과 같이 목록의 순서에 의미가 있는 경우에 사용합니다.

순서가 있는 목록
<ol>
<li>기상: 7시</li>
<li>등교: 8시</li>
<li>취침: 10시</li>
</ol>

<li> 태그

<li>는 "List Item"의 줄임말로, <ul><ol> 요소 안의 개별 항목을 정의합니다.

목록의 항목
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>

코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!