프레임 나누기 강좌(frame)-(1.프레임에 관련된 이해)


이번에 배울내용은 프레임을 나누는 강좌입니다.

보통 웹써핑을 하다보면 프레임이 나누어진 홈페이지들을

많이 보게됩니다.

흠...잘모르시겠다구요?

보통 프레임은 다음과 같이 나누어져 있습니다.

이해하기 쉽게 간단한 예를 들어 설명하겠습니다.

메뉴부분(menu)

내용부분(content)

위의 예제는 프레임이 상단의 메뉴부분과 하단의 내용부분으로 나누어져 있습니다.

메뉴부분에서 메뉴를 클릭하면 내용부분이 바뀌게 됩니다.

보통 메뉴부분은 안 바뀌고 그 자리에 위치합니다.

그리고 다음과 같은 프레임으로 구성된 홈페이지도 많습니다.

내용부분(content)

왼쪽프레임이 메뉴부분으로 메뉴를 클릭하면 오른쪽 내용부분의 프레임의 내용이 바뀌게 됩니다.

그런데 보통은 위의 두가지 형태보다 더 복잡한 형태로 프레임을 나누어서 사용하는 사이트들이 많습니다.

다음 사이트를 보실까요?http://www.3r.co.kr이라는 사이트입니다...

별다른 사이트는 아니고 프레임예제로 사용할려고 그져 지나가다 본 사이트입니다.

프레임이 4개로 나누어져 있습니다.

사용자 삽입 이미지

이제 프레임에 대해서 조금 아시겠죠?

그럼 이런 의문이 생기실겁니다. 굳이 프레임을 쓸필요가 있나~

굳이 위의 사이트 프레임처럼 몇 개로 나눌필요는 없습니다.

메뉴의 위치와 컨텐츠의 위치에 따라서 가장 효과적인 방법으로

홈페이지를 구성하면 됩니다.

그러기 위한 하나의 강좌이지요

 

 

프레임 나누기 강좌(frame)-(2.프레임태그의 여러 가지 속성들)


간단하게 프레임을 나누는 소스는 다음과 같습니다.

 

프레임을 나누는 페이지는 특이하게<body>태그가 없습니다.없죠^-^

그리고 위의 소스는 두 개의 문서를 불러옵니다.


프레임을 나누고 싶은 개수 만큼 frameset안에 frame을 추가해 주면 되고

그안에 여러 가지 속성들이 들어갑니다.


먼저
<frameset>의 속성을 정리해 보겠습니다.

 

Frameset
rows
수평분할

Frameset rows="20%,*"

화면을 상하 두개로 나누며
상단은 전체화면의 20% 그리고 나머지 부분(그러니깐 80%죠)을 하단으로 한다는 소스입니다.

cols
수직분할

Frameset cols="150,*"

화면을 좌우 두개로 나누며
좌측은 100픽셀 우측을 나머지 부분으로 한다는 소스입니다.

border
프레임 테두리의 굵기

Frameset border=0

화면분할된 프레임 테두리를 보이지 않게 0픽셀로 지정해주었습니다. 대부분 프레임의 테두리는 보이지 않습니다

 

row 라는 속성은 화면을 가로방향으로 나눌때 사용합니다.

(상,하로 분할됨) 그리고 pixel과 %, * 라는 값을 이용합니다.


cols라는 속성은 화면을 세로방향으로 나눌때 사용합니다.

(좌,우 로 분할됨) 마찬가지로 pixel값과 %값 그리고 *를 이용합니다.

그럼<frame>의 속성을 정리해볼까요?

 

 

Frame
src
프레임에 불러올 파일경로

frame src=menu.html

해당 프레임에 menu.htm파일을 불러옵니다.

scrolling
yes

frame src=파일경로 scrolling="yes"

프레임에 스크롤바를 보여줍니다.

no

frame src=파일경로 scrolling="no"

프레임에 스크롤바를 보여주지 않습니다.

auto

frame src=파일경로scrolling="auto"

프레임보다 문서가 클경우 스크롤바를 자동으로 보여줍니다

marginheight
프레임 높이여백

frame src=파일경로 marginheight="20"

프레임 높이여백을 20픽셀로 지정합니다.

maginwidth
프레임 너비여백

frame src=파일경로 maginwidth="10"

프레임 너비여백을 10필셀로 지정합니다.

name

임의의 이름

frame name="rose"

프레임의 이름을 rose라고 지정합니다.

noresize

 프레임 크기고정

frame src=파일경로 noresize

프레임의 크기를 고정시켜줍니다

 

src 라는 속성은
각각의 프레임에 보여줄 문서의 주소를 지정해줍니다.
보통 왼쪽 메뉴부분의 프레임에는 메뉴파일의 경로를 지정해주면 됩니다.ㅡㅡ;; 아시겠죠...
그리고 메인부분을 나타낼 프레임에는 메인을 표현한 파일을 지정해줍니다.

scrolling 이라는 속성은
스크롤바를 사용할것지 말건지 결정해주는 명령어 입니다
yes | no | auto (스크롤바 있기ㅣ없기ㅣ자동)

marginwidth 이라는 속성은
프레임 좌우 경계선과 그 안의 내용 사이의 여백을 pixel 단위로 지정해주는 명령어 입니다.

marginheight 라는 속성은
프레임의 상하 경계선과 그 안의 내용 사이의 여백을 pixel단위로 정해주는 명령어 입니다.

 

name 이라는 속성은
프레임의 이름을 지정해주는 속성입니다.
이름을 지정해줘야지 나중에 그 이름에 맞는 위치로 이동할 수 있습니다.
이름은 기억하기 쉬운 이름으로 지정해줍니다.

그리고 noresize라는 속성은

프레임의 크기를 보는 사람이 마음대로 조절하지 못하도록 고정시켜주는 명령어입니다.

 

프레임 나누기 강좌(frame)-(3.상하 2단 프레임 만들기)


우리가 만들어볼상하 2단프레임은 다음과 같습니다.^-^

 

 

a.html

 

b.html

 

 

 

 

소스보기

아래 부분을 복사해서쓰세요

 * <html> 부분에 x빼고 복사해서 사용하세요^-^

 

 

 

장미가족 보충설명

우선은 위의 상하2단프레임을 만들기 위해서는 위의 소스에 해당하는 html문서와

그리고 a.html, b.html문서가 필요합니다. 총 3개가 필요한거죠~

a.html에 해당하는 문서는 보통은 메뉴부분에 해당합니다.

따라서 거기에 알맞게 작성해주시구요

b.html부분은 메인부분에 해당하는데 홈페이지내용에 맞게 작성해주시면 됩니다.

위의 소스
FRAMESETrows="130,*"framespacing="0" border="0" frameborder="0"

에서 rows="130,*" 라는 말은 상단은 130픽셀, 그리고하단은 나머지픽셀이라는 뜻입니다.

여러분은 여러분의 홈페이지에 맞게 위의 크기를 조절하세요 %로 설정해도 됩니다.

그리고 또 위의 소스에서 a.html이 나타나는 프레임의 name을 menu, 그리고 b.html이 나타나는 프레임의 name을 main이라고 지정해주었습니다. 쓰임새를 설명하면,

a.html을 소스를 다음과 같이 작성할 수 있습니다.

 

사용자 삽입 이미지

위와 같이 작성해주면 프레임강좌나 폼강좌부분을 클릭하면 타겟이 main이므로 name="main"에 해당하는 하단프레임에 그 내용일 나타납니다.

 

 

프레임 나누기 강좌(frame)-(4. 좌우 2단 프레임 만들기)


우리가 만들어볼 좌우2단프레임은 다음과 같습니다.^-^

 

 

a.html

 

b.html

 

 

 

 

소스보기

아래 부분을 복사해서쓰세요

 * <html> 부분에 x빼고 복사해서 사용하세요^-^

 

 

 

장미가족 보충설명

위의 좌우2단프레임을 만들기 위해서는 위의 소스에 해당하는 html문서와

그리고 a.html, b.html문서가 필요합니다. 총 3개가 필요한거죠~

이제는 아시겠죠

a.html에 해당하는 문서는 보통은 메뉴부분에 해당합니다.

따라서 거기에 알맞게 작성해주시구요

b.html부분은 메인부분에 해당하는데 홈페이지내용에 맞게 작성해주시면 됩니다.

위의 소스
FRAMESETcols="150,*"framespacing="0" border="0" frameborder="0"

에서 cows="150,*" 라는 말은 왼쪽프레임은 150픽셀,

그리고 오른쪽프레임은 나머지픽셀이라는 뜻입니다.

여러분은 여러분의 홈페이지에 맞게 위의 크기를 조절하세요 %로 설정해도 됩니다.

그리고 또 위의 소스에서 a.html이 나타나는 프레임의 name을 menu, 그리고 b.html이 나타나는 프레임의 name을 main이라고 지정해주었습니다. 메뉴부분에서 타겟을 main으로 지정해주면 각메뉴에 해당하는 내용이 오른쪽프레임에 나타납니다.

아시죠?^-^

 

 

프레임 나누기 강좌(frame)-(5. 상하(좌우) 3단 프레임 만들기)


우리가 만들어볼상하(좌우) 3단프레임은 다음과 같습니다.^-^

 

 

top.html

 

menu.html

 

main.html

 

 

 

소스보기

아래 부분을 복사해서쓰세요

 * <html> 부분에 x빼고 복사해서 사용하세요^-^

 

 

 

장미가족 보충설명

상하(좌우) 3단프레임을 만들기 위해서는 위의 소스에 해당하는 index.html문서와

그리고 상단의 top.html, 하단 메뉴의 menu.html 하단메인부분을 나타낼 main.html 문서가 필요합니다. 총 4개가 필요한거죠~

앞에 2단프레임과 틀린점은 <frameset>이 두 개라는 것입니다.

위의 프레임을 만들기 위해서 먼저 상하로 프레임을 나누어 줍니다.

그럼 다음과 같이 되겠죠?

 

 

그런다음 하단프레임을 다시 좌우로 나누어 주어야 합니다. cols를 이용해서
하단을 좌우로 나누어줍니다.

그럼 다음과 같이 되겠지요?

 

 

물론 rows나 cols의 값을 %로 지정해줘도 됩니다.ex) rows="30%, 70%"

위의 소스를 인터넷화면에서 실행시켜보면 프레임을 나눈 흔적이 보이지 않습니다.

그건 border값을 0으로 지정해주었기 때문입니다.

또한 scrolling값을 no로 지정해주었기 때문에 스크롤바도 보이지 않습니다.

그리고 main.html에 해당하는 부분의 프레임의 name을 main으로 지정해주었습니다.

메뉴부분에서 각 메뉴의 target="main"으로 지정해주면 각 메뉴의 내용이

 main.html에 해당하는 프레임에 나타납니다.

신고
Posted by The.민군