홈페이지제작할 때 꼭 필수적으로 알아야 하는 것일 수 있습니다.
그래도 아직도 사용하는 html 태이블 구조에 관해서 학습을 해보겠습니다.
예전에는 이 테이블태그를 이용하여 레이아웃을 잡았습니다.
div로 레이아웃을 잡는데요 표로 레이아웃을 요즘은 안잡고요. 그래도 달력이나 게시판 등은 그렇게 한답니다.
지금까지 강좌에 올린 태그들은 그 기능에만 충실히 설명을 하고 꾸미기 쪽은 아에 설명을 안했습니다. h태그로 작성한텍스트의
색을 바꾼다던지 글씨를 더 크게 한다던지의 align을 써서 오른쪽으로 정렬을 시킨다던지 그런 설명을 안했습니다.
이미지 태그도 border를 줘서 외곽을 어떻게 처리 한다던지 그런 설명도 안했는데요. 그 이유는 CSS에서 그러한 것들을 하기 때문입니다.
요즘은 html은 저렇게 구조만 짜주면 됩니다. 그리고 스타일은 스타일시트인 CSS 로 한답니다.
예를 들어서 다음페이지를 봐보겠습니다.
인터넷 익스플로러를 띄우시고 클릭하면 다음으로 갑니다.
메뉴에서 보기 - 스타일 - 스타일 없음을 눌러 보시면요 CSS가 해제된 저희가 지금 작성하고 있는 html 자체만 보실수 있습니다.
저거 입니다. html 로는 저렇게만 작성을 해주시면 되고요 CSS로 아까와 같이 배치 및 글씨 색 글씨 크기, 백그라운드 이미지, 백그라운드 색, 외곽선 굵기 스타일 외곽선색 등을 다 지정해준답니다.
만약 스타일 없음 했는데도 스타일 있는 페이지와 차이가 별로 없다면 그것은 웹표준을 지키지 않고 테이블로 레이아웃을 작성한 옛날 방식의
사이트 입니다. 그냥 혹시 왜이렇게 강좌를 대충 대충 하나 하시는 분이 계실까봐 말씀 드렸습니다.
테이블에 대해서 말씀드리면
<table> <-- 테이블 태그의 시작
<tr> <-- 줄(열)의 시작
<td>A <-- 칸(행)의 시작
</td> <-- 칸(행)의 끝
</tr> <-- 줄(열)의 끝
</table> <-- 테이블 태그의 끝
위에서 tr을 열고 td를 1개만 사용했으므로 그냥 1칸뿐인 테이블이 됩니다.
<table border="1">
<tr>
<td align="center" colspan="2">A</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
결과는
<tr>
<td rowspan="2">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
결과는
<table border="1" >
<tr>
<td rowspan="2">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
결과는
'홈페이지제작 > HTML' 카테고리의 다른 글
| [홈페이지 제작 ] HTML 기초와 HTML 편집기 (0) | 2017.10.17 |
|---|---|
| div태그로 홈페이지 레이아웃 만들기 (0) | 2017.09.25 |
| [html] 홈페이지에 이미지올리는 img태그 (0) | 2017.09.02 |
| HTML 기본 구조 (0) | 2017.09.01 |
| [html] 리스트 태그와 링크태그 (0) | 2017.09.01 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.