[HTML] <ul>, <ol> 목록형 태그

 

• Java
• Python
• JavaScript

목록형을 요소를 가장 간단하게 말한다면 위와 같은 예시를 말할 수 있다.

목록 tag는 하나 이상의 하위 tag를 포함해야하고, 목록을 번호 또는 심볼을 이용해서 표현한다.

 

tag	설명
<ul>	unordered list, 번호 없는 목록을 표시하며 심볼로 구분한다.
<ol>	ordered list, 번호 있는 목록을 표시하며 숫자, 알파벳, 로마숫자로 구분한다.
<li>	목록 tag의 하위 tag
<dl>	용어 정의와 설명에 대한 내용을 목록화해서 표시한다.
<dt>	용어 목록의 정의 부분을 표시한다.
<dd>	용어 목록의 설명 부분을 표시한다.

 

 

1. <ul> 사용

<ul>
    <li>Java</li>
    <li>Python</li>
    <li>JavaScript</li>
    <li>C++</li>
    <li>Swift</li>
</ul>

위의 코드를 실행하면 다음와 같은 결과를 얻을 수 있다.

만약에 심볼을 바꾸고 싶다면 css를 적용해야 한다.

 

<!--빈칸 부분에 원하는 속성값을 넣는다.-->
<ul style="list-style-type: _____ ;">
    <li>Java</li>
    <li>Python</li>
    <li>JavaScript</li>
    <li>C++</li>
    <li>Swift</li>
</ul>

<ul>
    <li>Java</li>
    <li style="list-style-type: circle;">Python</li>
    <li style="list-style-type: none;">JavaScript</li>
    <li style="list-style-type: disc">C++</li>	<!--default값-->
    <li style="list-style-type: square;">Swift</li>
</ul>

첫 번째 처럼 ul 태그에 인라인으로 넣을 수도 있지만

두 번째 처럼 목록 각각 마다 심볼을 바꿀 수 도 있다.

각각의 li 태그에 심볼을 바꿀 수 있다.

 

2. <ol> 사용

<ol>
    <li>Java</li>
    <li>Python</li>
    <li>JavaScript</li>
    <li>C++</li>
    <li>Swift</li>
</ol>

아무런 css가 적용되지 않으면 기본값으로 숫자 1부터 오름차순으로 목록을 표시한다.

 

 

<ol> 태그에만 존재하는 속성이 있다.

속성	속성값	설명
type	1	(기본값) 숫자로 목록을 표시
	a	영문 소문자로 목록을 표시
	A	영문 대문자로 목록을 표시
	i	로마숫자 소문자로 목록을 표시
	I	로마숫자 대문자로 목록을 표시
start	시작값	시작 번호를 설정한다.
reversed	역순으로 목록을 표시

 

<ol type="A" reversed>
    <li>Java</li>
    <li>Python</li>
    <li>JavaScript</li>
    <li>C++</li>
    <li>Swift</li>
</ol>

<!--영문의 시작값을 설정하고 싶다면 알파벳 순서를 속성값으로 주면 된다.-->
<ol type="A" start="3">
    <li>Java</li>
    <li>Python</li>
    <li>JavaScript</li>
    <li>C++</li>
    <li>Swift</li>
</ol>