코딩이야기/HTML

HTML 강좌 7강 - HTML 태그 익히기#6 - LIST 태그

완소줄기 2016. 1. 11. 10:21

HTML 강좌 7강 - HTML 태그 익히기#6 - LIST 태그


이번엔 프레임 태그와 리스트 태그를 연습해보자.


*리스트 태그

리스트 태그는 두 종류의 태그가 있다.

순서가 있는 리스트가 있고, 순서가 없는 리스트가 있다.

(1)순서가 있는 리스트 <ol> </ol>

사용법은 다음과 같다.

<ol>

  <li>순서가</li>

  <li>있는</li>

  <li>리스트</li>

</ol>

(2)순서가 없는 리스트 <ul> </ul>

사용법은 다음과 같다.

<ul>

  <li>순서가</li>

  <li>없는</li>

  <li>리스트</li>

</ul>



 


위와 같이 코딩을 하고 테스트를 해보자.



 


첫번째 리스트는 1,2,3 번호로 순서를 지정하고, 두번째 리스트는 순서가 없음을 볼 수 있다.


그리고 순서가 있는 리스트는 숫자 말고도 다른 방법으로 순서를 지정할 수 있는데, type 속성을 사용하여 지정할 수 있다.

사용법은 다음과 같다.


<ol type="A">

  <li>순서가</li>

  <li>있는</li>

  <li>리스트</li>

</ol>


<ol type="i">

  <li>순서가</li>

  <li>있는</li>

  <li>리스트</li>

</ol>


위와 같이 코딩을 추가해서 테스트를 해보자.



 


이제 새로운 타입의 순서가 있는 리스트가 추가되었다.


예제 파일은 첨부파일에서 받을 수 있습니다 :)


07.zip