CSS-목록

목록은 번호 또는 글 머리 기호 집합을 전달하는 데 매우 유용합니다. 이 장에서는 CSS를 사용하여 목록 유형, 위치, 스타일 등을 제어하는 방법을 설명합니다.

목록을 제어하는 데 사용할 수있는 다음 5 개의 CSS 속성이 있습니다.

그만큼 list-style-type 마커의 모양이나 모양을 제어 할 수 있습니다.
그만큼 list-style-position 두 번째 줄로 둘러싸 이는 긴 점이 첫 번째 줄과 정렬되어야하는지 또는 마커 시작 아래에서 시작해야하는지 여부를 지정합니다.
그만큼 list-style-image 글 머리 기호 또는 번호가 아닌 마커의 이미지를 지정합니다.
그만큼 list-style 앞의 속성에 대한 속기 역할을합니다.
그만큼 marker-offset 마커와 목록의 텍스트 사이의 거리를 지정합니다.

이제 예제와 함께 이러한 속성을 사용하는 방법을 살펴 보겠습니다.

목록 스타일 유형 속성

목록 스타일 타입의 속성을 사용하면 모양 또는 정렬되지 않은리스트의 경우 (또한 마커라고도 함) 글 머리 스타일 및 정렬 목록에 문자 번호의 스타일을 제어 할 수 있습니다.

정렬되지 않은 목록에 사용할 수있는 값은 다음과 같습니다.

Sr. 아니.	가치 및 설명
1	none NA
2	disc (default) 채워진 원
삼	circle 빈 원
4	square 채워진 사각형

다음은 정렬 된 목록에 사용할 수있는 값입니다.

값	기술	예
소수	번호	1,2,3,4,5
소수점 앞의 0	숫자 앞 0	01, 02, 03, 04, 05
낮은 알파	소문자 영숫자	에이 비 씨 디이
대문자	대문자 영숫자	에이 비 씨 디이
하급 로마자	소문자 로마 숫자	나는, ii, iii, iv, v
상류층	대문자 로마 숫자	I, II, III, IV, V
낮은 그리스인	마커는 그리스어	알파, 베타, 감마
라틴어	마커는 낮은 라틴어입니다.	에이 비 씨 디이
라틴어	마커는 상위 라틴어입니다.	에이 비 씨 디이
헤브라이 사람	마커는 전통적인 히브리어 번호입니다.
아르메니아 사람	마커는 전통적인 아르메니아 번호입니다.
조르지아 주 사람	마커는 전통적인 그루지야 어 번호입니다.
cjk 표의	마커는 일반 표의 문자입니다.
히라가나	마커는 히라가나	a, i, u, e, o, ka, ki
가타카나	마커는 가타카나입니다.	A, I, U, E, O, KA, KI
Hiragana-iroha	마커는 히라가나 이로 하	나는, ro, ha, ni, ho, he, to
가타카나 이로 하	마커는 가타카나 이로 하	나는, RO, HA, NI, HO, HE, TO

여기에 예가 있습니다-

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

다음 결과가 생성됩니다-

목록 스타일 위치 속성

목록 - 스타일 위치 속성은 마커가 글 머리 기호가 들어있는 상자의 내부 또는 외부 표시할지 여부를 나타냅니다. 두 값 중 하나를 가질 수 있습니다.

Sr. 아니.	가치 및 설명
1	none NA
2	inside 텍스트가 두 번째 줄로 이동하면 텍스트가 마커 아래에서 줄 바꿈됩니다. 또한 목록에 outside 값이있는 경우 텍스트가 시작된 위치까지 들여 쓰기로 표시됩니다.
삼	outside 텍스트가 두 번째 줄로 이동하면 텍스트가 첫 번째 줄의 시작 부분 (글 머리 기호 오른쪽)에 정렬됩니다.

여기에 예가 있습니다-

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

다음 결과가 생성됩니다-

목록 스타일 이미지 속성

목록 스타일의 이미지는 자신의 글 머리 기호 스타일을 사용할 수 있도록 이미지를 지정할 수 있습니다. 구문은 속성 값을 시작하는 url 문자와 괄호로 묶인 URL이 오는 background-image 속성과 유사합니다. 주어진 이미지를 찾지 못하면 기본 글 머리 기호가 사용됩니다.

여기에 예가 있습니다-

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

다음 결과가 생성됩니다-

목록 스타일 속성

목록 스타일은 단일 식으로 모든 목록 속성을 지정할 수 있습니다. 이러한 속성은 임의의 순서로 나타날 수 있습니다.

여기에 예가 있습니다-

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

다음 결과가 생성됩니다-

마커 오프셋 속성

마커 오프셋 속성은 마커와 그 마커에 관한 텍스트 사이의 거리를 지정할 수 있습니다. 값은 다음 예제와 같이 길이 여야합니다.

안타깝게도이 속성은 IE 6 또는 Netscape 7에서 지원되지 않습니다.

여기에 예가 있습니다-

<html>
   <head>
   </head>

   <body>
      <ul style = "list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

다음 결과가 생성됩니다-