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

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

오작교 18221

0
앞 장에서는 화면 분할을 해봤죠? ^^ 그럼 이제 분할한 화면의 내용을 채워보도록 하겠습니다.  내용을 만들기 앞서 빠른 이해를 돕기위해 아래 그림을 봐주시기 바랍니다. 
그림이 영 허접이라..-_-;; 그림은 조금만 보시고  원리만 이해하시길 바랍겠습니다. ^^; 왼쪽에 보이는 그림은 우리가 좀 전에 나눴던 웹페이지입니다. 그림을 보면 알 수 있듯이 2분할 웹페이지를 만들려면 총 3개의 웹페이지가 필요하게 됩니다. 
 
 
 
그러다면 내용을 만들려면 main.htm 에 태그를 써서 만드는게 아니라 left.htm right.htm 웹페이지를 새로 만들어 겠죠? ^^ 

 자~ 그럼 오른쪽의 그림을 다시 보실까요? ^^ 
이제부터 우리가 만들어볼 메인페이지인데요...  어때요? 이해 되시죠? ^^ 



 
 



 - left.htm 파일 만들기 (웹페이지 보기 / 소스보기)
 
  메모장 준비되셨죠? ^^ 그럼 지금부터 left.htm 파일을 만들어 보도록 하겠습니다. ^^
 ⓐ 헤드부분

소 스 설 명
 <head>
 <style>
 <!--
 td { font-size:9pt; font-family:돋움; }
 A:link { color:#373737;text-decoration:none; } 
 A:visited { color:#373737;text-decoration:none; } 
 A:active { color:#373737;text-decoration:none; } 
 A:hover { color:#373737;text-decoration:none; }
 -->
 </style>
 <title>메뉴</title>
 </head>
 - 헤드부분 시작
 - 스타일시트 시작부분
 - 주석태그 시작
 - td태그 { 글자크기:5pt; 글꼴 : 돋움;}
 - 링크태그에 대한 속성지정
 ...
 ...
 ...
 - 주석태그 끝
 - 스타일시트 끝부분
 - 타이틀 태그  
 - 헤드부분 끝

 <head></head> 태그 안에 들어가는 부분입니다. <head></head> 태그는 사람으로 말하면 두뇌와 같은 존재로서, 일반적으로 그 안에는 웹페이지에서 표면적으로 보이지 않는 자바스크립트나 스타일시트, 메타태그, 타이틀태그 등 여러가지 것들이 들어가죠. ^^  저어기~~ 위에 소스에 있는걸 간단하게 설명해보면.. head 태그 시작하자 마자 스타일시트가 있죠? 스타일시트가 뭔지는 태그매니아 스타일시트 특강 한번 읽어보시면 이해가 되실거구요.. ^^  td 태그 안에 있는 글자에 대한 스타일을 지정해준 거죠. 그리고 우리가 링크태그를 하면 파란 색과 함께 밑줄이 생기자나요? 이걸 설정해주는 것입니다. 밑줄이 없거나 줄이 글자위에 생기게 할 수도 있고 또한 색상도 원하는 바꿀 수 있습니다. 
 그 다음에 title 태그 있네요.. ^^ 타이틀태그는 뭔줄 아시죠? ^^ 브라우저제목표시줄에 나타날 글자를 지정해주는 거구요... 음..이정도 하면 헤드부분은 끝난건가요? ^^

공유
0

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

취소 댓글 등록

신고

"님의 댓글"

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

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 291055 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 350013 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 294658 +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 25279 0
63 HTML
normal
오작교 15.08.30.12:19 52881 0
62 HTML
file
오작교 12.03.08.13:51 36036 0
61 HTML
normal
오작교 11.06.03.10:44 40858 0
60 HTML
normal
오작교 11.01.25.10:27 36320 0
59 HTML
normal
오작교 11.01.24.10:39 37206 0
58 HTML
normal
오작교 10.05.25.23:34 49029 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 20222 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 36523 0
47 HTML
normal
오작교 07.10.25.12:42 41831 0