HTML 목록 만들기

HTML 목록 만들기

HTML에서 목록을 만드는 것을 알려드리려 합니다.

HTML에서 목록은 정말 많은 곳에서 사용되고 있습니다.

이번에 사용해볼 새로운 태그입니다.

목록이 목록이지 무슨 종류가 이리 많은지 어리둥절 하실겁니다.

그러니 우선 사용해 보겠습니다.

<ul>안에 <li>를 넣어 하나의 목록을 만들어주고,

<ol>안에도 <li>를 넣어 목록을 만들어 줍니다.

아무 효과를 주지 않았는데,

<ul>태그의 목록은 알아서 앞쪽에 동그란 점이 붙었습니다.

그리고, <ol>태그의 목록에서는 숫자가 붙었습니다.

이제 순차적이랑 비순차적의 차이가 조금은 보이지 않으신가요?

요걸 좀더 활용해 보겠습니다.

<ul>에는 스타일 시트로 모양을 네모로 바꾸어주고,

<ol>은 샐수 있는 다른 방법으로 'abc...'순으로 정리를 하지만,

순서는 3번째 부터 시작하라고 설정해 주었습니다.

보시면, <ul>은 사각형으로,

<ol>은 'abc...'로 세지만, 

3번째인 c부터 세는 것을 보실수 있으실 겁니다.

이번에는 다른 효과를 줘볼까요?

이번엔 <ul>에 모양을 지우고,

<ol>은 로마자로 거꾸로 세라고 명령을 주었습니다.

보시면, <ul>에 모양이 없어지고,

<ol>은 숫자를 로마자로, 반대로 된게 보이실겁니다.

이 처럼 <ol>은 순서를 세는 테그 로서,

순서를 셀수있는 방법이라면 대부분 가능합니다.

종류는 'A', 'a', 'I', 'i' 등

만국 공통으로 사용하는 순차라면, 거의 가능합니다.

예로 들면 abc순은 가능한데, ㄱㄴㄷ순은 안되는 거죠.

<ul>은  정말 자주 쓰는 부분이여서 한가지를 더 보여드리도록 하겠습니다.

아까, <ul>의 특수문자를 없애을때도 뭔가 익숙하다는 생각이 들지 않으셨나요?

조금더 익숙해 보이시라고 스타일에서 "float:left;" 로 <li>를 가로 정렬했습니다.

그리고, 약간의 여백도 줘 보았습니다.

이제 정말 익숙해보이지 않으신가요?

이해를 돕기위해 잠깐 네O버 메뉴단과, 

유O브메뉴단을 가지고 와봤습니다.

바로 목차 정리 뿐만 아니라,

메뉴단도 만들 수 있다는 겁니다.

보통 이런 메뉴단을 만들기 위해서 

여러 방법을 사용할 수 있지만, 

주로 <ul>을 사용하는 경우가 가장 많습니다.

나중에 좀더 CSS효과를 주고,

앞에서 했었던 <a>태그를 주면 훌륭한 메뉴단이 되는 것이죠.:D

조금만 활용해도 다양하고 창의적이게 사용할 수있이서,

참 재미있는거 같습니다.:D