loading

정렬되지 않은 리스트 <ul></ul>

목록 항목의 순서가 중요하지 않은 정렬되지 않은 목록은 일반 텍스트와 구별하기 위해 각 항목 앞에

글머리 기호를 배치한다.

 

<ul></ul> 태그를 이용하여 목록 항목에 대한 컨테이너를 첫 번째로 만들고,

각 목록 항목은 <li></li> 태그를 사용하여 만든다.

 

이 정렬되지 않은 리스트의 글머리 기호는 3가지를 사용 할 수 있다.

 

종류 설명 속성(사용법)
Disc 채워진 원형 글머리 기호(기본 스타일) <ul style="list-style-type:disc"></ul>
Circle 채워지지 않은 원형 글머리 기호 <ul style="list-style-type:circle"></ul>
Square 채워진 사각형 글머리 기호 <ul style="list-style-type:square"></ul>

 

이렇게 3가지 말고 이 외에 이미지를 직접 사용해서 사용한 이미지를 나타내게 할 수도 있다.

이미지 적용하는 법까지 총 4가지 예를 보자.

 

예)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <ul style="list-style-type:disc">
    <li>DISC 테스트</li>
    <li>DISC 테스트</li>
  </ul>
  <hr>
  <ul style="list-style-type:circle">
    <li>circle 테스트</li>
    <li>circle 테스트</li>
  </ul>
  <hr>
  <ul style="list-style-type:square">
    <li>square 테스트</li>
    <li>square 테스트</li>
  </ul>
  <hr>
  <ul style="list-style-image:url(https://tistory2.daumcdn.net/tistory/5242077/skin/images/sampleSymbol.png)">
    <li>이미지 테스트</li>
    <li>이미지 테스트</li>
  </ul>  
</body>
</html>

 

결과 화면

 

정의되지 않은 리스트 결과화면

 

이 결과 화면을 보면 각각의 속성에 맞게 적용하여 글머리 기호의 종류를 확인해봤다.

마지막에는 이미지를 사용하여 글머리 기호를 이미지로 적용해봤다.

 

 

 

반응형


 

정렬된 리스트 <ol></ol>

목록 항목의 순서가 필요한 것들은 번호를 지정해서 순서대로 리스트를 표현한다.

<ol> 태그가 목록 항목에 대한 컨테이너를 제공하는 태그이고,

목록 태그들은 <li></li> 태그를 사용하여 표현한다.

 

이 순서, 번호를 지정하는 종류는 6가지가 있다.

종류 설명 속성(사용법)
Decirnal 숫자(기본 스타일) <ol style="list-style-type:decirnal"></ol>
Roman 로마 표기 숫자 <ol style="list-style-type:lower-roman"></ol>
<ol style="list-style-type:upper-roman"></ol>
Latin 알파벳 <ol style="list-style-type:lower-latin"></ol>
<ol style="list-style-type:upper-latin"></ol>
<ol style="list-style-type:lower-alpha"></ol>
<ol style="list-style-type:upper-alpha"></ol>

Greek 고전 알파벳 <ol style="list-style-type:lower-greek"></ol>
Georgian 그루지야어 숫자 <ol style="list-style-type:georgian"></ol>
Armenian 아르메니아 숫자 <ol style="list-style-type:armenian"></ol>

 

사용 예를 확인해보자.

 

예)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <ol style="list-style-type:decirnal">
    <li>Decirnal 테스트</li>
    <li>Decirnal 테스트</li>
  </ol>
  <hr>
  <ol style="list-style-type:lower-roman">
    <li>lower-roman 테스트</li>
    <li>lower-roman 테스트</li>
  </ol>
  <ol style="list-style-type:upper-roman">
    <li>upper-roman 테스트</li>
    <li>upper-roman 테스트</li>
  </ol>
  <hr>
  <ol style="list-style-type:lower-latin">
    <li>lower-latin 테스트</li>
    <li>lower-latin 테스트</li>
  </ol>
  <ol style="list-style-type:upper-latin">
    <li>upper-latin 테스트</li>
    <li>upper-latin 테스트</li>
  </ol>
  <ol style="list-style-type:lower-alpha">
    <li>lower-alpha 테스트</li>
    <li>lower-alpha 테스트</li>
  </ol>
  <ol style="list-style-type:upper-alpha">
    <li>upper-alpha 테스트</li>
    <li>upper-alpha 테스트</li>
  </ol>
  <hr>
  <ol style="list-style-type:lower-greek">
    <li>lower-greek 테스트</li>
    <li>lower-greek 테스트</li>
  </ol>
  <hr>
  <ol style="list-style-type:georgian">
    <li>georgian 테스트</li>
    <li>georgian 테스트</li>
  </ol>
  <hr>
  <ol style="list-style-type:armenian">
    <li>armenian 테스트</li>
    <li>armenian 테스트</li>
  </ol>  
</body>
</html>

 

결과화면

정렬된 리스트 결과화면

 

결과 화면에 나온 것처럼 순서를 정하려는 목록 리스트를 만드려고 하면 위와 같은 속성을 넣어서

본인이 하고자 하는 리스트를 만들면 된다.

반응형

+ Recent posts