앞 장에서는 화면 분할을 해봤죠? ^^ 그럼
이제 분할한 화면의 내용을 채워보도록
하겠습니다. 내용을 만들기 앞서 빠른 이해를 돕기위해
아래 그림을 봐주시기 바랍니다.
 그림이
영 허접이라..-_-;; 그림은 조금만 보시고
원리만 이해하시길 바랍겠습니다. ^^; 왼쪽에
보이는 그림은 우리가 좀 전에 나눴던
웹페이지입니다. 그림을 보면 알 수 있듯이 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 태그 있네요.. ^^ 타이틀태그는
뭔줄 아시죠? ^^ 브라우저제목표시줄에 나타날
글자를 지정해주는 거구요... 음..이정도 하면
헤드부분은 끝난건가요? ^^
|
