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

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

오작교 17832

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
검색어 : 202209
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 290255 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 349257 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 293883 +14
300
normal
오작교 23.12.10.09:32 14463 0
299 Script
normal
오작교 23.12.10.09:29 19756 0
298 CSS
normal
오작교 21.01.09.14:18 40692 0
297 HTML
normal
오작교 15.09.17.08:58 116292 0
296 HTML
normal
오작교 15.09.13.21:38 21567 0
295 HTML
normal
오작교 15.09.13.21:30 25146 0
294 HTML
normal
오작교 15.08.30.12:19 52761 0
293 Script
normal
오작교 15.05.12.14:06 21140 0
292 HTML
file
오작교 12.03.08.13:51 35917 0
291 HTML
normal
오작교 11.06.03.10:44 40731 0
290 CSS
normal
오작교 11.06.03.10:29 70624 0
289 Script
normal
오작교 11.03.22.11:19 43439 0
288 Script
normal
오작교 11.03.22.11:15 38197 0
287 Script
normal
오작교 11.03.22.11:07 37090 0
286 HTML
normal
오작교 11.01.25.10:27 36183 0
285 CSS
normal
오작교 11.01.24.10:40 35356 0
284 HTML
normal
오작교 11.01.24.10:39 37066 0
283 Script
normal
오작교 11.01.24.10:34 38091 0
282 CSS
normal
오작교 11.01.24.10:31 37714 0
281 CSS
normal
오작교 11.01.24.10:27 36185 0