[글머리 기호 목록]에 사용하는 태그 : 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 여기를 참고하세에요.