안녕하세요.

전에부터 말하던 [프레임] 강좌를 시작하겠습니다.
프레임과 표(테이블) 강좌부터는 중급강좌가 되겠으므로..
많이 연습해보시고 집중하기 바랍니다.

욕구가 많이 떨어지신 분들도 있겠지만..
강사란 넘이 이렇게 제 기분에 따르고..-,-
뭐라 드릴말 없습니다.

자~ 그럼 시작~!


프레임 강좌라 하면 프레임이 뭔가부터 알아야겠죠~

프레임이란 화면을 나눈다는 말입니다.

화면 - 즉 웹페이지 화면을 나눈다는 말입니다.

어떻게 나누냐는 직접 보시고 확인합시다.

전에는 먼저 소스를 보고 예제화면을 클릭했지만...
이번엔 먼저 어떻게 나누냐를 보고 소스를 분석합시다.

이제까지 배운내용 + 오늘배울 프레임 이렇게해서
이 시대 최고의 사이트를 만들어 봅시다.

1. 놀라운 속도
2. 절제된 칼라
3. 절제된 언어
4. 익스플러와 네스케이프의 완벽한 호완
5. IBM 과 MAC의 완벽한 호완
6. 완벽한 스팸메일 방지 구현 (이메일)
7. 독립심과 자립심을 길러주는 교육프로그램까지.(링크)
8. 640 * 480 모드 ~ 1280 * 1024 모드 까지 완벽한 호완모드
9. 사용자를 생각한 완벽에 가까운 CRM (방명록)
10. 애국정신까지(자료실)

과연 이런사이트 만들수 있을까요?

직접 확인하세요 !

자~ 모두 보셨으면...
화면나누기가 무엇인지 이해가 가시죠~

금방 보신 사이트(?)는 좌|우 두쪽으로 나누었습니다.
물론 나누기라 하면 상|하 라도 되겠죠...

하나의 프레임이 생기려면 기본으로 세개의 html 문서가 있어야 합니다.
좌 | 우 두개의 페이지인데... 왜서 세개가 필요할까요?

집중~! 이번시간 관건입니다.





못 그렸지만 그런대로 봐주세요 ㅡ.ㅡ

1 : 은 left.html 즉 메뉴 페이지 입니다.

2 : 는 main.html 즉 내용 페이지 입니다.

3(관건) : 은 frame.html 프레임 페이지 입니다.


잔말말고 소스를 봅시다.~!

1 도 2 도 아닌 3 [frame.html] 의 소스를 말입니다.

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


내 홈페이지야 !


  
  


---------------------------------------
앗~ 의외로 간단하죠~ ^^
하지만 모를것들이 나타났습니다.
frameset 가 바로 프레임태그 입니다.

기본구조를 살펴 봅시다.

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


화면을 가로 나눌때 -> rows="30%,70%  윗쪽이 30% 아래쪽이 70%

여기서 % (퍼센트) 말고도 픽셀(pixel)로 페이지를 나눌수 있습니다.
위의 소스에서처럼 해주면..
한쪽이 150픽셀이되고 나머지는 알아서 처리됩니다.



이곳에서 src 는 나누어진 쪽에 나타날 페이지를 정해줍니다.


이제 name 에 대해 알아봅시다.

현재 프레임은 두쪽으로 나뉘여 졌습니다.
오른쪽에 하나 , 왼쪽에 하나 입니다.
현재는 2 쪽이니까 단간하지만 나중에 한 페이지를
좌 | 우 | 상 | 하 ...
이렇게 여러모로 나눌때면 프레임 개수가 많아집니다.
어느 프레임이 어느것인지 확정짓기 위하여
우리는 나누어진 쪽 마다에 이름을 답니다.
그것이 name 속성이 되는겁니다.

그냥 나누어진 페이지에 이름을 다는거죠~ ^_^



자~~ 이제 어떻하면 오른쪽 메뉴에서 클릭해서
왼쪽 화면에 나타나는 가를 살펴 봅시다.
아~~주 간단합니다.
전에 a href 링크 태그를 배울적에
target 에 대해서 언급하적 있습니다.

########################################################
  target=_top  요러면 현재 창에서 페이지가 열립니다.  
  target=_blank 요러면 새 창에서 페이지가 열립니다.    
  target=_new 요래두 새 창에서 페이지가 열립니다.
########################################################

요런 문구가 생각납니까? ^^

이제 우리는 target=main 해주면 됩니다.
왜냐?! 아까 프레임태그에서 오른쪽페이지 이름을
main 이라고 정해 주었기 때문입니다.

즉 링크를 클릭해서 나오는 페이지가
프레임 이름이 main 인 쪽에 출력하라~ 고 하는겁니다.

이해가 가십니까? --*

왼쪽 메뉴화면에서 마우스 오른쪽 클릭해서 소스보기 하시면
target="main">내소개
보셨죠~? ^^ target="main" 이렇다니까요..

이제 frame 태그 속성들을 종합해 봅시다.

************************************************************************
src : 화면에 나타날 html 문서를 정해줍니다. |예 -> src="main.html"
name : 프레임 이름 정함 | 예 -> name="main"
frameborder : 프레임의 경계선설정 1(보임) , 0(감춤) 예 ->frameborder=0
scrolling : 스크롤바( 페이지를 쭈~욱 내리 당기는 막대기)
            생기게 할지(yes) 말지(no) 지정 예 -> scrolling="yes"
noresize : 프레임 크기 변경할지 말지를 정해줍니다.
               이 속성은 그냥 적어주면 프레임 넓이 조절못하고...
        않적어주면 마우스로 프레임넓이 조절가능합니다.
marginwidth : 프레임 좌우 여백 예 ->marginwidth=0 (여백없이 딱 붙음)
marginheight : 프레임 상하 여백 예 ->marginheight=0 (여백없이 딱 붙음)
************************************************************************

이 속성들은 아까

이 안에다가 하나하나 추가해 보시며.. 그 재미를 느껴 보십시요~ ^^

좌 | 우 프레임 나누기와 프레임에 대한 기본강좌 였습니다.
다음강에 좀더 복잡한 프레임들을 다루어 봅시다~ !




사고문제 : 1 . 좌 | 중 | 우 로 프레임을 나누려면~?
               2 . 상 | 하 로 프레임을 나누려면 ~?




* 전설님에 의해서 게시물 이동되었습니다 (2004-05-30 17:07)
* 이동한 이유 :
* 원래의 위치 : 웹 공부 >> 웹 프로그래밍
* 이동후 위치 : 웹 공부 >>

* 전설님에 의해서 게시물 이동되었습니다 (2004-05-30 17:12)
* 이동한 이유 :
* 원래의 위치 : 웹 공부 >>
* 이동후 위치 : 웹 공부 >> 웹 프로그래밍