• 돌아가기
  • 아래로
  • 위로
  • 목록
  • 댓글
HTML

홈페이지를 만들어 보자 (템플릿 -5)

오작교 17866

0

 - 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; ☜이건 텍스트 한 칸 띄워주는 역활을 합니다. 줄바꾸기 아님..
자세한 건 특수문자 태그 강좌를 참고하세요 ..^^*
 
 다음 페이지에서 계속........ ☞ 고고~고~! 

공유
0

댓글 쓰기 권한이 없습니다. 로그인

취소 댓글 등록

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 291066 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 350023 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 294663 +14
66 HTML
normal
오작교 15.09.17.08:58 116429 0
65 HTML
normal
오작교 15.09.13.21:38 21694 0
64 HTML
normal
오작교 15.09.13.21:30 25280 0
63 HTML
normal
오작교 15.08.30.12:19 52884 0
62 HTML
file
오작교 12.03.08.13:51 36038 0
61 HTML
normal
오작교 11.06.03.10:44 40860 0
60 HTML
normal
오작교 11.01.25.10:27 36322 0
59 HTML
normal
오작교 11.01.24.10:39 37207 0
58 HTML
normal
오작교 10.05.25.23:34 49031 0
57 HTML
normal
오작교 09.04.30.10:02 25902 0
56 HTML
normal
오작교 09.04.17.01:06 69291 0
55 HTML
normal
오작교 08.09.01.16:06 38444 0
54 HTML
normal
오작교 08.08.20.10:46 19444 0
53 HTML
normal
오작교 08.06.17.16:51 21267 0
52 HTML
normal
오작교 08.06.17.16:47 46431 0
51 HTML
normal
오작교 08.02.23.12:25 20226 0
50 HTML
normal
오작교 08.02.23.12:19 32312 0
49 HTML
normal
오작교 08.02.23.11:42 30067 0
48 HTML
normal
오작교 08.01.08.16:02 36526 0
47 HTML
normal
오작교 07.10.25.12:42 41833 0