목록관련 태그

순서가 있는 목록

목록을 표현할 때 사용되는 태그로 순서가 있는 목록과 순서가 없는 목록을 표현할 수 있다. 순서가 있는 목록은 <ol></ol>로 표현하며 각 항목의 목록은 <li></li>로 표현한다. 새 HTML문서를 생성한 후 다음과 같이 작성한다.

 

 

실행하면 순서가 있는 목록은 1. 2. 3….으로 목록 앞에 번호가 붙어서 응답되는 것을 확인할 수 있다.

 

 

순서가 있는 목록에서 순서를 1,2,3…이 아닌 다른 유형의 순서로 변경할 수 있다. 위에서 작성한 코드에서 <ol></ol>코드를 복사하여 “type”속성을 추가하고 “a”로 지정한다.

 

 

실행하면 다음과 같이 1,2,3..으로 출력되던 목록이 a,b,c..의 형태로 출력되는 것을 확인할 수 있으나 “type”속성은 노란색 밑줄이 떠 있는 것을 확인할 수 있다. warning이다. 이렇게 warning이 뜨는 부분은 CSS에서 지원하고 있기 때문에 HTML5에서는 지원이 안 되는 것이다. 꾸밈과 관련된 모든 속성은 HTML태그의 속성에서 제어하지 않고 모두 CSS속성으로 제어하는 것이 권고사항이다.

그러나 실행하면 결과는 다음과 같이 잘 나올 것이다. 또한 “start”속성이 “3”으로 지정되어 있기 때문에 “3”번에 해당하는 “c”부터 결과가 출력되는 것을 확인할 수 있다.

 

 

순서가 없는 목록

순서가 없는 목록은 목록을 기호와 함께 나타내며 CSS와 함께 이용하면 여러 가지 형태로 변형할 수 있다. <ul></ul>로 나타내며 각 목록은 순서가 있는 목록과 마찬가지로 <li></li>로 나타낼 수 있다.

보통 순서가 없는 목록은 CSS를 적용하여 메뉴를 구성하거나 테이블처럼 나타낼 수 있다. 다음과 같은 코드를 작성한다.

 

실행하면 다음과 같은 결과를 나타낼 수 있다.