HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS 튜토리얼

CSS 홈 CSS 소개 CSS 구문 CSS 선택기 CSS 방법 CSS 주석 CSS 색상
그림 물감 RGB 마녀 HSL
CSS 배경
배경색 배경 이미지 배경 반복 배경 첨부 배경 속기
CSS 테두리
테두리 테두리 너비 테두리 색상 테두리 측면 국경 속기 둥근 테두리
CSS 여백
여백 Margin Collapse
CSS 패딩 CSS 높이/너비 CSS 상자 모델 CSS 개요
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS 텍스트
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS 글꼴
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS 아이콘 CSS 링크 CSS 목록 CSS 테이블
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS 디스플레이 CSS 최대 너비 CSS 위치 CSS Z-색인 CSS 오버플로 CSS 플로트
Float Clear Float Examples
CSS 인라인 블록 CSS 정렬 CSS 결합기 CSS 의사 클래스 CSS 의사 요소 CSS 불투명도 CSS 탐색 모음
Navbar Vertical Navbar Horizontal Navbar
CSS 드롭다운 CSS 이미지 갤러리 CSS 이미지 스프라이트 CSS 속성 선택기 CSS 양식 CSS 카운터 CSS 웹사이트 레이아웃 CSS 단위 CSS 특수성 CSS !중요 CSS 수학 함수

CSS 고급

CSS 둥근 모서리 CSS 테두리 이미지 CSS 배경 CSS 색상 CSS 색상 키워드 CSS 그라디언트
Linear Gradients Radial Gradients Conic Gradients
CSS 그림자
Shadow Effects Box Shadow
CSS 텍스트 효과 CSS 웹 글꼴 CSS 2D 변환 CSS 3D 변환 CSS 전환 CSS 애니메이션 CSS 도구 설명 CSS 스타일 이미지 CSS 이미지 반사 CSS 객체 맞춤 CSS 객체 위치 CSS 마스킹 CSS 버튼 CSS 페이지 매김 CSS 다중 열 CSS 사용자 인터페이스 CSS 변수
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSS 상자 크기 조정 CSS 미디어 쿼리 CSS MQ 예 CSS 플렉스박스
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS 반응형

RWD 소개 RWD 뷰포트 RWD 그리드 보기 RWD 미디어 쿼리 RWD 이미지 RWD 비디오 RWD 프레임워크 RWD 템플릿

CSS 그리드

그리드 소개 그리드 컨테이너 그리드 항목

CSS SASS

SASS 튜토리얼

CSS 예제

CSS 템플릿 CSS 예제 CSS 퀴즈 CSS 연습 CSS 인증서

CSS 참조

CSS 참조 CSS 선택기 CSS 함수 CSS 참조 청각 CSS 웹 안전 글꼴 CSS 애니메이션 가능 CSS 단위 CSS PX-EM 변환기 CSS 색상 CSS 색상 값 CSS 기본값 CSS 브라우저 지원

CSS 목록

❮ 이전의 다음 ❯

정렬되지 않은 목록:

  • 커피
  • 차
  • 콜라
  • 커피
  • 차
  • 콜라

주문 목록:

  1. 커피
  2. 차
  3. 콜라
  1. 커피
  2. 차
  3. 콜라

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속성은 목록 항목 마커(글머리 기호)의 위치를 ​​지정합니다 .

"목록 스타일 위치: 외부;" 글머리 기호가 목록 항목 외부에 있음을 의미합니다. 목록 항목의 각 줄의 시작은 세로로 정렬됩니다. 기본값은 다음과 같습니다.

  • 커피 - 볶은 커피콩으로 만든 양조 음료...
  • 차
  • 콜라

"목록 스타일 위치: 내부;" 글머리 기호가 목록 항목 안에 있음을 의미합니다. 목록 항목의 일부이므로 텍스트의 일부가 되고 시작 부분에서 텍스트를 푸시합니다.

  • 커피 - 볶은 커피콩으로 만든 양조 음료...
  • 차
  • 콜라

예시

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

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

기본 설정 제거

list-style-type:none속성을 사용하여 마커/글머리 기호를 제거할 수도 있습니다 . 목록에는 기본 여백과 패딩도 있습니다. 이것을 제거하려면 <ul> 또는 <ol>에 및를 margin:0추가 하십시오.padding:0

예시

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

목록 - 약식 속성

list-style속성은 약식 속성입니다 . 하나의 선언에서 모든 목록 속성을 설정하는 데 사용됩니다.

예시

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

약식 속성을 사용할 때 속성 값의 순서는 다음과 같습니다.

  • list-style-type (list-style-image가 지정된 경우 어떤 이유로 이미지를 표시할 수 없는 경우 이 속성의 값이 표시됩니다)
  • list-style-position (목록 항목 마커가 콘텐츠 흐름 내부 또는 외부에 나타나야 하는지 여부를 지정합니다)
  • list-style-image (이미지를 목록 항목 마커로 지정)

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

색상이 있는 스타일링 목록

색상으로 목록의 스타일을 지정하여 좀 더 흥미롭게 만들 수도 있습니다.

<ol> 또는 <ul> 태그에 추가된 모든 항목은 전체 목록에 영향을 미치는 반면 <li> 태그에 추가된 속성은 개별 목록 항목에 영향을 미칩니다.

예시

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의 모든 다른 목록-항목 마커를 보여줍니다.

연습으로 자신을 테스트하십시오

연습:

정렬되지 않은 목록의 목록 스타일을 "정사각형"으로 설정합니다.

<style>
ul {
  : ;
}
</style>

<body>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>

모든 CSS 목록 속성

Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies the position of the list-item markers (bullet points)
list-style-type Specifies the type of list-item marker

❮ 이전의 다음 ❯