[HTML]목록 관련 태그

순서가 필요없는 목록

• <ul></ul>
• 순서가 필요하지 않은 목록을 만들 때 사용
• 리스트 앞에 특정 모양이 출력된다. (circle, disc, square)
• 해당 모양은 CSS를 이용하여 수정할 수 있다.

 

<코드>

<ul>
     <li>html</li>
     <li>css</li>
     <li>javascript</li>
     <li>react</li>
</ul>

 

<결과>

 

순서가 필요한 목록 태그

• <ol></ol>
• 순서가 필요한 목록을 만들 때 사용
• 속성으로 알파벳, 숫자, 로마숫자 설정 가능
• CSS로 순서 설정이 가능하다
  • type : 순서 형식(a, A, 1, i, I)
  • start : 시작할 번호 또는 문자

 

<예시>

<ol type=”설명문자 start=”시작순서”>
    <li>내용1</li>
    <li>내용2</li>
    <li>내용3</li>
</ol>

 

<코드>

<h3>기본형식</h3>
<ol>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
    <li>react</li>
</ol>

<h3>영문 소문자로 표기</h3>
<ol type="a">
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
    <li>react</li>    
</ol>

<h3>영문 대문자로 표기</h3>
<ol type="A">
     <li>html</li>
     <li>css</li>
     <li>javascript</li>
     <li>react</li>    
</ol>

<h3>로마 소문자로 표기</h3>
<ol type="i">
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
      <li>react</li>   
 </ol>

<h3>로마 대문자로 표기</h3>
<ol type="I">
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
      <li>react</li>   
</ol>

<h3>시작 값 변경하기</h3>
<ol type="1" start="5">
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
      <li>react</li>   
</ol>

<h3>역순으로 항목 표기하기</h3>
<ol reversed="reversed">
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
      <li>react</li>   
</ol>

 

<결과>

 

설명 목록 태그

• <dl></dl>
• 용어나 문장에 대한 정의(definition)리스트
• 자동으로 들여쓰기가 된다.

 

<코드>

<dl>
    <dt>이곳은 목록의 제목을 적는 곳입니다.</dt>
    <dd>이곳은 목록에 대한 설명을 적는 곳입니다.</dd>
    <dd>또 다른 줄을 작성할 수도 있습니다.</dd>
    <dt>다른 제목을 적어 새로운 목록을 만들 수 있습니다.</dt>
</dl>

• <dt></dt> : 목록의 제목
• <dd></dd> : 목록에 대한 설명, 자동으로 들여쓰기가 된다.

 

<결과>