Internet Link Exchange
Member of the Internet Link Exchange

Frames Tutor- Lesson 3

좀더 쉬운 예제로 돌아 가봅시다.

<FRAMESET COLS="50%,50%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
</FRAMESET>

확인


원한다면 프레임에 그림을 넣을 수도 있습니다. 'examples'라는 폴더 안에 world.gif라는 그림이 있습니다. 작업폴더로 복사를 합시다.

<FRAMESET COLS="50%,50%">
  <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
  <FRAME SRC="terri.html">
</FRAMESET>

확인
HEIGHT & WIDTH 속성을 이미지 태그에 포함하여 연습하는 것이 좋은 방법임을 항상 명심하세요.


그러면 그림을 멋있고 깔끔하게 프레임 해봅시다. 우선 왼쪽 창을 146 pixel 너비로 축소해 봅시다 . 절대치수를 사용하기 때문에 다른 프레임을 탄력적으로 만들어야 합니다

<FRAMESET COLS="146,*">
  <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
  <FRAME SRC="terri.html">
</FRAMESET>

확인


다음에 왼쪽 프레임을 수평의 두 부분으로 분할 하려고 합니다. 맨위쪽 섹션은 162 pixel 높이가 되고, 아래의 섹션은 아무래도 좋습니다. world.gif와 Lisa를 각각 넣어봅시다.

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

확인
보시다시피, 약간의 문제가 생겼군요.


여러분이 보시는 스크롤바는 YES, NO 또는AUTO로 지정을 할 수 있습니다. YES는 필요하건, 불필요하건 간에 창이 스크롤바를 가집니다. NO는 프레임의 내용이 남산만큼 커도 스크롤바가 없어서 보여줄 수 있는 만큼만 보여줍니다. AUTO는 default인데, 스크롤바가 필요하면 나타나고, 그렇지 않으면 없어집니다. 스크롤 바를 없애봅시다.

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

확인


그래도 여전히 문제가 있군요. 이미지가 프레임의 오른편에 있지 않군요. 다음의 두 속성은 여백을 다루고 있습니다. 브라우저는 자동적으로 내용주변에 약간을 빈공간을 줍니다. 미적인 면을 고려하면 필요하겠죠. 이 여백은 MARGINWIDTHMARGINHEIGHT을 사용해서 조절할 수 있습니다. 그것으로 상하좌우 여백을 각각 조절할 수 있습니다. 우리는 그것을 각각 1로 맞춰봅시다. (1이 최소값입니다.)

<FRAMESET COLS="146,*">
  <FRAMESET ROWS="162,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
     MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

확인


이~런~~ 그래도 문제가 있네요. 프레임의 치수는 중앙에서 중앙으로 측정됩니다.

그 최소 가장자리(border) 1에서도 다뤄야 할 것이 있습니다. 기본 가장자리 크기가 6 pixel이기 때문에, 각각의 이미지 치수에 8을 더해야 합니다(6의 절반, 더하기 1, 곱하기 2). 복잡하다면, 창크기를 얻기 위해 각각의 그림에 8만 더해주세요.

<FRAMESET COLS="154,*">
  <FRAMESET ROWS="170,*">
    <FRAME SRC="world.gif" WIDTH=146 HEIGHT=162 SCROLLING=NO
     MARGINWIDTH=1 MARGINHEIGHT=1>
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
</FRAMESET>

확인
이렇게 하면 창에서 그림을 완벽하게 보여 줄 수 있습니다. 아니! 적어도 근접하게 짜집기 되겠죠. 한 방향 또는 여러 방향으로 절단된 프레임에서 그림을 본적이 있습니까? 절대 치수를 사용한다면, 탄력적인 프레임을 따르고... 프레임 치수를 구하기 위해, 그림 크기에 8을 더하면, (세상에나~~) 거의 모든 사람에게 멋있게 보일 겁니다.  *

<--BACK        NEXT-->

Introduction Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7
PROFESSIONAL WEB DESIGN