HTML 목록 및 CSS 목록 속성

HTML 목록 및 CSS 목록 속성

 

HTML에는 다음과 같은 두 가지 주요 유형이 있습니다.

 

순서가없는 목록 (<ul>) - 목록 항목은 글 머리 기호로 표시됩니다.

정렬 된 목록 (<ol>) - 목록 항목은 숫자 또는 문자로 표시됩니다

CSS 목록 속성을 사용하면 다음을 수행 할 수 있습니다.

 

정렬 된 목록에 대해 다른 목록 항목 마커 설정

정렬되지 않은 목록에 대해 다른 목록 항목 마커 설정

이미지를 목록 항목 마커로 설정합니다.

목록 및 배경 항목에 배경색 추가

다른 목록 항목 마커

이 list-style-type속성은 목록 항목 표식의 유형을 지정합니다.

 

다음 예제에서는 사용 가능한 목록 항목 마커 중 일부를 보여줍니다.

 

ul.a {

    list-style-type: circle;

}

 

ul.b {

    list-style-type: square;

}

 

ol.c {

    list-style-type: upper-roman;

}

 

ol.d {

    list-style-type: lower-alpha;

}

 

 

 

<!DOCTYPE html>

<html>

<head>

<style>

ul.a {

    list-style-type: circle;

}

 

ul.b {

    list-style-type: square;

}

 

ol.c {

    list-style-type: upper-roman;

}

 

ol.d {

    list-style-type: lower-alpha;

}

</style>

</head>

<body>

 

<p>Example of unordered lists:</p>

<ul class="a">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Coca Cola</li>

</ul>

 

<ul class="b">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Coca Cola</li>

</ul>

 

<p>Example of ordered lists:</p>

<ol class="c">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Coca Cola</li>

</ol>

 

<ol class="d">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Coca Cola</li>

</ol>

 

</body>

</html>

d3bc18f8bef993aa478b35f093a30d3a_1488035712_3882.png

|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 8년 전 조회 2,273
CSS 8년 전 조회 1,693
CSS 8년 전 조회 2,354
CSS 8년 전 조회 1,901
CSS 8년 전 조회 2,338
CSS 8년 전 조회 2,361
CSS 8년 전 조회 2,379
CSS 8년 전 조회 2,185
CSS 8년 전 조회 1,925
CSS 8년 전 조회 2,389
CSS 8년 전 조회 1,741
CSS 8년 전 조회 1,825
CSS 8년 전 조회 1,916
CSS 8년 전 조회 2,554
CSS 8년 전 조회 2,621
CSS 8년 전 조회 1,987
CSS 8년 전 조회 2,470
CSS 8년 전 조회 1,991
CSS 8년 전 조회 2,056
CSS 8년 전 조회 1,942
CSS 8년 전 조회 1,680
CSS 8년 전 조회 1,724
CSS 9년 전 조회 3,250
CSS 9년 전 조회 2,246
CSS 9년 전 조회 1,863
CSS 9년 전 조회 2,304
CSS 9년 전 조회 2,342
CSS 9년 전 조회 2,561
CSS 9년 전 조회 1,793
CSS 9년 전 조회 2,684