iframe 스크롤 색상 바꾸기 예제

첫번째 HTML의 TAG는

------------------------------------------------------------------------------

<HTML>
<HEAD>
<TITLE> iFrame 사용한 페이지 </TITLE>
</HEAD>

</BODY>
</HTML>
-------------------------------------------------------------------------------

와 같고.

위의 붉은색으로 표시된 부분이 iFrame 테그와 그 속성 지정 테그들.

다른 부분은 학생들마다 다를수 밖에 없을 듯.

width : iFrame의 좌우 넓이

height : 상하 높이

frameborder : iframe의 테두리 보더 두께

id : iframe의 프로그래밍을 위한 ID

name : iframe의 target 지정을 위한 이름

marginwidth, marginheight : iFrame 내부에 컨텐츠와 프레임보더의 거리

Scrolling : 스크롤바가 있고 없고를 지정하는 속성. auto는 컨텐츠의 내용에 따라 있다없다를 자동으로 결정. yes는 늘 있고. no는 절대 안생김.

src : iFrame에 링크걸릴 파일위치/파일명 또는 URL

iFrame 내부에 링크걸린 content.html이란 HTML 파일은

아래와 같이 코딩하면 됨.

--------------------------------------------------------------------------------

<HTML>
<HEAD>
<TITLE> iFrame에 포함된 페이지</TITLE>
</HEAD>

<STYLE TYPE='text/css'>
body { background-attachment: fixed;
background-image: url(images/bg_gallery.gif);
background-repeat: no-repeat;
background-position: 50% 50%;

scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #EFEFEF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #EFEFEF;
scrollbar-darkshadow-color: #EFEFEF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #aaaaaa}
</style>

</BODY>
</HTML>

--------------------------------------------------------------------------------

파란색으로 표시된 부분은 페이지의 전반적인 스타일을 지정하는 스타일시트이며

의미는 다음과 같다.

background-attachment: fixed; -> 백그라운드 이미지가 고정된 위치에 배치되며 스크롤을 내려도 움직이지 않음.
background-image: url(images/bg_gallery.gif); -> 백그라운드 이미지의 파일위치/파일명으로 링크를 검.
background-repeat: no-repeat; -> 백그라운드 이미지가 타일식 배치가 아니라 한번만 배치됨.
background-position: 50% 50%; -> 백그라운드 이미지의 위치 퍼센테이지.

scrollbar-face-color: #FFFFFF; -> 스크롤바의 바닥 색상
scrollbar-shadow-color: #EFEFEF; -> 스크롤바의 우측과 하단에 그림자 부분 색상
scrollbar-highlight-color: #FFFFFF; -> 스크롤바의 상단과 좌측에 밝은 부분 색상
scrollbar-3dlight-color: #EFEFEF; -> 스크롤바의 3차원객체의 밝은 부분 색상
scrollbar-darkshadow-color: #EFEFEF; -> 스크롤바의 3차원객체의 어두운 부분 색상
scrollbar-track-color: #FFFFFF; -> 스크롤바의 트랙 색상
scrollbar-arrow-color: #aaaaaa; -> 스크롤바 상단과 하단의 화살표 색상