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

설정

트랙백

댓글

[사전형 목록]에 사용하는 태그 : dl, dt, dd

[목록]에 사용하는 태그 

<dl>...</dl>

<dt> ... </dt>

<dd> ... </dd>


<dl>태그 그룹은 사전처럼 용어를 설명할때 사용하는 태그이다. <dl>태그만 독립적으로 사용할 수 없고 용어(definition term)를 표현하는 <dt> 태그와 용어에 대한 설명(definition descriptxion)을 표현하는 <dd>가 한 쌍으로 사용된다. 

사전을 예로 들면 <dt>태그는 사전의 단어에 해당하는 부분이고, <dd>태그는 사전의 뜻풀이에 해당하는 부분이다.  <dd>태그는 <dl>태그보다 한 탭정도 들여쓰기가 된고  글머리 기호나 번호가 붙지 않는다.다.


◈ <dl>, <dt>, <dd> 태그 문법

<dl>

   <dt>dt 태그</dt>

   <dd>dt 태그(Definition Term)는 사전에서 설명이 필요한 단어에 해당한다.</dd>


   <dt>dd 태그</dt>

   <dd>dd 태그(Definition Description)는 사전에서 단어의 설명에 해당한다.</dd>

</dl>


dl_dt_dd_tag_sample.html

설정

트랙백

댓글

[테이블/표]에 사용하는 태그 : table, tr, td

테이블/표에 사용하는 태그 

<table>...</table>

<tr> ... </tr>

<td> ... </td>


<table>태그 그룹은 표를 만들 때 사용한다. <table>태그는 단독으로 사용할 수 없고 <tr>과 <td>태그가 함께 사용한다. 하나의 <table></table>태그 사이에는 반드시 하나 이상의 <tr></tr>태그가 들어가야하며 <tr>태그 안에는 다시 <td></td>태그가 들어가야 한다. 


<tr></tr>은 행을 추가할 때 사용한다. 5행짜리 테이블을 만들기 위해서는 <table></table> 사이에<tr></tr>이 5개 있어야 한다.


<td>는 한 행을 몇개의 칸(열)으로 나눌지 결정한다.  열이 5개인 표를 만들고 싶으면 <tr></tr>안에 <td></td>가 5개 있어야 한다.



위의 예제처럼 2행, 2열, 총 4칸짜리 테이블을 만들기 위해서는 행을 그려주는 <tr>이 2번, 칸을 그려주는 <td>가 <tr>안에 각각 2번씩 4번 나와야 한다. 

테이블은 가로 2칸을 병합하거나 세로 2칸을 병합하는 등 좀 더 복잡한 구조를 가질 수 있다. 



테이블의 속성인 rowsapn과 colspan은  <td>태그에 사용하는 속성으로 행과 열을 병합할 때 쓴다. 행과 열을 병합할 때는 표의 정확한 구조를 파악하지 않으면 표가 제대로 그려지지 않을 수 있으니 주의해야 한다.



◈ <a href="URL"> </a> 태그 문법


<table border="1">

   <tr>

       <td>1행 1열</td>

       <td>1행 2열</td>

       <td>1행 3열</td>

   </tr>

   <tr>

       <td>2행 1열</td>

       <td>2행 2열</td>

       <td>2행 3열</td>

   </tr>

</table>

<p><br /></p>


<p>□ 변형 테이블 </p>


<table border="1">

   <tr>

       <td rowspan="2">2행 병합</td>

       <td>1행 2열</td>

   </tr>

   <tr>

       <td>2행 2열</td>

   </tr>

   <tr>

       <td colspan="2">1열 병합</td>

   </tr>

</table>


<p><br /></p>


<p>□ colspan, rowspan을 잘못 사용할 경우 </p>

<p>colspan, rowspan을 잘못 사용하면 행과 열의 위치가 제대로 배열되지 않고, 칸이 없는 영역이 생길 수도 있다. </p>

  

<table border="1">

   <tr>

       <td rowspan="2">2행 병합</td>

       <td>1행 2열</td>

       <td>1행 3열</td>

   </tr>

   <tr>

       <td>2행 1열</td>

  <td>2행 2열</td>

       <td>2행 3열</td>

   </tr>

   <tr>

       <td colspan="2">1열 병합</td>

       <td>3행 2열</td>

  <td>3행 3열</td>

   </tr>

</table>


table_tag_sample.html




□ 사용 가능한 속성

속성

설명

boder

숫자

표에 테두리를 그려준다. 0은 테두리 없는 표가 그려지고, 1부터 테두리 두께가 정해진다.

rowspan

숫자

세로 행을 숫자만큼 병합. td 태그에 사용

colspan

숫자

가로 열을 숫자만큼 병합. td 태그에 사용


설정

트랙백

댓글