프레임 분할시 테두리를 다양한 색상이나 이미지로 표현하기

<center> <table border cellspacing="0" width=700 bordercolor="orange" bgcolor="#EBFDFE" style="line-height:130%;font-size:9pt;"> <tr><td bgcolor=darkblue valign=center align="center" style="line-height:70%;"> 프레임 테두리를 다양한 색상으로 표현하기 </td><tr> <td> 일반적으로 프레임 분할시 프레임 속성을 결정할때 프레임의 테두리선 처리를 함에 있어 frameborder 속성으로 테두리를 없애거나 두께를 조절해 쓰고 있다. 본 프레임 팁 강좌는 프레임의 테두리를 원하는 색상이나 이미지로 보다 다양한 형태로 표현해 보는 방법에 대해서 배워 보도록 한다. <h5>&프레임 분할 예시</h5> <center> <TABLE border width="95%" cellspacing=1 cellpadding=2 bordercolor="#CC6600" style="font-size:9pt; line-height:130%;"><TR> <TD bgcolor="#ffffcc" style="line-height:150%;"><pre> <html> <head> <title>프레임 테두리 표현</title> </head> <frameset cols="600, 1, 1*" border="0" bordercolor=blue> <frameset rows="100, 1, 300, 1, 1*"> <frame src="borderframe1.html" name="top" noresize scrolling="no" marginwidth="0" marginheight="0"> <frame src="framepage.html" noresize scrolling="no"> <frame src="borderframe2.html" name="middle" noresize scrolling="auto"> <frame src="framepage.html" noresize scrolling="no"> <frame src="borderframe3.html" name="bottom" noresize scrolling="auto"> </frameset> <frame src="framepage.html" noresize scrolling="no"> <frame src="borderframe4.html" name="right" noresize scrolling="no"> <noframes> <body bgcolor="white"> 이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가 필요합니다. </body> </noframes> </frameset> </html> </pre></td><tr> <td align=center bgcolor=gray> *-------------------- 프레임 분할 설정 설명 ------------------------* </td><tr> <td bgcolor=white><pre> <frameset cols="600, 1, 1*" border="0" bordercolor=blue> ☞ 먼저, 프레임을 수직(cols)으로 3개의 프레임으로 분할을 한다. 첫번째 프레임 영역을 600으로 주고 두번째 프레임은 1로 그리고 그 나머지는 세번째 프레임으로 할당했다. 프레임의 테두리를 없애기 위해 border="0" 값으로 주었다. <frameset rows="100, 1, 300, 1, 1*"> ☞ 두번째로 위에서 수직으로 세개로 분할한 상태에서 첫번째 600 영역 프레임내에 다시 수평(rows)으로 다섯부분으로 분할한다 첫번째는 100 크기로, 두번째는 1 크기로, 세번째는 300 크기로 네번째는 1 크기로 그리고 나머지는 다섯번째 프레임으로 분할했다. 이렇게 다섯 부분으로 분할된 프레임에 아래와 같이 각 프레임 마다 해당 문서를 순서대로 배치를 한다. <frame src="borderframe1.html" name="top" noresize scrolling="no" marginwidth="0" marginheight="0"> <frame src="framepage.html" noresize scrolling="no"> <frame src="borderframe2.html" name="middle" noresize scrolling="auto"> <frame src="framepage.html" noresize scrolling="no"> <frame src="borderframe3.html" name="bottom" noresize scrolling="auto"> </frameset> ☞ 600 영역에 프레임 분할을 종료한다. 이제 맨 처음 수직으로 분할한 프레임에서 남은 프레임 1 영역과 그 나머지 프레임 부분에 대해 문서를 배치한다. <frame src="framepage.html" noresize scrolling="no"> ☞ 1 영역에 해당문서를 배치한다. <frame src="borderframe4.html" name="right" noresize scrolling="no"> ☞ 600 과 1로 분할한 나머지 부분에 해당 문서를 배치한다 ※ 아래 <noframes> ~ </noframes> 부분은 프레임을 지원하지 않는 브라우져에 메세지를 보여주기 위한 것이다. 프레임을 지원하지 않는 브라우져에서는 프레임이 보여지지 않으므로 알려주는 것인데 정상적으로 지원되는 브라우져에서는 아래 부분의 메세지는 보이지 않는다. <noframes> <body bgcolor="white"> 이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가 필요합니다. </body> </noframes> </frameset> ☞ 프레임 분할을 종료한다. <hr color=red width=100% height=3> <div style="font-size:15pt; font-weight:600; font-family:'Arial Black','Times New Roman'; color:cornflowerblue;"> ★ Key point ★</div> 위에서 키포인트는 바로 프레임 영역을 1로 분할한 부분이다. 1 로 분할된 영역에 배치되는 문서가 바로 border 즉, 테두리 역할을 하게 된다. 프레임 폭을 1로 작게 잡은 후 그안에 들어갈 문서는 빈 페이지로 만들되 백그라운드 색상이나 이미지로 만들어 두면 원하는 테두리 색상이나 이미지로 표현을 할 수가 있는 것이다. 색상이나 이미지를 넣은 웹 페이지를 1 이라는 작은 영역에 넣어주면 그 만큼만 페이지가 보여지게 되므로 테두리 형태로 보여지는 것이다. 프레임 페이지를 테두리로 쓰기 위해 프레임셋팅에는 테두리(border) 값을 0 으로 준다. 테두리용으로 쓸 빈 페이지는 <html> <head><title>프레임 테두리를 위한 페이지</title> </head> <body bgcolor="red"> </body> </html> 이와 같이 간단하게 문서를 만들어 태그안에 background 나 bgcolor 속성을 준다. 이렇게 만들면 원하는 색상의 테두리나 이미지로 프레임 테두리로 표현을 할 수가 있다. 이제 이런 팁을 배웠으니 여러분들의 홈페이지가 한결 깔끔하고 다양한 모양으로 다듬을 수 있을 것이다. </pre></TD><TR> <TD align="center" colspan=2 bgcolor="#D8D8D8"><center> 실제 예제 결과 보기 *☞ <a href="http://flyengel.hihome.com/lecture/borderframe0.htm" target="_self">CLICK !!</a> </td></tr></table> <center>☞ CopyRight ⓒ IRP Cafe by Choi Woo Hwan </td></TR></TABLE>