홈페이지를 만들어 보자 (템플릿 -5)
- 
right.htm 만들기
right.htm 부분은 메인페이지 우측의 첫화면 이죠? ^^ 방문객들에게 가장 많이 보여지는 페이지이므로 요길 어떻게 꾸미느냐에 따라 홈페이지가 그럴듯하게 보이기도 하고 허접하게 보이기도 한답니다. 고로 꾸미는게 참 중요하겠죠? ^^ 헌데..처음 만드시는 분들에게는 그 많은 공간을 어떻게 메꾸냐가 관건인데... 물론 생각한게 많으신 분들은 이것저것 짜임새 있게 잘 꾸미시는데.. 그렇지 않으신 분들이 문제...^^;; 그런 분들은 위해 right.htm 부분은 커다란 이미지를 이용해서 그럴듯하게 꾸며보도록 하겠습니다.
① head 부분
| <head> <title>재원이의 멋진 SES 홈페이지</title> <style> <!-- td { font-size:9pt; font-family:돋움; } --> </style> </head> |
헤드부분은 간다합니다. title 태그와 스타일시트만 넣어주었죠. 더 들어갈게 있나? ㅡㅡa 아.. 혹시 자바스크립트 사용하시는 분들이라면 head 부분에 넣어주시면 됩니다. ^^
스타일시트 부분은 전체페이지를 잡아주기 위해서 넣어준건데... 여기서 한가지 의문점이 있죠.. 전체페이지를 잡아주는 거라면 body 를 객체로 해서 스타일시트를 지정해줘야지 왜..td로 지정해줬을까...
이건... body 로 잡아줬을 경우 table 태그내의 내용에 대해선 스타일시트가 적용되지 않는 경우가 생기기때문입니다.
② body 부분
| <body topmargin="0" leftmargin="0"> <table width="600" height="580" border="1" bordercolorlight="#FFFFFF" bordercolordark="#000000" cellpadding="0" cellspcing="0"> <tr> <td height="50" align="center">재원이의 멋진 S.E.S 홈페이지</td> </tr> <tr> <td height="480"> <center><img border="0" src="img/main_01.jpg" width="581" height="404"></center> <br> ♡ 드뎌 재원이의 멋진 홈페이지가 오픈했습니다. ^^v<br> <br> 처음 만드는 거라 초 허접이네요...^^; 돌맹이 던지시지 마시고<br> 많은 성원 부탁드리겠습니다.^^ </td> </tr> <tr> <td height="50" align="center"></td> </tr> </table> </body> |
자.. 위에서부터 하나하나 설명해보죠..^^
body 태그에 topmargin / leftmargin 속성은 페이지의 상단과 좌측여백을 조정해주는 겁니다. 값을 넣어주면 그 값만큼 페이지의 테두리와 내용간에 간격(여백)이 생기게 됩니다. ^^
그 다음 table 태그죠? ^^ 1행 3열 테이블인데... border="1" bordercolorlight="#FFFFFF"
bordercolordark="#000000" ☜이부분이 키포인트입니다. 일반적으로 테이블을 만들고 테두리(border)값을 1이상으로 주면 별루 멋지지 않은 회색테두리가 생기게 됩니다.^^; 물론 이 테두리가 보기 싫다면 border 값을 0 으로 주면 테두리가 아예 생기지 않지만 테두리가 필요한 경우에는 위에 소스처럼 테두리의 색상값 속성을 넣어 조절해주면 간단하게 보기 좋은 테두리를 만들 수 있습니다. ^^ 자세한 설명은 테이블 태그 부분 ☜클릭 을 읽어보시면 알 수 있습니다. ^^
음...그리고 소스 중간쯤에 보면 이미지태그를 이용해서 이미지를 넣어주었죠? right.htm 페이지를 보면 알 수 있듯이.. 사이즈에 맞게 이미지를 넣어준 겁니다.
※ 참고 - 특수문자 ☜이건 텍스트 한 칸 띄워주는 역활을 합니다. 줄바꾸기 아님..
자세한 건 특수문자 태그 강좌를 참고하세요 ..^^*
다음 페이지에서 계속........ ☞ 고고~고~!
신고
"님의 댓글"
이 댓글을 신고하시겠습니까?
