테스트 사이트 - 개발 중인 베타 버전입니다
SIR

HTML 목록 및 CSS 목록 속성

컴프
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 8년 전 · 2446

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>



목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
3133
CSS 수직 탐색 막대 예제
3132
CSS Vertical Navigation Bar 1
3131
CSS Navigation Bars
3130
CSS [CSS] Float : left, right, inherit, none.
3129
CSS CSS 투명한 호버 효과 2
3128
CSS CSS 투명한 호버 효과
3127
CSS CSS 불투명도 / 투명성
3121
HTML 레이아웃용 테이블에<th>나scope이 사용될 경우에는 오류임.
3120
HTML IE9 이전 버전에서 Canvas 사용가능하도록 하는 js 라이브러리 2
3112
CSS CSS 결합 자 - 인접한 형제 선택기
3111
CSS CSS 결합 자 - 하위 선택자
3110
CSS CSS 결합 자 - 하위 선택기
3109
CSS CSS 레이아웃 - 이미지 센터하기
3108
CSS CSS 레이아웃 - 가운데 맞춤 텍스트
3107
CSS CSS 레이아웃 - 가운데 정렬 요소
3105
CSS float : The clearfix Hack(clearfix 해킹)
3104
CSS float : ​The clear Property(clear 속성)
3103
CSS CSS 레이아웃 - 플로팅 및 삭제
3101
CSS CSS Overflow auto
3100
CSS CSS Overflow Hidden
3099
CSS CSS Overflow Visible
3098
CSS css position Overlapping Elements(겹치는 요소들)
3097
CSS css position: absolute;
3096
CSS css position: fixed;
3094
CSS CSS 레이아웃 - position: relative; 속성 1
3093
CSS CSS 레이아웃 - position static 속성
3092
CSS 너비, 최대 너비 및 여백 사용 : auto; 사용
3090
CSS display:block
3089
CSS Display: none;
3088
CSS display 속성
이전 다음
전체 목록