'UL' 태그의 글 목록

UL

2015. 7. 24. 12:30

기본 태그 2번째 시간이예요.

오늘은 목록을 표현하는 요소인 ul, ol을 해보려고 합니다.

<ul>은 비 순차적 목록으로 unordered list라고 하며 <ol>은 순차적 목록으로 ordered list 의 약자로 사용이 됩니다.

<ul>과 <ol>은 <body> </body> 사이에 씁니다.

아래와 같이 쓰는데 <ul></ul> 사이에 <li></li>가 있네요? <li>요소는 list item으로 반드시 <ul>과 <ol> 사이에 써야 합니다.

위 코드의 결과는 아래와 같습니다.

소스 파일 : html5_2_1.html

그렇다면 <li>는 한번만 사용해야 하나요? 답은 아닙니다. 또 한번 사용할 수 있어요.

하지만 <li> </li> 사이에 또 <li> </li> 를 사용 할 수 없어요.

그러면 어떻게 해야 하냐구요? 아래와 같이 <ul> 혹은 <ol> 사이에 넣어야 해요.

결과는 아래와 같답니다. ● 다음에 ○ 순서로 나옵니다.

소스 파일 : html5_2_2.html

그러면 <ol> 을 볼까요?

사용 방법은 <ol>도 <ul>과 같아요.

<body>
<h1>Order List</h1>

<ol>
  <li>H</a></li>
  <li>T</a></li>
  <li>M</a></li>
  <li>L</a></li>
  <li>5</a></li>
</ol>
</body>

결과를 볼까요? <ul>의 ●과 다르게 숫자가 있죠?

<ol>은 <ul>과 다르게 번호 대신 알파벳이나 로마자로 표시 할 수 있습니다.

하지만 <ol> 사이에 type=" " 를 써줘야 해요. a , A , i 등이 있어요.

아래 예제는 대문자 A를 써봤어요.

<body>
<h1>Order List</h1>

<ol type="A">
  <li>H</a></li>
  <li>T</a></li>
  <li>M</a></li>
  <li>L</a></li>
  <li>5</a></li>
</ol>
</body>

결과를 보시면 대문자 알파벳 순으로 되어 있죠?

소스파일 : html5_2_4.html

꼭 순서대로 밖에 못 하는 건가요? 그것도 아닙니다.

start 라는 것을 쓰면 반대로 출력이 되요. 저는 숫자 8부터 시작을 해볼께요.

<body>
<h1>Order List</h1>

<ol start="8">
  <li>H</a></li>
  <li>T</a></li>
  <li>M</a></li>
  <li>L</a></li>
  <li>5</a></li>
</ol>
</body>

결과는 8부터 출력되네요.

소스 파일 : html5_2_5.html

<ol> 같은 경우에는 지원되는 브라우저가 있고 안되는 브라우저가 있어요.

혹시라도 안된다고 생각이 되시면 브라우저 지원 때문에 그러니까 알아보셔야 해요~

PREV 1 NEXT