HTML 목록 태그 ol ul li 그리고 type 사용 방법을 알아보자
오늘은 목록 태그 중 하나인 ol (오더드 리스트) 와 ul (언오더드 리스트) 에 대해 알아볼 것입니다. li는 왜 설명이 없냐고요? 차츰 설명을 드릴 것 입니다.
먼저 <ol></ol>은 순서가 있는 목록 태그라고 합니다. 1,2,3 혹은 A,B,C 순으로 자동 배열됩니다. 그러면 딱 봐도 <ul></ul>은 어떤건지 대충 감이 오시죠? 그렇습니다. 이 태그는 순서가 없습니다. 그냥 기호화 되어 표시가 됩니다. 말로는 역시 한계가 있으니 아래의 스크린샷 이미지를 보시면서 알아보시겠습니다.
<ol>태그 사용법
먼저 HTML 문서의 <body> 본문에 삽입해본 내용입니다. 먼저 ol 태그를 사용해보겠습니다. 보시면 ol 태그를 감싼 안쪽에 <li> 태그를 넣었는데 이것이 바로 리스트를 구성하는 핵심 태그라는 것을 알 수 있습니다. <li>내용</li> 으로 구성되어 넣으시면 됩니다.
그러면 HTML 문서에서는 이렇게 출력됩니다. ol의 기본 설정값은 바로 숫자 목록 이라는것을 알 수 있습니다.
꼭 숫자만 나오는 걸까요? 아닙니다. ol 태그에 type="" 태그를 붙여서 스타일을 변경할 수 있습니다. 이번에는 숫자대신 A,B,C 순으로 나열되게 해보겠습니다.
보시는 것 처럼 ABC 순으로 정렬된 것을 확인하실 수 있습니다. reverse 라는 타입도 있습니다. 말 그대로 역순으로 표시가 되는 것 입니다.
<ul>태그 사용법
이제 <ul> 태그를 써보겠습니다. 이것은 순서가 없는 목록 태그라고 말씀 드렸을 겁니다. 어떻게 나오는지 한번 살펴보겠습니다. 태그는 위에 나온것처럼 작성해주시면 됩니다.
ul의 기본 속성값은 검정 동그라미 아이콘으로 표시가 된다는 것을 알 수 있습니다.
마찬가지로 type 태그를 활용해서 스타일을 변경할 수 있습니다. 보시는 것 처럼 circle 로 작성하시면 가운데가 비어있는 작은 원이 들어가게 됩니다.
이렇게 말이죠.
다른 태그도 있습니다. disc, square, circle 도 있으니 한번 넣어보세요. 저는 square (사각형) 로 한번 바꿔봤습니다.
이렇게 바뀝니다.
추가 : 2단 목록도 가능하다!
그렇습니다. 위의 예시는 모두 1단이지만, 목록 안쪽에 또 다시 목록을 넣는 형태도 가능합니다. 다음의 구조를 봐주세요.
보이시나요? 어떤 구성인지 아시겠습니까? ul 안쪽에 li 리스트 태그가 있었고, 여기까지 완성시키면 1단으로 끝나지만, 바로 이 li 리스트 태그 안쪽에 또다시 ul 목록태그를 넣어둠으로 인해서 추가 목록이 생성되었습니다. 이런 원리라면 3단, 4단 쭉쭉 나열할 수 있습니다.
위의 예제를 그대로 웹페이로 출력한 모습입니다. 2단으로 리스트가 정렬되는 기본 스타일 값은 가운데가 비어있는 동그라미가 들어간다는것을 알 수 있습니다.
이렇게 해서 목록태그인 ol 그리고 ul, 리스트를 구성하는 li에 대해서 알아봤고 간단한 활용법에 대해서도 파악해 보았습니다. 리스트 개념을 잘 몰랐는데 이제 가장 기본이 되는 개념을 이해해서 참 기분이 좋습니다. 앞으로도 배우는 족족 복습 겸 포스팅을 꼼꼼히 해 두도록 하겠습니다. 끝.
