w3스쿨즈 HTML(6) - 리스트[list]

Unordered List

<ul> // 순서기호가 존재하지않음
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

 

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

• disc : 기본속성으로 검은색 꽉찬 동그라미
• circle : 빈속 동그라미
• square : 검은색 네모
• none : 아무것도 표시되지않음

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

 

list image

ul {
  list-style-image: url('sqpurple.gif');
}

 

position list

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

 

Remove Default 셋팅

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

 

short hand

ul {
  list-style: square inside url("sqpurple.gif");
}

 

중첩된 list

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

※ 목록 항목에는 새 목록과 이미지 및 링크 등의 다른 HTML 요소가 포함될 수 있습니다.

 

Ordered List

<ol> // 순서기호가 존재함
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

Ordered List 타입 속성

• type="1" : 숫자 리스트
• type="A" : 대문자 리스트
• type="a" : 소문자 리스트
• type="I" : 대문자 로마숫자
• type="i" : 소문자 로마숫자

 

Description Lists (설명 리스트)

<dl>
  <dt>Coffee</dt> // dt는 용어 이름
  <dd>- black hot drink</dd> dd는 용어 설명
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>