Internet Link Exchange
Member of the Internet Link Exchange

Frames Tutor- Lesson 2

<FRAMESET> 태그는 항상 분할 합니다. 항상 창을 나누죠. 그것은 어떻게 그것을 나누는지에 대해 지정합니다. 그러나, 기억하세요. 항상 나누고 싶을 때는 <FRAMESET>을 사용하세요.
2개 이상 나눌 수 있을까요? 그렇습니다. 그러나 각 페이지의 각 부분을 명확히 지정하지 않으면, 브라우저는 혼란스럽겠죠?

<FRAMESET COLS="20%,20%,20%,20%,20%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAME SRC="kim.html">
  <FRAME SRC="tina.html">
  <FRAME SRC="shannon.html">
</FRAMESET>

확인


또 프레임을 각각 다른 크기로도 나눌수가 있습니다. 하지만 계산은 정확히 하세요. 그렇지 않으면 브라우저는 자기의 마음대로 결정합니다.

<FRAMESET COLS="10%,20%,30%,15%,25%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAME SRC="kim.html">
  <FRAME SRC="tina.html">
  <FRAME SRC="shannon.html">
</FRAMESET>

확인


만약 우리가 COLS 대신 ROWS로 지정해버리면 완전히 다른 결과를 얻습니다.

<FRAMESET ROWS="10%,20%,30%,15%,25%">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAME SRC="kim.html">
  <FRAME SRC="tina.html">
  <FRAME SRC="shannon.html">
</FRAMESET>

확인


반반씩 2개의 컬럼으로 나눈 프레임으로 다시 가봅시다.

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

확인


50% 대신 50 픽셀로 지정할 수도 있습니다. 그리고 숫자 대신 *를 사용할 수도 있습니다. *는 무엇이 남았는지를 의미합니다.

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

확인
여기에 핵심이 있습니다... 왼쪽, 오른쪽에 100 픽셀의 프레임을 각각 만든다고 합시다. 800x600 스크린의 해상도를 사용하고 있기 때문에, 세번째와 중간 지역에 600 픽셀을 만듭니다. 여러분에게는 모든 것이 멋있게 보입니다. 내 화면은 640x480으로 설정되어 있습니다. 당신의 페이지에 설정해 놓은 100 픽셀 넓이의 프레임은 내 스크린에서는 80 픽셀 넓이입니다. 여러분이 절대치수를 <FRAMESET> 태그에 사용하면, 항상 적어도 하나 이상의 *을 탄력적인 프레임으로 가지게 된다. 이런 식으로 하면, 모든 것이 모두에게 보기가 좋을 것이고 이땅에 다시 평화가 올 것입니다.

이것이 시간을 내어 관심을 끌고자 했던 프레임의 일반적인 문제의 원인입니다. 일반적인 프레임의 레이아웃은 이러한 왼쪽에 좁은 창을, 오른쪽에는 더 큰 주요한 창을 가지는 것이다. 여기에 문제가 있다.... 만약 %를 사용해서 창을 분할 했다면, (<FRAMESET COLS="15%,85%">와 같이) 아마도 모든 것이 여러분에게 멋있게 보일 겁니다. 그러나... 다른 해상도의 화면을 가지고 있는 어떤 사람에게는 이렇게 보일 겁니다.

이런 현상이 발생하는 이유는 왼쪽 창을 15%가 되도록 지정했기 때문입니다. 무엇의 15%일까요? 수직해상도가 어떠하건 그 중의 15%. 왼쪽 창이 다른 사람들에게는 약간 다르게 보인다는 것을 의미합니다. 어떻게 교정할까요? 질문을 해줘서 감사하군요... 왼쪽 창에다 단지 절대치수를 사용하고, 오른쪽 창을 탄력적으로 만들어 주면 되겠죠? (<FRAMESET COLS="120,*">와 같이). 야호~~. 문제가 해결되었네요.

필요한 것보다 약간 더 크게 절대치수를 잡아주는 것도 좋은 생각입니다. 왼쪽 창에 숨쉴만한 공간을 약간 더 줍시다. 예를들면, 만약 100 픽셀이 좋지만, 갑갑하다면, 창을 120이나 125 픽셀로 만듭시다.

서로 다른 해상도에서 레이아웃의 깨짐을 방지하기 위해 작고, 멋진 Quickres라고 불리는 MS PowerToy 중의 프로그램을 사용하는 것도 무난합니다.


하나 이상의 여분의 프레임을 가질 수 있고, 그들 사이의 크기관계도 지정해 줄 수 있습니다.

<FRAMESET COLS="50,*,2*">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAME SRC="kim.html">
</FRAMESET>

확인
이것을 다른 말로 표현하면 : 3개의 프레임을 만들어라. 첫번째 것을 50픽셀의 너비로 만들어라. 나머지는 2와 3 프레임으로 나누어라. 그러나 세번째 프레임을 두번째 프레임의 2개로 만들어라. 첫번째 프레임에 리사를 넣고, 테리를 두번째 프레임에, Kim을 세번째 프레임에 넣어라.

모든 것이 순차적으로 이루어진다는 것을 명심해야 합니다. 첫째 프<FRAME><FRAMESET> 태그의 첫번째 크기 속성에 따라 보여지고 (50/lisa), 두번째 프레임은 두번째 크기 속성에 따라서, (*/terri) 그리고 세번째 프레임은 세번째 크기 속성에 의해(2*/kim) 각각 보여집니다. 골치가 아플거라는 것은 압니다. 확실히 그렇죠. 그러나 매우 중요하여 다시 한번 강조를 하는 겁니다.


Kim을 수평으로 나누고 싶으면 어떻게 할까요? 무언가를 분할하고 싶으면, <FRAMESET> 태그를 사용해야 한다고 말했던 것을 기억하세요. 우선 Kim을 <FRAMESET> 태그로 바꿔줍시다.

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

여기서 우리는 브라우저에게 다음과 같이 말했습니다 : 3개의 브라우저를 만들어라. 처음의 것을 50 픽셀 너비로 만들고 나머지는 2 프레임과 3프레임으로 나누되 3프레임을 2프레임의 두배가 되게 하라. terri를 두번째 프레임에 두고, 세번째 프레임은 우리가 더 나누어야 한다. 이제는 세번째 프레임을 어떻게 분할해야 할지를 지정해야 한다.


그것을 수평으로 절반 나눌 겁니다.

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


그리고 Kim을 위로, Tina를 아래로 놓겠습니다. 그게 그거죠.

<FRAMESET COLS="50,*,2*">
  <FRAME SRC="lisa.html">
  <FRAME SRC="terri.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="kim.html">
    <FRAME SRC="tina.html">
  </FRAMESET>
</FRAMESET>

확인


그것을 다시 한번 해보면 재미있을 것 같네요. 수평으로 Lisa를 3개의 섹션으로 나눠봅시다. 꼭대기창은 50 펙셀의 높이가 필요합니다. 나머지 2개는 똑같이 분할할 수 있습니다. 세개 모두에 Lisa를 넣어봅시다. 하나의 큰덩어리에 모든 변화가 있습니다.

<FRAMESET COLS="50,*,2*">
  <FRAMESET ROWS="50,*,*">
    <FRAME SRC="lisa.html">
    <FRAME SRC="lisa.html">
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="kim.html">
    <FRAME SRC="tina.html">
  </FRAMESET>
</FRAMESET>

확인


멋있게 안보일거라는 것은 저도 압니다. 실제로 한페이지가 그렇게 많이 나눠지면, 매우 지저분하게 보이죠. 그러므로 3개 이상의 프레임을 사용하지 않는 것이 좋습니다.

이제는 프레임을 지원하지 못하는 브라우저를 가진 불쌍한 사람들을 생각해 줄 시간이군요. 대부분의 사람들이 프레임을 볼 수 있지만, 골동품으로 웹을 여행하는 몇몇 방랑자들이 있습니다. 이러한 불우한 이웃(?)을 도와주시려면, 메인 페이지의 NoFrames에 다음과 같이 써주시면 됩니다.

<FRAMESET COLS="50,*,2*">
  <FRAMESET ROWS="50,*,*">
    <FRAME SRC="lisa.html">
    <FRAME SRC="lisa.html">
    <FRAME SRC="lisa.html">
  </FRAMESET>
  <FRAME SRC="terri.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="kim.html">
    <FRAME SRC="tina.html">
  </FRAMESET>
</FRAMESET>
<NOFRAMES>
<BODY>
프레임이 지원되지 않는 페이지는 여기 아래에 두세요. 어떤 사람들이 오래된
브라우저를 사용한다면, 프레임은 보이지 않고 이 글자들만 보일겁니다.
프레임을 지원하는 브라우저는 <NOFRAMES> 태그 사이에 있는 것을
무시합니다. 그럼 당신은 아래와 같은 질문을 하실 겁니다.
모든 페이지에 이렇게 쓰야합니까? 그럴겁니다.
얼마나 많은 사람들이 이렇게 하지않으면, 당황할까요? 극히 소수겠죠.
제가 걱정해야 한다고 생각합니까? 아니올시다.
당신은 걱정합니까? 아니올시다.
왜 이것을 안내서에 넣었죠? 그래도 주요한 특징이니까요.
적어도 알아두시라는 겁니다.
당신은 항상 이렇게 멋있습니까? 물론입죠.
</BODY>
</NOFRAMES>

<--BACK        NEXT-->

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