STUDY/HTML5 & CSS

비순서 리스트

Hongfluenza 2018. 10. 11. 21:01

비순서 리스트 <ul> <li> ~ </li></ul>



비순서 리스트는 순서가 명확하지 않는 목록을 나타낼 때 사용한다.


● → ○ → ■ 순서로 블렛을 브라우저에 나타낼 수 있다.


<ul> 태그에 type 속성이 선언되면 전체 범위에 적용되고, <li> 태그에 선언되면 새로운 값으로 지정되며, 이후 다른 값으로 선언되기 전까지 유효하다.


※실습


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
  <head>
    <title>비순서 리스트의 예</title>
  </head>
  <body>
    <center><h1>ul과 li 예제</h1></center>
    <hr />
      <ul>
        <li>비순서 리스트
          <ul>
            <li>내포되어 있다
              <ul>
                <li>블렛은 내포되었을 때 바뀐다</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
      <p>블렛은 <b>type</b>속성에 의해 제어된다.
      <b>type</b>은 전체 또는 항목마다 새롭게 지정된다.</p>
    <ul type="squre">
      <li>ul에 의해 첫번째 항복이 지정된다.</li>
      <li type="disc">disc 항목</li>
      <li type="circle">circle 항목</li>
      <li type="square">square 항목</li>
    </ul>
  </body>
</html>
 



출처 HTML5&CSS3&JQuery

저작자표시