기본 태그 2번째 시간이예요.
오늘은 목록을 표현하는 요소인 ul, ol을 해보려고 합니다.
<ul>은 비 순차적 목록으로 unordered list라고 하며 <ol>은 순차적 목록으로 ordered list 의 약자로 사용이 됩니다.
<ul>과 <ol>은 <body> </body> 사이에 씁니다.
아래와 같이 쓰는데 <ul></ul> 사이에 <li></li>가 있네요? <li>요소는 list item으로 반드시 <ul>과 <ol> 사이에 써야 합니다.
<body>
<h1>Main menu</h1>
<ul>
<li>H</a></li>
<li>T</a></li>
<li>M</a></li>
<li>L</a></li>
<li>5</a></li>
</ul>
</body>
위 코드의 결과는 아래와 같습니다.
소스 파일 : html5_2_1.html
그렇다면 <li>는 한번만 사용해야 하나요? 답은 아닙니다. 또 한번 사용할 수 있어요.
하지만 <li> </li> 사이에 또 <li> </li> 를 사용 할 수 없어요.
그러면 어떻게 해야 하냐구요? 아래와 같이 <ul> 혹은 <ol> 사이에 넣어야 해요.
<body>
<h1>Main menu</h1>
<ul>
<li>H</a></li>
<ul>
<li>T</li>
<li>E</li>
<li>S</li>
<li>T</li>
</ul>
<li>T</a></li>
<li>M</a></li>
<li>L</a></li>
<li>5</a></li>
</ul>
</body>
결과는 아래와 같답니다. ● 다음에 ○ 순서로 나옵니다.
소스 파일 : 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> 같은 경우에는 지원되는 브라우저가 있고 안되는 브라우저가 있어요.
혹시라도 안된다고 생각이 되시면 브라우저 지원 때문에 그러니까 알아보셔야 해요~
'프로그래밍 > HTML5' 카테고리의 다른 글
테이블 요소 (0) | 2015.08.02 |
---|---|
HTML5 기본 태그(3) (0) | 2015.07.27 |
HTML5 기본 태그(1) (0) | 2015.07.15 |
HTML5 기본구조 (0) | 2015.07.13 |
HTML5에 대하여... (0) | 2015.07.12 |