가장 중요한 테이블 (제생각^^;;) table, tr, td

테이블 태그는 엄청나게 중요합니다. 이 태그를 안쓰고 홈페이지를 만든다면…
때리쳐.-_-; 또한 html중에서 배울때 가장 애먹는 놈입니다. 빳싹 긴장하고 보시죠~

<table> 속성 .
align : 표 정렬 ( left / center / right )
bgcolor : 표 바탕 색 지정
border : 표 경계선의 굵기 ( 픽셀 단위 )
bordercolor : 표 경계선의 색 지정
width : 표 가로의 폭 길이
height : 표 세로의 폭 길이
cellpadding : 셀 내부의 여백 지정
cellspacing : 셀의 구분선 굵기 지정
<tr> <td> 속성.
align : 셀 내부의 가로 정렬 ( left / center / right )
valign : 셀 내부의 세로 정렬 ( top / middle / bottom )
bgcolor : 셀 바탕 색 지정
background : 셀 배경 이미지
width : 셀의 가로 너비
height : 셀의 세로 너비
colspan : 셀이 펼쳐져 있는 열의 수
rowspan : 셀이 걸쳐져 있는 행의 수

표가 어떻게 생성 되는지 설명해 드리겠습니다. 우선 <table> 이라는 태그로 시작을 합니다.
그리고 <tr> 이라는 태그로 하나의 행을 만듭니다. 편하게 가로로 줄을 그린다고 생각 하시면 좋습니다.
그 다음 <td> 라는 태그로 칸을 만드는 거지요. <tr> 태그 안에 <td> 태그가 10개 들어 가면 가로로 칸이 10개가 있는 테이블이 만들어 집니다. 당연히 태그가 시작하면 닫아 주는 태그도 써주셔야지요.
<table> 안에 bgcolor를 설정 하는 것과 <td> 안에 설정 하는 것이 다르다는 것을 느끼세요. <table> 안에 설정하면 table 전체가 <td> 안은 그 해당 되는 셀 안쪽만 색이 입혀 집니다.
colspan 은 가로로 있는 셀과 합쳐 지는 것입니다. 만약 테이블이 한 행으로만 이루어져 있다면 합쳐질 수가 없겠지요? rowspan 도 같습니다. rowspan 은 세로로 있는 셀과 합쳐 지는 것입니다.
이해가 안돼는 분이 여기서 많이 나올꺼라고 예상합니다. colspan 하고 rowspan 이 뭘 어떻게 작용하는지 처음에는 잘 이해가 안돼는데요. 여러번 직접 코딩하시고 보시면 빨리 이해 하실꺼라 믿습니다.

문서를 이동하는 태그 A

어떤 웹사이트든 문서를 이동하는 것을 이동 하는 걸 보았을 것입니다.
지금 이 강좌도 글을 클릭 하여 들어 왔을 것입니다. 이것은 <A> 태그를 통하여 만들 수 있습니다. 이 태그를 확인을 하려면 적어도 2개의 문서가 필요 하겠지요?
이 <A> 태그가 HTML의 가장 큰 특징이라고 해도 과언이 아닙니다.

href : 문서연결의 경로 지정, 해당 URL 경로 지정
name : 위치이름 ( 책갈피 기능에 쓰인다. )
target : 문서 출력 창 지정 ( _top / _blank / _parent / _self / frame name )
mailto : 전자메일 연결

 

target 종류에는 _top / _blank / _parent / _self / frame name 이 있다고 위에서 설명 했는데요.
우선 top 이것은 프레임을 사용했을 때 모든 프레임을 무시하고 전체 창으로 문서를 불러 옵니다. blank 는 위의 예제에서 한 것 처럼 새창으로 문서를 불러 오는 것입니다.
parent는 최상위 창으로 문서를 불러 오고 self는 현재 진행 하고 있는 창으로 문서를 불러 옵니다. frame name 은 꼭 이렇게 쓰는 것이 아니라 프레임을 사용했을 때 프레임에 이름을 주어서 그 쪽 프레임으로 문서를 불러 오겠다고 하는 것입니다.
메일을 링크 실킬 때는 그냥 ‘mailto:자기메일주소’ 이렇게 하면 됩니다. 이 링크를 클릭 했을 때는 윈도우에 깔려 있는 아웃룩이 작동을 하지요.

이것이 바로 책갈피 기능입니다. <A> 태그로 이름을 지정하고 <A> 에서 문서경로를 지정 하는 곳에 # 을 붙이고 아까 지정한 이름을 써 넣어 주시면 됩니다.

경로의 이해

경로에는 2가지가 있습니다. 절대 경로와 상대 경로가 있지요.
절대 경로는 절대적인 경로. 그러니깐 예를 들어 야후 사이트, 네이버, 아님 eyes of siche 와 같은 사이트를 링크를 건다고 하면 당연히 절대 경로인 바로 사이트의 주소를 써야겠지요. 하지만 자신의 홈페이지를 만든다고 했을 때의 절대 경로란 예를 들어 c:homeindex.html 이런 식이겠지요. 이런 식으로 자신의 홈페이지를 계정에 올린다면 자신은 그홈페이지를 볼 수 있습니다. 자신의 하드 드라이브 즉, c드라이브 안에 home 이라는 폴더 안에 index.html 라는 파일이 있습니다. 하지만 당신의 홈페이지에 들어 가는 네티즌들의 c드라이브 안에 home 폴더 안에 똑같은 index.html 파일이 들어 있다는 것은 기적입니다. 로또의 확률 보다 엄청나게 다이나믹 하게 적지요….-0-;; 자신의 홈페이지를 계정에 올리는 순간 그 역시 절대 경로가 되지만 그것을 일일이 맞추어 가면서 만들기란 정말 어의가 없는 행동이 아니라고 볼 수 없습니다.
말이 길어 졌는데 이래저래 하여 홈페이지를 만들 때 중요한 상대경로를 자세히 알아 보겠습니다.


만약 위와 같은 경로가 있다고 예를 들겠습니다. index.html 에서 image 폴더 안에 있는 siche.gif 그림 파일을 불러 온다고 합니다. 그럼 <img src=”image/siche.gif”> 라고 해야 합니다.
여기서 ‘/’ 이놈은 경로를 나타낼 때 폴더안 이라고 생각 하시면 됩니다. 그럼 my_banner.gif 의 그림 파일을 불러 온다고 하면 <img src=”image/banner/my_banner.gif”>이지요. 이것은 하위 폴더로 이동할 때였습니다.
그럼 상위 폴더로 이동 하는 것은 어떻게 할까요? banner.html 문서에서 image 폴더안에 있는 siche.gif 그림 파일을 불러 온다고 합시다. 그럼 <img src=”../image/siche.gif”> 이렇게 나타낼 수 있습니다. ‘../’ 이놈은 경로를 나타낼 때 바로 한 폴더 위쪽으로 가자 라는 뜻이 지요.
그렇다면 banner.html 에서 tip 폴더 안에 있는 tip.gif 그림 파일을 불러 온다고 한다면 <img src=”../tip/tip.gif”> 이렇게 나타낼 수 있습니다.
여기서 가장 중요한 것은 ‘/’ 이놈과 ‘../’ 이놈 입니다. 폴더 안에 안에 안에 계속 해서 들어 가면 ‘/’ 이놈을 계속해서 붙여 주고 폴더 위에 위에 위에 계속해서 올라 가면 ‘../’ 이놈을 붙여 주는 것이지요.