목록

 - 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>  
 &nbsp;&nbsp; ♡ 드뎌 재원이의 멋진 홈페이지가 오픈했습니다. ^^v<br> 
 <br> 
 &nbsp;&nbsp;&nbsp; 처음 만드는 거라 초 허접이네요...^^; 돌맹이 던지시지 마시고<br> 
 &nbsp;&nbsp;&nbsp; 많은 성원 부탁드리겠습니다.^^ 
 </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 페이지를 보면 알 수 있듯이.. 사이즈에 맞게 이미지를 넣어준 겁니다.  
 ※ 참고 - 특수문자 &nbsp; ☜이건 텍스트 한 칸 띄워주는 역활을 합니다. 줄바꾸기 아님..
자세한 건 특수문자 태그 강좌를 참고하세요 ..^^*
 
 다음 페이지에서 계속........ ☞ 고고~고~! 

이 게시물을