오늘은 시작하자마자 좀 재밌는걸 한다. 직접 예제를 보고 표를 똑같이 만들어보기! 처음에는 border도 설정하고 시행착오를 조금 겪었지만 하다보니 아래 그림과 같이 똑같이 만들어낼 수 있었다!
*표 만들기(1)
소스보기
<html>
<head>
</head>
<body>
<p align="center">
<table bgcolor="pink" width="400px">
<tr>
<th colspan="2"><font size="5" color="white">제주교육대학교</font></th>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#FFFFC5">제주시 화북1동 4810번지</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFC5">064-720-0700</td>
<td align="center" bgcolor="#FFFFC5">064-720-0800</td>
</tr>
</table>
</p>
</body>
</html>
테이블 border의 크기는 설정하지 않았다. border는 각 셀 테두리 선의 두께를 의미하기 때문이다.
colspan을 이용하여 위의 두 셀을 병합시켰다.
테이블 자체에 bgcolor를 설정하고 밑에 각 셀 td에다가 따로 bgcolor를 설정하여 완성하였다.
*셀 간의 간격 설정하기 - <cellspacing>
*한 셀 안쪽 간격 설정하기 - <cellpadding>
소스보기
<html>
<head>
</head>
<body>
<p align="center">
<table bgcolor="pink" width="400px" cellspacing="5" cellpadding="10">
<tr>
<th colspan="2"><font size="5" color="white">제주교육대학교</font></th>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#FFFFC5">제주시 화북1동 4810번지</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFC5">064-720-0700</td>
<td align="center" bgcolor="#FFFFC5">064-720-0800</td>
</tr>
</table>
</p>
</body>
</html>
*img 태그 설정 후 공백 없애기 - <topmargin> <leftmargin>
보통 그림을 불러 웹페이지에 출력하면 왼쪽, 위쪽에 공백이 생긴다.
이 공백을 없애줄 수 있다. 아래 그림은 <topmargin>, <leftmargin>을 사용하여 출력한 모습이다.
소스보기
<html>
<head>
<title> ::: 맑은 머리로 공부하기 :::</title>
</head>
<body topmargin="0" leftmargin="0">
<img src="01/img/mark.jpg">
</body>
</html>
*헤드라인 쓰기 - <h> <h1> <h2>
<h>태그를 활용하여 뉴스의 헤드라인처럼 보이게 할 수 있다. 또한 이 태그는 영역을 구분하는 효과가 있다. 또 하나 좋은점은, 웹 페이지 창을 줄이면 자동으로 글자가 엔터효과처럼 밑으로 내려간다는 것이다.
<h>태그를 반영한 웹페이지이다.
창을 줄였더니 글자가 내려간다.
소스보기
<html>
<head>
<title> ::: 맑은 머리로 공부하기 :::</title>
</head>
<body topmargin="0" leftmargin="0">
<img src="01/img/mark.jpg" width="200px" align="left">
<h1>IT계의 거목</h1>
<h2>김광천은 2013년 7월에 부산아이티윌에서 공부를 하고있다.</h2><h3>웹표준을 공부하여 n스크린에 맞는...</h3>
</body>
</html>
*기타 기능
글자 굵게 하기 - <b>
이탤릭체(기울임꼴) - <i>
밑줄효과 - <u>
화학식 적을 때 아래첨자(O2 같은..) - <sub>
위 첨자 - <sup>
수평라인 긋기 - <hr>
-> 수평라인 size, color지정 가능.
img 태그 속성 - <title="">
-> 그림에 마우스를 갖다 대면 ""안의 설명이 나온다.
적용된 그림
소스보기
<html>
<head>
<title> ::: 맑은 머리로 공부하기 :::</title>
</head>
<body topmargin="0" leftmargin="0">
<img src="01/img/mark.jpg" width="200px" align="left" title="10년뒤 내모습"><br><br><br><br><br><br><br><br><br>
<h1>IT계의 거목</h1>
<h2>김광천은 2013년 7월에 부산아이티윌에서 공부를 하고있다.</h2><h3>웹표준을 공부하여 n스크린에 맞는...</h3>
<i>아침에</i> <u><b>8시 30분</b></u>까지 오셔용 O<sub>2</sub><hr size="15" color="red" align="right" width="50%"> A<sup>2</sup>
</body>
</html>
s(ㅇ_ㅇ)/