HTML 5 :) HTML 에서 목록만들기! <ul> <ol><li>

HTML 기초 텍스트 

---

목록만들기 태그

 

html안에서 목록을 만드는 것은 상당히 중요한 부분입니다.

이후에 보다 발전된 형태의 웹을 만들 때에도, 이런 목록 명령을 통해서 이미지나 텍스트 모두 정리할 수 있고 여러형태로 다양하게 사용할 수 있는 부분입니다.

 

저도 책을 보며 공부할때 보니 아주 많이 사용되는 부분이더라구요.

 

1. 순서가 없는 태그

 

별도의 숫자나 순서를 매길 필요가 없을 경우, 그리고 저는 일반적으로 해당 태그를 많이 사용합니다

 

상위 <ul> - unordered list 

하위 <li> - list item

 

기본형태로는 

<ul>

  <li> 내용 <li>

  <li> 내용 <li>

</ul>

 

2. 순서가 있는 태그

 

항목을 나열하면서 지정된 순서가 필요할 경우 사용합니다.(워드나 한글의 1,2,3 순서를 매기는것과 비슷합니다)

 

상위 <ol> - ordered list

하위 <li> - list item

 

기본형태는 당연히

 

<ol>

  <li> 내용 <li>

  <li> 내용 <li>

</ol>

 

하지만 순서가 있는 태그에서는 하나 더 설정할 것이 있는데, 그것은 바로 속성 값 입니다.

정렬할 순서를 어떤 기호로 할 것인지, 몇번째로 시작할 것인지를 설정할 수 있습니다. 기본 속성값은 

 

숫자(기본값) / 영문 소문자 / 영문 대문자 / 로마숫자 소문자 / 로마숫자 대문자 를 선택할 수 있고, 프로그램 안에서 선택할 수 있습니다.

 

해당 내용과 이전에 소개해 드린 기본 텍스트 태그를 이용해서 간단히 샘플을 

이런식으로 가장 처음에 텍스트 단락,

 

<ul>뒤에도 글을 작성할 수 있습니다만, 일반적으로는 잘 사용하지 않는듯 합니다.

 

2번째는 리스트 이지만 순서가 없는 리스트

3번째처럼 순서가 있는 리스트를 만들 수 있습니다.

 

 

주의해야 할 부분중 하나는 3번째 단락의 밑줄 친 부분

<ol typl="A" start="2">라는 표시는

li에서 사용할 표시 타입은 A,B,C 타입이며,

start="2"의 의미는 그 중, 2번째 순서를 1번으로 표시한다 라는 의미입니다.

 

 

 

그리고, 작업중 중간중간 혹시나 궁금해 하실 자동완성 기능을 설명 드리면

이렇게 태그를 작성하시게 되면 자동적으로 기능을 잡아주기도 하고, st만 작성하셔도 start를 자동완성 시킬 수 있습니다.

html 독학 중 텍스트 부분에서는 가장 중요한 부분 중 하나가 아닐까 생각합니다.

그만큼 뒤로가면서도 계속 사용되고, 나중에 웹을 구성할때도 빠지지 않고 나오는 부분이였습니다!

 

또 현재 html을 독학으로 하시는 분이 계시다면 아마 데이터 작성중에 태그를 상위 하위 탭 구분없이 사용할 가능성이 있을 수 있다고 생각됩니다(제가 그랬어서요)

 

탭 구분이 없다고 하더라도 실제 작성후 구동되는것은 동일하지만, 점차 복잡해지고 여러 파일들이 링크가 되다보면 자기도 모르게 누락하는 경우가 생길 수 있습니다.

 

태그를 닫아줬는지, 상위 하위 구분을 정확히 하기 위해서 탭은 반드시 구분해서 깔끔하게 정리하는 습관이 필요한 것 같습니다(유튜브에서 배워왔습니다.

 

필요하신 분들께 도움이 되었으면 좋겠어요~