목록 만드는 html 태그

이번 내용은 목록을 만드는 html 태그를 알아보려고 한다. 

기본적인 부분은 생략을 하고 포스팅 내용을 다룰것이다. 처음 보신분들은 아래 링크에 가서 보길 바란다.

HTML문서 기본구조 살펴보기

HTML텍스 관련 태그 소스 

텍스트 따라 표시하는 태그 

<ul>, <li> 태그는 순서 없는 목록만들기 태그이다. 

기본 시작은 

<ul>

<li> 텍스트 </li>

<li> 텍스트 </li>

</ui>  

실습

커피

술

위와 같이 표현이 가능하다. <ul>안에 <li>넣어 목록 리스트를 작성 할 수있다.

아무 스타일도 적용하지 않아서 기본 목록 형식으로 표현이 된다.

<ol> <li>순서목록 태그 

기본 시작은 

<ol>

<li>텍스트</li>

<li>텍스트</li>

</ol>

실습으론 

1. 내용
2. 내용

위와 같이 표현이 된다. 

이번에는 <ol> 태그에 기능이 좀더 추가가 된다. 

별도의 속성값을 넣어 좀 더 리스트 목록을 만들수 있게 된다.

<type 속성 값>

속성 값	설명
1	숫자(기본값)
a	영문 소문자
A	영문 대문자
i	로마숫자 소문자
I	로마숫자 대문자

작성하는 태그는 <ol type="a"> 응용은 <ol type="a" start="3"> <ol type="a" reversed>  이와 같이 시작하면 된다. 

type 속성: <ol> 태그는 순서 목록이고 각 항목 앞에 1,2,3 같은 숫자가 기본으로 표기하며, ol 태그의 type 속성을 이용해 숫자나 문자를 다양하게 조절을 할 수가 있다. 

start 속성: 순서 목록은 기본적으로 1부터 시작할 수 있고 경우에 따라 중간 번호부터 시작할 수있다.

reversed 속성:  순서목록을 역순으로 표시가 가능하다. 

목록 리스트가 많은 경우 </li>속성을 사용하지 않아도 중첩이 된다. 

<ol>

<li>내용

<li>내용

<li>내용

</ol>

위 같이 작성해서 가능하다. 

실습

1. 내용
2. 내용
3. 내용

실습!!

• 커피종류
  1. 에소프레소
  2. 아메리카노
  3. 카푸치노
• 술종류
  1. 소주
  2. 맥주
  3. 청주

<dl>,<dt>,<dd>태그 역시 같은 성향의  설명 목록태그이다. 

기본형은 

<dl>

<dt>내용</dt>

<dd>내용</dd>

<dd>내용</dd>

<dt>내용</dt>

<dd>내용</dd>

<dd>내용</dd>

</dl>

이름하나의 세 개의 설명을 나타낼수 있다.  지금까지 목록 만드는 html태그 소스를 알아보았다.

태그소스는 자주 연습하면서 작성을 해야 내손에 익어간다. 

지금도 많이 버벅되지만 좀 더 하면은 익숙해질 것이라고 생각이 된다.