Skip to content
Server
2013.03.02 08:03

html) 프레임 나누기

조회 수 9178 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

html) 프레임 나누기

 

① 프레임 태그

<frameset>
프레임을 정의하는 문서에서 프레임의 시작을 의미합니다. <frameset>을 정의하는 문서에는 <body>태그를 쓰지않습니다. 대표적인 속성에는 colsrows 가 있습니다.
<frame>
분할된 각각의 창을 정의할때 사용하는 태그로 속성에는 프레임의 이름을 정해주는 name, 프레임에 들어갈 문서나 사이트의 경로를 정해주는 src, 프레임의 스크롤바의 상태를 결정하는 scrolling 등이있습니다. <frmae>태그는 종료태그가 없습니다.
<noframe>
프레임을 출력하지 못하는 하위 버전의 브라우저 사용자들을 위해 사용하지만 지금은 거의 사용하지 않습니다.

일단 간단한 프레임을 보고나서 프레임태그에 사용되는 속성들에 대해 알아보겠습니다.
두개로 나누어져 있는 프레임을 만들기위해서는 세개의 웹문서가 필요합니다. 두개는 각각의 창에 들어갈 문서(A.htm, B.htm)이고, 나머지 하나는 바로 프레임을 정의하는 <frameset>태그가 들어있는 문서(main.htm)입니다. 왼쪽은 소스이고 오른쪽은 프레임이 브라우저에 출력된 모습입니다.

main.htm

<html>
<head>
<title> 프레임 나누기 </title>
</head>

<frameset cols="100,*">
    <frame name="left"   src="A.htm"> 
    <frame name="right" src="B.htm">   
</frameset>

</html>
   
A.htm의
내용 출력
B.htm의
내용 출력

위의 소스를 보면 main.htm A.htm B.htm 이렇게 세개의 문서가 사용되었죠? 프레임을 지정한 main.htm에는 <bodt>태그를 쓰지 않는다 는걸 꼭 알아두세요. A.htm과 B.htm은 미리 작성되었던 문서라고 보면됩니다. cols 속성을 사용하여 프레임을 나누고 src 속성으로 두 문서를 각프레임의 내용으로 배정한 것입니다.

여기서 이해를 돕기위해 프레임 태그에 쓰이는 속성들에 대해 알아보겠습니다.

<frameset>의 속성

cols 가로로 프레임을 나누며 속성값으로 비율(%)이나 픽셀값을 씁니다.
rows 세로로 프레임을 나누며 속성값으로 비율(%)이나 픽셀값을 씁니다.
framespacing 프레임 안에 들어갈 내용과 프레임간의 여백을 설정합니다.
frameborder 속성값으로 '0'과 '1'이 있으며 각각의 프레임을 구분하는 테두리를 숨길것인지(0) 보이게 할것인지(1)를 결정합니다.

<frame>의 속성

marginheight 프레임내의 여백의 높이를 지정합니다.
marginwidth 프레임내의 좌우여백을 결정합니다.
name 프레임의 이름을 설정합니다. 어떤 이름을 써도 상관없습니다.
scrolling 프레임의 스크롤바를 표시할것인지, yes, no, auto로 결정합니다.
src 프레임에 표시될 문서의 경로를 지정합니다.
target src와 같이 사용하여 특정이름을 가진 창에 내용을 나타냅니다.

소스를 보면 cols="100,*" 가 있죠? 이것은 창을 왼쪽부터 100픽셀과 그 나머지로 나눈다는 말입니다. cols="20%,*" 는 전체창을 기준으로 20%와 그 나머지인 80%로 창이 나누어 지겠죠? 세칸으로 나누는 것도 간단합니다.
cols="100 , * , 100" 을 지정하면 양쪽이 100픽셀이고 가운데가 넓은 가로로 세칸짜리 프레임이 만들어집니다. rows 속성도 같은 방법으로 프레임을 세로로 분할 합니다. rows 속성도 사용해보시기 바랍니다.

로그인 후 댓글쓰기가 가능합니다.

?

List of Articles
번호 분류 제목 날짜 조회 수
276 컴퓨터잡담 윈도우7 공유기 사용시 네트워크 연결 문제 2 2011.06.27 17139
275 컴퓨터잡담 [TCP/IP] 인터넷 연결 문제 복구 및 확인방법 2 2011.06.23 12369
274 컴퓨터잡담 DHCP서버 IP시간 만료로 인터넷이 안되는 경우 해결방법 18 2011.06.22 13909
273 컴퓨터잡담 [WGATRAY.EXE] 정품인증 Windows Genuine Advantage 수동 삭제 3 2011.06.20 5583
272 컴퓨터잡담 마지막 검색 세션이 예상치 못하게 종료되었습니다 3 2011.06.20 6124
271 컴퓨터잡담 윈도우 진입후 익스플로러 연결 딜레이 현상 2011.06.20 4106
270 컴퓨터잡담 윈도우7 익스플로러8 연결문제. file 2011.06.20 4361
269 컴퓨터잡담 윈도우7 노트북에서 인터넷 끊킴현상 발생시 조치. 4 2011.06.20 4784
268 컴퓨터잡담 SK브로드밴드 윈도우7 또는 Vista 속도이상시 환경설정방법 2011.06.20 8286
267 컴퓨터잡담 호스트 / 서버운영자가 가볼만한 사이트 2011.06.17 4835
266 컴퓨터잡담 CUBRID 알아보기 2011.06.17 6162
265 컴퓨터잡담 GoogleUpdate.exe 프로세스의 제거와 삭제 1 3 2011.06.16 9524
264 컴퓨터잡담 윈도우7 노트북에서 인터넷 끊김현상 발생되는 원인 해결방법 file 2011.06.11 15911
263 컴퓨터잡담 [hosts 파일 이용] 리얼클릭 광고 무력화 시키기 2011.06.05 4047
262 컴퓨터잡담 [PHP] 랭킹 순위 구하는 로직 2011.05.15 9254
261 컴퓨터잡담 익스플로러8 액티브X(Active-X) 오류 / DEP 데이터 실행방지 프로그램 문제[Win XP] 1 file 2011.05.07 8357
260 컴퓨터잡담 [PHP] 오류출력 안하기 2011.05.04 8280
259 컴퓨터잡담 익스플로러9 사용시 화면 멈춤현상 개선방법 1 2011.04.12 14356
258 프로세스 PF사용...페이징 중지를 통한 시스템 성능개선 2011.04.10 27626
257 AutoHotKey 정보수집 2011.03.30 14236
Board Pagination Prev 1 ... 24 25 26 27 28 ... 39 Next
/ 39

http://urin79.com

우린친구블로그

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소