HTML 따라하기 3일 차 | 목록 만들기와 특수 문자 태그

HTML 목록의 종류

- 순서가 없는 목록 <ul>

- 순서가 있는 목록 <ol>

- 정의 목록 <dl>

순서없는 목록<ul>

- unordered list

- <ul></ul> 태그 안에 <li></li>를 여러개 선언하여 사용함

- 사용법 : <ul> <li>목록1</li><li>목록2</li><li>목록3</li> </ul>

목록1
목록2
목록3

순서 있는 목록<ol>

- ordered list

- <ol></ol> 태그 안에 <li></li>를 여러개 선언하여 사용함

- 사용법 : <ol> <li>목록1</li><li>목록2</li><li>목록3</li> </ol>

목록1
목록2
목록3

<ol>의 속성

- <ol start="1"> start 속성으로 처음 시작 값 변경이 가능 하다

- <ol type="i"> type 속성으로 숫자, 문자, 로마자 같은 타입의 글자 변경이 가능하다

정의 목록<dl>

- description list

- <dl></dl> 태그 안에 <dt></dt>나 <dd></dd>를 여러개 선언하여 사용함

- 사용법 : <dl> <dt>정의 제목</dt><dd>정의내용1</dd><dd>정의내용2</dd> </dl>

정의 제목: 정의내용1; 정의내용2

특수 문자 태그

- &로 시작하여 ;으로 끝나는 태그

- 사용법 : &

예시 코드

<html>
 <head>
  <title>html 3Day</title>
 </head>
 <body>

 <h1>목록 만들기</h1>
 <hr>
 
 <h2>목록의 종류 </h2>
 <ul>
  <li>순서 없는 목록 - &lt;ul&gt; </li>
  <li>순서 있는 목록 - &lt;ol&gt;</li>
  <li>정의 목록 - &lt;dl&gt;</li>
 </ul>
<hr> 
<h4>[ ♣ 특수문자 태그들 ] <small>
 - &amp;로 시작하고 ;로 끝남</small></h4>
 <ul>
  <li>결과 = 태그(명령)</li>
  <li>&lt; = &amp;lt; </li>
  <li>&gt; = &amp;gt;</li>
  <li>&nbsp; = &amp;nbsp; (문자 하나의 공백-문자 높이를 가짐) </li>
  <li>&amp; = &amp;amp;</li>
 </ul>
 <p>
  (ex) &lt;b&gt; <br>
      &lt;!-- 주석태그닷 --&gt;
 </p>
 <ul>
  <li>&copy; = &amp;copy;</li>
  <li>&trade; = &amp;trade;</li>
  <li>&reg; = &amp;reg;</li>
 </ul>
 
<hr>
<h3>1. ul - Unordered List (순서 없는 목록)</h3>

<ul>
 <li>coffee</li>
 <li>tea</li>
 <li>milk</li>
 <li>water</li>
</ul>

<hr>
<h3>2. ol - Ordered List (순서 있는 목록)</h3>
 <ol>
  <li>html</li>
  <li>css</li>
  <li>javascript</li>
 </ol>

 <ol>
  <li>red (0~255)</li>
  <li>green (0~255)</li>
  <li>blue (0~255)</li>
 </ol>
 <ol> 
  <li>netw</li>
  <li>web</li>
  <li>db</li>
  <li>java</li>
  <li>jsp</li>
  <li>job</li>
 </ol>

 <h5>ol의 기본 모양 바꾸기 - type속성</h5>
 (1) type="1"
 <ol type="1"> 
  <li>netw</li>
  <li>web</li>
  <li>db</li>
  <li>java</li>
  <li>jsp</li>
  <li>job</li>
 </ol>

 (2) type="a"
 <ol type="a"> 
  <li>netw</li>
  <li>web</li>
  <li>db</li>
  <li>java</li>
  <li>jsp</li>
  <li>job</li>
 </ol>

 (3) type="A"
 <ol type="A"> 
  <li>netw</li>
  <li>web</li>
  <li>db</li>
  <li>java</li>
  <li>jsp</li>
  <li>job</li>
 </ol>

 (4) type="i"
 <ol type="i"> 
  <li>netw</li>
  <li>web</li>
  <li>db</li>
  <li>java</li>
  <li>jsp</li>
  <li>job</li>
 </ol>

 (5) type="I"
 <ol type="I"> 
  <li>netw</li>
  <li>web</li>
  <li>db</li>
  <li>java</li>
  <li>jsp</li>
  <li>job</li>
 </ol>

 <h5>ol의 시작 바꾸기 - start속성(값은 숫자만 가능)</h5>
 <ol start="100"> 
  <li>netw</li>
  <li>web</li>
  <li>db</li>
  <li>java</li>
  <li>jsp</li>
  <li>job</li>
 </ol>

 <ol type="A" start="4"> 
  <li>netw</li>
  <li>web</li>
  <li>db</li>
  <li>java</li>
  <li>jsp</li>
  <li>job</li>
 </ol>

<hr>
 <h4>하위목록 만들기</h4>
 <ul>
  <li>web
   <ol>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
   </ol>
  </li>
  <li>db</li>
  <li>java</li>
 </ul>
  
<ul>
 <li>coffee</li>
 <li>tea
  <ul> 
   <li>hot
    <ol>
     <li>Bk tea</li>
     <li>Gr tea</li>
    </ol>   
   </li>
   <li>cold</li>
  </ul>
 </li>
 <li>milk</li>
 <li>water</li>
</ul> 




<hr>
<h3>3. dl - Description List (정의 목록)</h3>
 
 <dl>
  <dt>&lt;dt&gt;</dt> 
  <dd> - 정의 내릴 대상</dd>
  <dt>&lt;dd&gt;</dt> 
  <dd> - 정의 내용</dd>
 </dl>
 
 <dl>
  <dt>html</dt>
  <dd>Hyper Text Markup Language.</dd>
 </dl>

 <dl>
  <dt>&lt;dl&gt;</dt>
  <dd>Description List</dd>
 </dl>

 <dl>
  <dt>html</dt>
  <dd>Hyper Text Markup Language.</dd>
  <dd>웹페이지를 만드는 언어.</dd>  
 </dl>
 
 <dl>
  <dt>html</dt>
  <dd>웹페이지의 구조를 담당.</dd>
  <dt>css</dt>
  <dd>웹페이지의 디자인을 담당.</dd>
  <dt>javascript</dt>
  <dd>웹페이지의 동적인 기능을 담당.</dd>
 </dl>

 </body>
</html>

예시 코드 | 결과

저작자표시 (새창열림)

'Web > HTML' 카테고리의 다른 글

HTML 따라하기 6일 차 \| 하이퍼 텍스트 링크 만들기 (0)	2022.05.20
HTML 따라하기 5일 차 \| 이미지 만들기 (2)	2022.05.19
HTML 따라하기 4일 차 \| 테이블 만들기 (0)	2022.05.19
HTML 따라하기 2일 차 \| HTML주석과 글자를 변경하는 tag들 (0)	2022.05.19
HTML 따라하기 1일 차 \| html head body (0)	2022.05.19