CSS 목록

불순서 목록:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

순서 목록:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

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;
}

직접 시도해 보세요

주의사항:일부 값은 불순서 목록에 사용되며, 일부 값은 순서 목록에 사용됩니다。

이미지로 목록 항목 표시 기호 사용

list-style-image 속성은 목록 항목 표시 기호로 이미지를 지정합니다:

예제

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

직접 시도해 보세요

목록 항목 표시 기호 정위치

list-style-position 속성은 목록 항목 표시 기호(목록 표시 기호)의 위치를 지정합니다。

"list-style-position: outside;" 의미는 목록 표시 기호가 목록 항목 밖에 위치한다는 것입니다. 목록 항목의 각 행의 시작은 직립적으로 정렬됩니다. 기본 설정입니다:

  • Coffee -烘焙된 커피 씨를 사용하여 제조된 주전자 음료
  • Tea
  • Coca-cola

"list-style-position: inside;" list-style-position: inside;"은 목차 표시기가 목록 항목 내부에 있는 것을 나타냅니다. 목록 항목의 일부로서, 텍스트의 일부가 됩니다. 그리고 텍스트의 시작 부분에서推开됩니다:

  • Coffee -烘焙된 커피 씨를 사용하여 제조된 주전자 음료
  • Tea
  • Coca-cola

예제

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

직접 시도해 보세요

기본 설정 제거

list-style-type:none attribute는 마크업/목차 표시기 또는 목차를 제거하는 데도 사용될 수 있습니다. 목록은 기본 외경과 내경을 가지고 있습니다. 이 내용을 제거하려면 <ul> 또는 <ol>에 추가하세요 margin:0padding:0 :

예제

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

직접 시도해 보세요

목록 - shorthand attribute

list-style attribute는 shorthand attribute입니다. 모든 목록 속성을 한 줄의 선언으로 설정하는 데 사용됩니다:

예제

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

직접 시도해 보세요

shorthand attribute 사용 시, 속성 값의 순서는 다음과 같습니다:

  • list-style-type(list-style-image가 지정되었을 때, 이미지가 어떤 이유로도 표시되지 않으면 이 속성 값이 표시됩니다)
  • list-style-position(목록 항목 표시기가 내용 흐름 내부에 있는지 외부에 있는지 지정)
  • list-style-image(이미지를 목록 항목 표시기로 지정)

위의 속성 값 중 하나가 누락되면, 누락된 속성의 기본 값이 삽입됩니다(있는 경우).

목록의 색상 스타일 설정

우리는 또한 색상 설정을 사용하여 목록 스타일을 더 재미있게 만들 수 있습니다.

any style added to <ol> or <ul> tags will affect the entire list, while properties added to <li> tags will affect individual list items:

예제

ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}

결과:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

직접 시도해 보세요

더 많은 예제

빨간 왼쪽 경계를 가진 커스텀 목록
이 예제에서는 빨간 왼쪽 경계를 가진 목록을 어떻게 만드는지 보여줍니다.
전면 넓이의 경계 목록
이 예제는 항목 표시 없이 경계선이 있는 목록을 생성하는 방법을 보여줍니다.
모든 다른 목록 항목 태그
이 예제는 CSS에서 모든 다른 목록 항목 태그를 보여줍니다.

모든 CSS 목록 속성

속성 설명
list-style 간단한 속성. 목록의 모든 속성을 하나의 선언에서 설정합니다.
list-style-image 이미지를 목록 항목 태그로 지정합니다.
list-style-position 목록 항목 태그(목록 표시)의 위치를 정의합니다.
list-style-type 목록 항목 태그 유형을 정의합니다.