데니스의 놀이터

1. <table>, <tr>, <td>, <th> 태그 - 기본적인 표 만들기

 기본형 :

 <table>

<tr>

<th></th> <!-- 표에 제목 셀 만드는 태그입니다. 해당 셀에 들어가는 내용을 셀의 중앙에 배치하고 굵게 표시합니다.-->

<td>내용</td>

<td>내용</td>

</tr>

</table>

 - 우리가 일상에서 자주 보는 표를 머릿속으로 상상해보세요. 가로, 세로로 각각 행과 열이 있고 그 안에 내용이 입력됩니다.

   이런 표를 만들 때는 표를 만드는 태그와 행을 만드는 태그, 열을 만드는 태그가 각각 필요합니다.

   이렇게 하나의 표를 만들기 위해서는 여러 개의 태그가 필요합니다.

2. 기본적인 표 만들기

 우선 <table> 태그를 이용하여 표 전체 윤곽을 잡은 다음에 행(row)을 먼저 만들고 각 행마다 몇 개의 셀(cell)이 들어갈지 결정합니다.

 예를 들어 2개의 행과 3개의 열을 가진 표를 만든다면 다음과 같은 순서로 만들면 됩니다.

 1) <table> 태그를 이용하여 표 자리를 만듭니다.

<사진 1.1>

 2) <tr> 태그를 사용하여 2개의 행을 만듭니다.

<사진 1.2>

 3) <td> 태그를 사용하여 각 행마다 셀을 3개씩 만듭니다.

<사진 1.3>

 4) 각 셀에 들어갈 내용은 <td>와 </td> 사이에 입력합니다.

 다음은 내용이 들어간 코드입니다.

<사진 1.4>

다음은 <사진 1.4> 결과 화면입니다.

<사진 1.4 결과 화면>

결과 화면을 보면 입력한 대로 출력이 되었지만 우리가 생각했던 표가 아닙니다. 왜냐하면 표를 구분 짓는 테두리 없이 표현이 되었기 때문입니다.

테두리를 표현하고자 한다면 <table> 태그 안에 border 속성으로 속성 값을 1을 주어야 합니다. 다음은 border 속성을 입력한 코드입니다.

<사진 1.5>

다음은 결과 화면입니다.

<사진 1.5 결과 화면>

<table> 태그 안에 border 속성을 입력한 결과입니다. border 속성값으로 1을 입력했지만 숫자가 올라갈수록 테두리 색이 진하게 표현됩니다.

1. <dl>, <dt>, <dd> 태그 - 설명 목록 만들기

 기본형 :

<dl>

<dt> 제목 </dt>

<dd> 설명 </dd>

...

</dl>

 - <dl> 태그는 사전 구성처럼 '제목'<dt>과 '설명'<dd>이 한 쌍인 설명 목록(Description List)을 만듭니다.

   <dt> 태그는 제목을 표시할 때 사용됩니다.

   <dd> 태그는 설명을 표시합니다. 하나의 <dt> 태그에 여러 개의 <dd> 태그를 가질 수 있습니다.

다음은 <dl>, <dt>, <dd> 태그를 사용한 예제입니다.

<사진 1.1>

제가 좋아하는 배우 3명과 가수 3명을 작성하였습니다. 다음은 결과 화면입니다.

<사진 1.1 결과 화면>

1. <ul> 태그 - 순서 없는 목록 만들기

 기본형 :

<ul>

<li> 내용 </li>

<li> 내용 </li>

...

</ul>

 - <ul> 태그는 Unordered List의 약자로써 '정돈되지 않은 리스트'를 뜻 합니다.

   <ul> 태그를 사용하고 <ul> 태그 안에 <li> 태그를 사용하여 각 항목을 표시합니다. <ul> 태그 사용 시 각 항목 앞에 작은 원이나 사각형 같은

   불릿(bullet)이 붙습니다. 작은 원이 디폴트 값입니다.

<사진 1.1>

<사진 1.1> 코드는 <ul> 태그와 <li> 태그를 사용했습니다. 그리고 <li> 태그의 끝 태그인 </li> 태그를 생략해도 결과는 같습니다.

<사진 1.1 결과 화면>

결과 화면을 보면 a, b, c, d, e의 앞에 작은 원인 불릿이 붙어서 출력되는 것을 확인할 수 있습니다.

2. <ol> 태그 - 순서 목록 만들기

 기본형 :

<ol>

<li> </li>

<li> </li>

<li> </li>

....

</ol>   

 - <ol> 태그는 Ordered List의 약자로써  '정돈된 리스트'를 뜻 합니다.

   <ul> 태그처럼 순서 없는 목록이 아닌, 순서를 알고 싶은 목록을 사용하고 싶으면 <ol> 태그를 사용하면 됩니다.