홈 강의 컨설팅 트레이닝 무료진단 무료책자 마케팅편지 마케팅정보공유 다이어리 서비스제휴 고객센터

마케팅 특별마케팅자료 다운로드마케팅자료 창업,경영 기획,카피 동기부여,성취 소스,유틸
프레임 tag-프레임(1)
작성자 : 99 단국강토
등록날짜 : 2009.02.09 10:07
2,149

Frame 태그


인터넷 상에 올라 있는 대부분의 웹 사이트를 보면 하나의 화면으로 구성되어 있는 경우 보다는 대부분 2개 내지 3개 정도로 나누어져 있는 경우가 대부분입니다. 이것은 프레임으로 나눈것입니다.
하나의 윈도우 안에 또 하나의 원도우를 만들 수 있는 기능을 프레임기능이라고 합니다. 이 기능은 독립된 윈도우처럼 프레임마다 각각 제어할 수 있습니다. 프레임기능은 잘 사용하면 좋지만 너무 많이 사용하면 복잡하고 화면이 좁아 보여 좋지 않습니다. 이번 장에서는 프레임으로 어떻게 나누는지에 대해 알아 보도록 하겠습니다.

 <frame>

frame 은 frameset 에 의해 분활된 각 프레임의 내용과 표시방법을 설정하는 요소입니다. 프레임의 내용으로는 프레임을 정의하고 있는 문서 원본을 지정할 수 없기 때문에 주의해야합니다. 또 프레임의 내용이 이미지인 경우에도 src속성의 값으로 이미지 파일을 직접 지정하지 않고 필수적으로 대체할 텍스트를 포함한 html문서를 지정하도록 합니다.

name 프레임의 이름을 지정합니다.
src 프레임의 내용으로 표시할 문서의 URL 를 지정합니다.
target src 와 같이 사용하여 특정이름을 가진창에 내용을 나타냅니다.
scrolling 프레임에 스크롤바를 설정할 것인지를 설정합니다. 속성값으로는 yes(항상 스크롤바표시) no(항상 스크롤바를 표시하지 않음), auto(필요에따라 스크롤바를 자동으로 표시)합니다. 기본값은 auto 입니다.
marginwidth 프레임 내부의 좌우여백을 픽셀로 0이상의 값을 지정하며 초기값은 브라우저에 따라 달라집니다.
marginheight 프레임 내부의 좌우여백을 픽셀로 0 이상의 값을 지정하며 초기값은 브라우저에 따라 달라집니다.
noresize 프레임을 나눈 후에 브라우저에서 크기를 변경하지 못하도록 하는 속성입니다.

 <frameset>

frameset 는 원도우 분할을 설정한는 요소이며 분할된 각 프레임에 표시할 내용은 frame 요소로 지정합니다. 일반적인 html 문서는 head 요소와 body 요소로 구성되어 있지만, frameset 는 body 요소가 없다는 것을 잘 알아두십시요.

rows "프레임의 높이" //가로로 분할될 프레임의 높이를 [ , ]로 구별하여 지정합니다. 픽셀이나 % 외에 정수 다음에 [ * ] 를 붙여서 비율로 지정할 수도 있습니다. 픽셀로 정하면 그 크기가 픽셀에 해당하는 크기로 고정이 되고 % 로 정하면 크기가 화면의 크기에 따라 변하게 됩니다. 초기값은 100%(하나의 가로열)입니다.
cols 프레임의 넓이" //세로로 분할될 프레임의 너비를 [ , ]로 구별하여 지정합니다. 픽셀이나 % 외에 정수 다음에 [ * ] 를 붙여서 지정할 수 있습니다. 초기값은 100%(하나의 세로열)입니다.
frameborder 프레임과의 경계에 외곽선 표시에 관한 여부를 지정합니다. 0 (외곽선을 표시하지 않음), 1 (외곽선을 표시)

 프레임 구조 - 1

[형식]

 a.htm

 b.htm

<frameset rows=200,*>
<frame name=head src=a.htm>
<frame name=main src=b.htm>
</frameset>

■ 3개의 문서가 필요하다. head부분에 들어갈 a.htm문서와 main부분에 들어갈 b.htm문서와 프레임셋 문서.
■ 상하로 위에 frame 를 100픽셀로 하고 아래 frame 를 나머지 크기로 나누었습니다.
[소스]

frameset 문서 a.htm 문서 b.htm 문서
<html>
<head>
<title></title>
</head>
<frameset rows=200,*>
<frame src=a.htm>
<frame src=b.htm>
</frameset>
</html> 		<html>
<head>
<title>a</title>
</head>
<body>
a.htm   위에 부분
</body>
</html> 		<html>
<head>
<title>b</title>
</head>
<body>
b.htm   아래 부분
</body>
</html>

[설명]
우선 2개의 프레임으로 나누었으니 문서가 3개 필요하겠지요. a 문서, b 문서, frameset 문서 이렇게 3개가 필요합니다. frameset 문서는 프레임의 구조를 정의한 문서로서 눈에는 보이지가 않지만 반드시 있어야 겠지요.
그리고 frameset 문서를 잘 보시면 body 부분이 없지요. frameset 문서에는 body 이 없다는걸 잘 기억해두세요. frameset 문서에서 rows 를 보시면 위에 frame 를 200 픽셀로 하고 src 속성을 이용하여 a 문서를 불러 들렸고, 아래 frame 를 나머지 크기로 하고 src 속성을 이용하여 b 문서를 불러 들였습니다.

[출처] [본문스크랩] 프레임 tag-프레임(1)|작성자 빛남이

"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기,
각종 광고, 영업, 판매, 제안서, 전단지
반응율 3배×10배 이상 높이는 마법의 8단계 공식"
☞​자세히보기

Comments

로그인한 회원만 댓글 등록이 가능합니다.
번호 제목 글쓴이 날짜 조회
2985 Table 태그 (2) 99 단국강토 02.09 2241
2984 테이블 응용 99 단국강토 02.09 2352
열람중 프레임 tag-프레임(1) 99 단국강토 02.09 2150
2982 프레임(2) 99 단국강토 02.09 2147
2981 form tag-form (1) 99 단국강토 02.09 1991
2980 form(2) 99 단국강토 02.09 1802
2979 form-(4) 99 단국강토 02.09 2267
2978 아름다운글 올리는 방법 5 마퀴 태그 99 단국강토 02.09 2301
2977 이미지의 태그 처리 99 단국강토 02.09 2253
2976 글쓰기/FIELDSET source 99 단국강토 02.09 2531
2975 블로그 영상시, 나도 만들어 볼까? 99 단국강토 02.09 2292
2974 동적 테이블 생성 DHTML 99 단국강토 02.09 2986
2973 table,tr,td 의 innerHTML 속성으로 좀 가꾸놀기 99 단국강토 02.09 3923
2972 CSS를 활용한 INPUT FORM의 커스트마이징 기법 99 단국강토 02.09 2887
2971 테이블 테두리를 가늘게 하는 확실한 팁 99 단국강토 02.09 2271
2970 스타일시트를 적용시키는 3가지 방법 99 단국강토 02.09 2059
2969 cursor:hand 을 cursor:pointer 로 교체요 ^^ 99 단국강토 02.09 2266
2968 ID attribute selector 99 단국강토 02.09 1496
2967 폼테그쓸때 테이블정렬이 잘안될때 쓰이는 css 99 단국강토 02.09 1602
2966 홈페이지 제작시 사용되는 CSS 정리 99 단국강토 02.09 1343
2965 부드럽게 펼쳐지는 콤보박스형 메뉴 99 단국강토 02.09 1674
2964 [CSS]스타일시트로 배경그림 고정시키기 99 단국강토 02.09 1676
2963 아이프레임 일부기능 대체할 수 있는 박스 99 단국강토 02.09 3230
2962 페이지 한개에서 모든것을 해결할 수 있는 탭메뉴 스크립트 99 단국강토 02.09 1407
2961 [CSS]글씨 크기-줄 간격 조절해서 보기 좋은 문서 만들기 99 단국강토 02.09 3308
2960 아이프레임 일부기능 대체할 수 있는 박스 99 단국강토 02.09 1309
2959 백그라운드 반복없이 한번만 넣기 99 단국강토 02.09 1862
2958 JAVASCRIPT + DOM 을 이용한 데이터 검색 99 단국강토 02.09 2785
2957 JAVASCRIPT + DOM 을 이용한 데이터 검색 99 단국강토 02.09 1961
2956 DOM 참조(JavaScript이용) 99 단국강토 02.09 1621
마케팅
특별 마케팅자료
다운로드 마케팅자료
+ 마케팅 더보기
+ 특별 마케팅자료 더보기
+ 다운로드 마케팅자료 더보기
창업,경영
기획,카피,상품전략
동기부여,성취
+ 창업,경영 더보기
+ 기획,카피,상품전략 더보기
+ 동기부여,성취 더보기