HTML 5단계 - 프레임(frame) 1탄

안녕하세요.

HTML 5단계 프레임(frame) 1탄 시간이 왔습니다.

저번 시간에는 링크를 알아봤는데요 혹시나 잊지는 않으셨겠죠?~^^;

오늘도 화이팅하며, 부담없이 봐주시면 됩니다.~

자 그럼 HTML 5단계 프레임(frame) 1탄 시작해볼께요~

 

▣ HTML 프레임

 

프레임(frame)은 하나의 웹브라우저 화면에 여러개의 HTML 문서를 표시할때 주로 사용되고 있습니다.

또한 주로 네비게이션이나 컨텐츠 부분을 따로 분리하여 관리하기 위해서 사용하는데요.

프레임을 사용하기 위해서는 프레임을 정의하는 문서와 그리고 프레임에 불러올 문서가 있어야 되고요. 

창을 좌우로 나누거나 창을 상하단으로 나눌때도 사용합니다.

그리고 프레임을 정의하기 위해서는 <frameset> 태크와 <frame> 태그가 반듯이 필요해요

 

자 그럼 <frameset> 태크와 <frame>태크에 대해서 먼저 알야볼까요?~

 

1. frameset

<frameset> 태그는 문서를 어떻게 나눌것인지를 정의하는 부분을 담당하고 있습니다.

가령 간단한 예문을 보시면 cols="30%, 70%"로 정의 할수도 있는데요. 이 부분이 의미하는바는 

문서를 수평으로 2개의 프레임으로 나누고서 프레임의 넓이 비율을 각각 30%, 70%로 정의 한다는 의미입니다.

 

이와 반대로 다른예문을 한번 살펴볼께요.

수평부분을 나누어 봤으면 반대인 수직부분도 있겠죠?

수직부분은 cols 사용하신것처럼 rows로 바꾸시면 문서를 수직으로 나눌 수 있어요.

간단한 예문을 보자면 rows="30%, 70%"로 정의 할수도 있는데요. 이 부분이 의미하는바는

문서를 수직으로 2개의 프레임으로 나누고서 프레임의 넓이 비율을 각각 30%, 70%로 정의 한다는 의미입니다.

 

그리고 각각 프레임을 차지하는 넓이를 퍼센트(%)로 예문을 보여드렸는데요 굳이 퍼센트(%)로 하지 않으시고 픽셀값으로도 넓이를 지정 하실수 있습니다.

 

실제로 코딩을 하다보면 퍼센트(%)보다는 픽셀단위로 작업을 많이들 합니다. 

그 이유는 대부분이 사용할때 메뉴 부분에 사용하는 경우가 다반사라 메뉴의 넓이는 고정되어있는게 보편적이기 때문에 픽셀단위로 고정시켜서 사용하는 경우가 많습니다.

 

간단한 예문을 보자면 cols="300, *" 이런식으로 픽셀을 지정해서 사용하고요. 이 부분이 의미하는 바는

문서를 수평으로 2개의 프레임으로 나누고서 왼쪽 프레임의 넓이는 300픽셀로 고정으로 지정하고 오른쪽 프레임의 경우는 나머지 영역을 할당 한다는 의미입니다.

 

수직도 예문을 동해서 알아보자면 rows="300, *" 이런식으로 펙셀을 지정해서 사용하고요. 이 부분이 의미하는 바는

문서를 수직으로 2개의 프레임으로 나누고서 상단 프레임의 넓이는 300픽셀로 고정으로 지정하고 하단 프레임의 경우는 나머지 영역을 할당 한다는 의미로 보시면 됩니다.

 

그럼 바로 실습을 해봅시다!!! 

 

첫번째로 cols를 사용한 예문 코드를 한번 살펴볼께요.

 

<frameset cols="300,*">

  <frame src="menu.html">

  <frame src="content.html">

</frameset>

 

지난번에 만드신 "C:\Web"폴더에 "frameset.html"을 생성하셔서 위의 예문을 작성 해 주시고요.

"menu.html" 파일을 추가로 만드셔서 "menu.html" 파일안에 메뉴 라는 문구 함게 내용 저장해 주시고요.

"content.html" 파일을 추가로 하나더 만드셔서 "content.html" 파일안에 내용 이라는 문구와 함게 내용 저장해 주세요.

작성하셨으면 "frameset.html" HTML 파일을 실행해 보시면 왼쪽과 오른쪽에 메뉴, 내용 부분을 확인하실 수 있습니다.

이래 그림에서 보시는것처럼 왼쪽에 메뉴, 오른쪽에 내용부분이 나오셨으면 정상적으로 코딩하신겁니다.

 

두번째로 rows를 사용한 예문 코드를 한번 살펴볼께요.

 

<frameset rows="300,*">

  <frame src="menu.html">

  <frame src="content.html">

</frameset>

 

지난번에 만드신 "C:\Web"폴더에 "frameset2.html"을 생성하셔서 위의 예문을 작성 해 주시고요.

"menu.html" 과 "content.html"의 HTML 파일은 위해서 만드셨으면 추가적으로 코딩하지 않으셔도 됩니다.

"frameset2.html" HTML 파일을 실행해 보시면 상단과 하단에 메뉴, 내용 부분을 확인하실 수 있습니다.

이래 그림에서 보시는것처럼 상단에 메뉴, 하단에 내용부분이 나오셨으면 정상적으로 코딩하신겁니다.

 

FRAME

여기까지 무리 없이 진행하셨으면 당신은 역시 대단하신 분입니다.!!!! 쌍따봉~ㅎㅎㅎ

 

그럼 여기서 여러분의 능력을 십분 발휘하실 수 있는 과제 하나 낼께요~

과제가 궁금하시죠?~ 과연 어떤 과제를 드릴까 많이 고민했습니다.ㅎㅎㅎ

 

과제는 여러분께서 직접 2개 이상의 프레임을 나누어 적용하기입니다.

 

기본 예문은 드릴테니 참고 하시고 어려 방면으로 코딩해보세요.

<frameset rows="100,*">

  <frame src="top_menu.html">

  <frameset cols="300,*">

     <frame src="left_menu.html">

     <frame src="content.html">

   </frameset>

</frameset>

 

어떠신가요? 생각하신것처럼 잘 되시나요?~~

"top_menu.html", "left_menu.html", "content.html" 3개의 HTML 문서를 추가적으로 만드신 다음에 테스트 해보시면 프레임에 대한 이해를 좀 더 확실하게 이해하실 수 있으실꺼예요.

그리고 항상 말씀드리는 거지만 반복해서 연습하셔야 된다는 건 필수인거 아시죠?ㅎㅎㅎ

다음시간에는 프레임(frame) 2탄을 포스팅 해볼껀데요. 많은 응원과 기대해주세요. 감사힙니다.