[글머리 기호 목록]에 사용하는 태그 : ul, li

[글머리 기호 목록]에 사용하는 태그 

<ul><li>목록1</li><li>목록2</li></ul>

<ul>태그 그룹은 글머리 기호가 붙은 목록을 표현할 때 사용한다. <ul>태그 단독으로 사용할 수 없고 목록을 표현하는 태그인 <li>태그와 반드시 함께 사용해야 된다. HTML4에서는 type 속성을 지원해서 disc, square, circle 등 3가지 모양의 글머리를 지원하며 <li type="square">로 사용하면 되나  HTML5에서는 compact와 type 속성을 지원하지 않기 때문에 사용가능한 속성은 설명하지 않는다.

◈ <ul>, <li> 태그 문법◈

<ul>

   <li>사과</li>

   <li>복숭아</li>

   <li>자두</li>

   <li>살구</dd>

</ul>

ul_li_tag_sample.html

◆ 참고 : list-style-type으로 다양한 글머리 표현하기

<li> 태그를 쓰면 목록 앞에 글머리 기호나 숫자가 나온다. HTML의 속성으로는 이 글머리를 없애지 못하고, 글머리 모양도 한정적이다. 이를 해결하기 위해서는 CSS를 사용해야 한다. CSS를 사용하면 HTML에서 제공하는 기본 타입 외에 20여가지의 속성을 사용할 수 있고, 이미지로 자신만의 목록을 만들 수 있다.

▷ 예제 : CSS로 글머리 기호 표현하기

<style>

ul.none_bullet {

list-style-type : none;

}

ul.china {

list-style-type : cjk-ideographic;

}

</style>

...

<p>● CSS로 글머리 없애기</p>

<ul class="none_bullet">

   <li>사과</li>

   <li>복숭아</li>

   <li>자두</li>

   <li>살구</dd>

</ul>

<p>● 한자 숫자로 글머리 표시하기</p>

<ul class="china">

   <li>사과</li>

   <li>복숭아</li>

   <li>자두</li>

   <li>살구</dd>

</ul>

▷ 결과

● CSS로 글머리 없애기

• 사과
• 복숭아
• 자두
• 살구

● 한자 숫자로 글머리 표시하기

• 사과
• 복숭아
• 자두
• 살구

표현 가능한 글머리 기호는 http://www.w3schools.com/cssref/pr_list-style-type.asp 여기를 참고하세에요.