AND_END

12. HTML 목록 본문

HTML

12. HTML 목록

하둉이 2019. 1. 3. 02:38
반응형

* HTML 목록 (List) *



* 순서가 정해져 있지 않은 목록

: <ul> 태그로 시작하고, 각 목록의 항목은 <li> 태그를 사용합니다.

  목록 항목은 기본적으로 글 머리 기호 (작은 검은 색 원)로 표시됩니다.



EX)


<!DOCTYPE html>

<html>

<body>


<p>순서가 정해져 있지 않은 목록</p>


<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


</body>

</html>

  실행 결과 



- 목록 항목 마커 


: disc - Sets the lists item marker to a bullet.

 circle - Sets the llists item marker to a circle.

 square - Sets the lists item marker to a square.

 none - The list items will not be marked.


1. disk


<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

  실행 결과 



2. circle


<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

  실행 결과



3. square


<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

  실핼 결과



4. None


<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


  실행 결과





* 순서가 지정된 HTML 목록

: 순서가 지전된 목록은 <ol> 태그로 시작하고, 각 목록의 항목은 <li> 태그로 시작합니다.

  목록 항목에는 기본적으로 숫자가 표시됩니다.



EX)


<!DOCTYPE html>

<html>

<body>


<p>순서가 정해져 있는 목록</p>


<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>


</body>

</html>

 실행 결과



- 순서가 지정된 HTML 목록의 유형 속성


TypeDescription
type="1"The list items will be numbered with numbers (default)
type="A"The list items will be numbered with uppercase letters
type="a"The list items will be numbered with lowercase letters
type="I"The list items will be numbered with uppercase roman numbers
type="i"The list items will be numbered with lowercase roman numbers


1. 번호 


<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

  실행 결과



2. 대문자


<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

  실행 결과



3. 소문자


<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

  실행 결과




4. 대문자 로마 숫자


<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

  실행 결과



5. 소문자 로마 숫자


<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

  실행 결과




* HTML 설명 목록 

: <dl> 태그는 상기 설명 목록을 정의.

  <dt> 태그는 용어(이름)을 정의.

  <dd> 태그는 각각의 용어 설명.



<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

  실행 결과

















반응형
저작자표시

'HTML' 카테고리의 다른 글

14. HTML 클래스 (class)  (0) 2019.01.07
13. HTML 블로 및 인라인 요소 ( <div> <span> )  (0) 2019.01.05
11. HTML 테이블  (0) 2018.12.22
10. HTML 이미지  (0) 2018.12.09
9. HTML 링크  (0) 2018.12.03
'HTML' Related Articles more