* 욕설, 비방, 광고, 도배질 글은 임의로 삭제됩니다.

[펌 강의]22. 프레임(Frame) 나누기 예제(II)

페이지 정보

써니

본문





size="2">22. 프레임(Frame) 나누기 예제(II)


앞에 있는 프레임 나누기
예제 보다 약간 복잡한 프레임을 다루어보도록 하겠습니다.
그런데 알고 보면 그렇게 어렵지도 않을 겁니다. 우선 프레임에
들어갈 html 파일을 간단히 4개 정도 만들겠습니다.

 

bordercolorlight="black">



top.htm


<html>

<head>

<base target="menu">

<title>여기는 Top</title>

</head>


<body
bgcolor="white" text="black"
link="blue" vlink="purple"
alink="red">


<p>여기는
Top</p>

</body>


</html>


bordercolorlight="black">



left.htm


<html>

<head>

<base target="main">

<title>여기는 left</title>

</head>


<body
bgcolor="white" text="black"
link="blue" vlink="purple"
alink="red">


<p>여기는
left</p>

</body>


</html>


bordercolorlight="black">



bottom.htm


<html>

<head>

<base target="main">

<title>여기는 bottom</title>

</head>


<body
bgcolor="white" text="black"
link="blue" vlink="purple"
alink="red">


<p>여기는
bottom</p>

</body>


</html>


bordercolorlight="black">



main.htm


<html>

<head>

<title>여기는 main</title>

</head>


<body
bgcolor="white" text="black"
link="blue" vlink="purple"
alink="red">


<p>여기는
main</p>

</body>


</html>


1) base target


위에서 보면 전에 설명을
드린 적은 있지만 예로써는 처음 보는 것이 있죠? <base
target="main"> base target을 지정하게 되면
base target을 사용한 html 파일에서 <a href="...">...</a>
와 같이 하이퍼 링크를 사용하게 되면 <a href="..."
target="main">...</a> 과 같은 효과를
나타냅니다. base target을 지정함으로써 하이퍼 링크를
사용할 때마다 target을 지정해줘야 하는 번거로움을 피할
수 있습니다.


2) body tag


복습하는 기분으로 body
tag를 볼까요? body tag안의 속성을 잘 이용하면 페이지
내의 전체적인 글꼴 색상이나 배경색상을 지정할 수 있습니다.
base target과 비슷한 의미라고 해도 될까요?


  • bgcolor - 배경색상을
    지정하는 겁니다. bgcolor="색상" 대신에
    background="배경 이미지"를 사용하면 이미지를
    배경으로 사용할 수 있습니다.

  • text - html 문서
    내에서 사용되는 text(글자)들의 기본 색상을 지정합니다.
    html 문장내에서 <font color="색상">...</font>를
    별도로 사용하지 않으면 기본적으로 여기서 셋팅한
    색상이 글자색으로 나타납니다.

  • link - html 문서상에서
    하이퍼 링크로 처리한 부분의 색상을 나타냅니다.

  • vlink - html 문서상의
    하이퍼 링크 중 클릭한 적이 있는 하이퍼 링크는 여기서
    정한 색상으로 변합니다.

  • alink - html 문서상의
    하이퍼 링크를 클릭하면 클릭하는 순간에 여기서 지정한
    색상으로 변합니다.


위의 예에 있는 body
tag 안에 있는 색상들은 모두 생략해도 위의 예와 똑같이
적용됩니다. 위에 있는 값들이 모두 Default 값이란 이야기입니다.


3) frame1 - top,
menu, main (3 개 html 파일로 구성된 프레임)
size="2">

 

bordercolordark="white" bordercolorlight="black">



frame1.htm


<html>

<head>

<title>프레임 예제 I</title>

</head>


<frameset
rows="17%, 83%" cols="1*"
border="4">

    <frame src="top.htm"
name="header" size="2"> scrolling="no"
marginwidth="10" marginheight="14"
size="2" color="red"> target="menu" size="2">>

    <frameset rows="1*"
cols="20%, 80%">

        <frame
src="left.htm"
size="2" color="blue">name="menu"
scrolling="auto"
marginwidth="10" marginheight="14"
size="2" color="red"> target="main" size="2">>

        <frame
src="main.htm"
size="2" color="blue">name="main" size="2"> scrolling="yes"
marginwidth="10" marginheight="14">

    </frameset>

    <noframes>

    <body bgcolor="white"
text="black" link="blue"
vlink="purple" alink="red">


    <p>

        이
페이지를 보려면, 프레임을 볼 수 있는 브라우저가
필요니다.

    </p>

    </body>


</noframes>

</frameset>

</html>
                           target="_blank">결과보기


어라.. 프레임 안에
왠 body tag??? 요새 많이 사용하는 익스플로어나 넷스케이프
버전에서는 문제가 되지 않지만, 프레임을 지원하지 않는
브라우저를 사용하는 사람들을 위해서 삽입한 겁니다. 이런
경우는 거의 없겠지만, 그래도 혹시 모르니 삽입해 보세요^^*


  • <noframes>...</noframes>
    위에서 설명한 것과 같이 프레임을 지원하지 않는 브라우저를
    사용하는 사람들을 위한 부분입니다.

  • 구성은 맨 처음
    프레임을 상하로 나눕니다.

  • 그 다음 하단 프레임을
    다시 좌우로 나눈 것입니다.

  • top.htm에서 하이퍼
    링크를 사용하면 메뉴 부분에 그 내용이 display 됩니다.

  • menu.htm에서 하이퍼
    링크를 사용하면 main 부분에 그 내용이 display 됩니다.

  • main.htm에서 하이퍼
    링크를 사용하면 자기 자신에 그 내용을 display 합니다.

  • scrolling에서
    auto 라는 옵션이 처음으로 나왔죠? 이것은 no 하고
    하면 내용이 짤리는 한이 있어도 스크롤 바를 보여주지
    않구요. yes라고 하면 내용이 하나도 없어도 스크롤
    바를 보여주죠. auto를 사용하면 내용이 많거나 길
    경우에 스크롤 바가 없다가 짠~ 하고 생겨나는 옵션입니다.


4) frame2 - top,
menu, bottom, main (4개 html 파일로 구성된 프레임)
size="2">

 

bordercolordark="white" bordercolorlight="black">



frame2.htm


<html>

<head>

<title>프레임 예제 II</title>

</head>


<frameset
rows="15%, 68%, 16%" cols="1*"
border="4">

    <frame src="top.htm"
name="header" size="2"> scrolling="no"
marginwidth="10" marginheight="14"
size="2" color="red"> target="menu" size="2">>

    <frameset rows="1*"
cols="21%, 79%">

        <frame
src="left.htm"
size="2" color="blue">name="menu" size="2"> scrolling="auto"
marginwidth="10" marginheight="14"
size="2" color="red"> target="main" size="2">>

        <frame
src="main.htm"
size="2" color="blue">name="main" size="2"> scrolling="yes"
marginwidth="10" marginheight="14">

    </frameset>

    <frame src="bottom.htm"
name="footer" size="2"> scrolling="no"
marginwidth="10" marginheight="14"
size="2" color="red"> target="main" size="2">>

    <noframes>

    <body bgcolor="white"
text="black" link="blue"
vlink="purple" alink="red">


        <p>이
페이지를 보려면, 프레임을 볼 수 있는 브라우저가
필요합니다.</p>

    </body>


</noframes>

</frameset>

                          
target="_blank">결과보기


이번의 예제는 frame1
보다 약간 복잡합니다.


  • 구성은 맨 처음
    프레임을 상하로 3개의 프레임으로 나눕니다.

  • 그 다음 중간의
    프레임을 다시 좌우로 나눈 것입니다. 왼쪽은 메뉴를
    사용하기 위해 만든거죠.

  • top.htm에서 하이퍼
    링크를 사용하면 메뉴 부분에 그 내용이 display 됩니다.

  • menu.htm에서 하이퍼
    링크를 사용하면 main 부분에 그 내용이 display 됩니다.

  • bottom.htm에서
    하이퍼 링크를 사용하면 main 부분에 그 내용이 display
    됩니다.

  • main.htm에서 하이퍼
    링크를 사용하면 자기 자신에 그 내용을 display 합니다.


이렇게
설명하면 너무 어려운가요? <frameset>이란 tag와
<frame> tag 그리고 name과 target만 주의해서 보면
이해할 수 있을 겁니다.

작성일2005-02-24 18:09

라이브카지노님의 댓글

라이브카지노
안녕하세요. 다양한정보 감사합니다. 스포츠토토 먹튀검증 타임스포츠토토 추천드립니다.
https://timespototo.com/스포츠토토
https://online-safer.com/라이브카지노
https://jusobada.com/주소모음
컴퓨터/인터넷 목록
번호 제목 글쓴이 날짜 조회
128 컴퓨터 스크린을 TV로 보는 방법좀 알려주세요 댓글[2] 인기글 제키챤 2005-03-08 5956
127 답변글 컴퓨터 스크린을 TV로 보는 방법좀 알려주세요 댓글[1] 인기글 써니 2005-03-09 5686
126 나만의 홈페이지를 갖자.... APM 설치하기 댓글[1] 인기글 써니 2005-03-08 5781
125 답변글 나만의 홈페이지를 갖자.... APM 설치하기 댓글[2] 인기글 home page 2005-03-14 6214
124 답변글 나만의 홈페이지를 갖자.... APM 설치하기 댓글[1] 인기글 써니 2005-03-15 5458
123 Kernel 32DLL 에 관한 도움 부탁합니다 댓글[1] 인기글 JK 2005-03-07 6729
122 답변글 Kernel 32DLL 에 관한 도움 부탁합니다 댓글[1] 인기글 써니 2005-03-08 5821
121 computer 고쳐주실 분 댓글[1] 인기글 james 2005-03-06 5709
120 이상한 내용의 팝업이 자꾸뜹니다 방법좀... 댓글[5] 인기글 제키챤 2005-03-06 6027
119 로지택mx duo설치시 띡띡띡띡 거리는 잡음문제 아시는분 댓글[1] 인기글 궁금이 2005-03-05 6796
118 도와주시면 감사하겠습니다 댓글[2] 인기글 초보 2005-03-04 5824
117 답변글 도와주시면 감사하겠습니다 댓글[1] 인기글 lee 2005-03-06 6016
116 korean doesn't work 댓글[1] 인기글 sf 2005-03-04 5958
115 답변글 korean doesn't work 댓글[1] 인기글 ^,.^) 2005-03-06 6672
114 [펌 강의] 부록 - META 태그에 대해서.. 댓글[1] 인기글 써니 2005-03-04 5771
113 [펌 강의] 부록 - MARQUEE Tag 이용하기 댓글[1] 인기글 써니 2005-03-04 6529
112 [펌 강의] 부록 - 홈페이지에 음악 넣기 댓글[1] 인기글 써니 2005-03-04 6146
111 [펌 강의] 색살 표 (Color Chart) 댓글[1] 인기글 써니 2005-03-04 5778
110 [펌 강의] 30.Form 예제 (설문양식) 댓글[1] 인기글 써니 2005-03-04 5856
109 정크메일 과 광고전화 막는법 아시는분 도와주세요.. 댓글[1] 인기글 정크 2005-03-02 6140
108 동영상 퍼오는방법 아시는분 ..좀 알켜주세요 댓글[4] 인기글 진실 2005-03-01 5925
107 [펌 강의] 29. 선택목록(List Box or Drop Down Li 댓글[1] 인기글 써니 2005-02-28 6182
106 [펌 강의] 28.텍스트 영역(Text Area) 인기글 써니 2005-02-28 18842
105 [펌 강의] 27.Input Type Form (II) - Check B 댓글[1] 인기글 써니 2005-02-28 7589
104 [펌 강의] 26. Input Type Form (I) - 텍스트, 암호 댓글[15] 인기글 써니 2005-02-28 17360
103 [펌 강의] 25. Form에 대한 개요 인기글 써니 2005-02-28 21103
102 윈도우가 안꺼져요ㅠㅠㅠ 댓글[1] 인기글 경아 2005-02-27 6365
101 답변글 윈도우가 안꺼져요ㅠㅠㅠ 댓글[1] 인기글 써니 2005-02-27 6104
100 써니님, brian님 너무 감사하구요 하나더 여쭤볼께요. 인기글 제키챤 2005-02-24 8246
99 답변글 써니님, brian님 너무 감사하구요 하나더 여쭤볼께요. 댓글[1] 인기글 써니 2005-02-25 5881
게시물 검색
* 게시일 1년씩 검색합니다. '이전검색','다음검색'으로 계속 검색할 수 있습니다.
** 본 게시판의 게시물에 대하여 회사가 법적인 책임을 지지 않습니다.