Publishing/HTML

HTML 목록

oodada 2020. 2. 10. 13:56

 

정렬되지 않은 HTML 목록

정렬되지 않은 목록은 태그로 시작합니다 . 각 목록 항목은 태그로 시작합니다 . <ul><li>

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

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

 

정렬되지 않은 HTML 목록-목록 항목 마커 선택

CSS list-style-type속성은 목록 항목 마커의 스타일을 정의하는 데 사용됩니다.

disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

 

정렬 된 HTML 목록

정렬 된 목록은 태그로 시작합니다 . 각 목록 항목은 태그로 시작합니다 . <ol> <li>

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

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

 

정렬 된 HTML 목록-유형 속성

태그  type속성은 목록 항목 마커의 유형을 정의합니다. <ol>

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
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

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

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

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

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

 

HTML 설명 목록

HTML은 설명 목록도 지원합니다.

설명 목록은 각 용어에 대한 설명이 포함 된 용어 목록입니다.

<dl>태그는 상기 설명 목록을 정의 태그 용어 (이름)를 정의하고, 태그는 각각의 용어 설명 : <dt> <dd>

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

 

중첩 된 HTML 목록

리스트는 중첩 될 수 있습니다 (리스트 내부의리스트) :

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

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

HTML 폼  (0) 2020.02.11
HTML 테이블  (0) 2020.02.10
HTML 이미지  (0) 2020.02.10
HTML 링크  (0) 2020.02.07
HTML 텍스트 관련 요소  (0) 2020.02.07
티스토리 친구하기