HTML 목록 만들기 <ul> <ol> <li> 태그 HTML5

HTML에서 목록을 만드는 태그가 있습니다. 바로 <ul>, <ol>, <li> 태그 인데요. 순서가 필요하지 않을때는 <ul>태그를 사용하며 순서가 필요할 때는 <ol>태그를 사용합니다. 여기서 주목해야 할 것은 <ol>태그에 필수는 아니지만 속성과 속성 값을 입력할 수 있다는 것입니다. <ul>, <ol>, <li> 태그를 사용하는 방법을 저와 함께 알아보도록 하겠습니다.

1. 순서 없는 목록 <ul> 태그

 <ul> 태그는 <li> 태그와 함께 사용됩니다. <ul> 태그가 <li> 태그를 감싼 형태입니다. <li> 태그에 입력하고 싶은 문장을 입력하면 됩니다. 어떻게 출력이 되는지 확인해 보도록 하겠습니다.

크롬브라우저로 실행한 결과 입니다. <ul> 태그가 순서가 없다는 것은 문장앞에 작은 원이나 사각형 같은 불릿이 붙기 때문입니다. 위의 그림은 작은 원이 붙어있는 것을 알 수 있습니다. 순서가 있다는 말은 문장앞에 숫자 1, 2, 3과 같이 순서가 붙는 것을 의미합니다. 이제 <ul> 태그와 <li> 태그를 사용하는 방법을 이해하셨을 것입니다.

 2. 순서 있는 목록 <ol> 태그

<ol>태그는 순서가 있는 목록을 만드는 태그 입니다. <ol> 태그는 <li> 태그와 함께 사용되는데 <ol> 태그가 <li> 태그를 감싼 형태입니다. <li> 태그에 원하는 내용을 입력하면 됩니다. 결과가 어떻게 출력되는지 확인해 보도록 하겠습니다.

크롬 브라우저로 실행한 결과를 보면 문장앞에 번호가 순서대로 있는 것을 알 수 있습니다. 이것이 순서가 있는 목록이라는 것을 알 수 있습니다.

3. <ol> 태그에 순서를 지정하기

<ol> 태그 에는 type 속성과 start 속성을 지정할 수 있습니다. type 속성은 순서 값을 숫자, 알파벳, 로마 숫자로 나타낼지 지정하는 것이고 start는 몇번째 순서부터 시작할 것인지 지정하는 것입니다. <ol> 태그에 속성 값을 지정하지 않으면 기본으로 숫자가 지정됩니다.

위의 그림은 <ol> 태그의 type 속성이 지정할 키워드 값 목록입니다.

type 속성에 숫자 1을 넣었습니다. 이것은 숫자로 순서 목록을 지정하겠다는 의미이고 start 속성에 숫자 2를 지정하였습니다. 이것은 숫자 2부터 시작하겠다는 의미가 되겠습니다. 어떻게 결과값이 나오는지 확인해 보도록 하겠습니다.

크롬 브라우저에서 실행한 결과 숫자 목록이 보이며 숫자 2부터 시작된 것을 알 수 있습니다. 이제 순서가 있는 <ol> 태그를 이해하셨을 것입니다. 이것으로 HTML 목록 만들기 <ul> <ol> <li> 태그 HTML5을 마치겠습니다. 긴 글 읽어주셔서 감사합니다.