안녕하세요! 이미보라입니다.
우리는 지난 포스트에서 표를 표현할 수 있는 <TABLE>태그에 대해서 알아보았습니다.
오늘은 프레임을 나눌 수 있는 <FRAME> 태그에 대해서 알아보려고 합니다.
프레임이란 웹 브러우저의 창 부분을 여러개로 분할할 수 있습니다. 나누어진 각각의 창에는 다른 웹문서를 보여줄 수 있습니다.
<FRAMESET>.... </FRAMESET>
프레임 문서의 구조는 일반 웹문서의 구조와 조금 다른데요. HTML 문서에서 <BODY> 태그의 기능을 프레임문서의 구조에서는 <FRAMESET> 태그가 대신하기 때문입니다. 다시 말해서, 프레임 문서의 구조에서는 <BODY>...</BODY> 태그 구문이 없습니다.
<HTML>
<HEAD> <TITLE> 일반 웹문서의 구조 </TITLE> </HEAD>
<BODY> 웹문서 본문 </BODY>
</HTML>
<HTML>
<HEAD><TITLE> 프레임 문서의 구조</TITLE></HEAD>
<FRAMESET> 프레임 구조 정의 </FRAMESET>
</HTML>
<FRAMESET> 태그의 속성 rows와 cols를 이용하여 화면을 분할가능합니다. 따라서 <FRAMESET>태그의 경우 rows 또는 cols 속성이 반드시 작성되어야 합니다.
<FRAMESET> 태그의 경우 화면 분할에 대한 정보를 정의할 뿐 웹브라우저에 출력대는 실질적인 내용을 담고있는 것은 아닙니다.
| 속성 | 설명 |
| rows | 화면을 가로로 분할 가능합니다. 속성값은 %와 px 단위로 가능합니다. 창을 분할하려는 갯수만큼 속성값의 갯수를 가집니다. |
|
cols |
화면을 세로로 분할 가능합니다. |
<FRAME>
실제로 지정된 프레임이 들어갈 웹문서의 경로 (URL) 또는 창의 이름 등 , 나누어진 창에 대한 정보를 정의합니다.
<FRAMESET>태그에 의해서 웹브라우저 창이 여러개로 분할되면, 해당 갯수만큼 프레임이 생성됩니다. 이때 각각의 프레임에 대해서 보여줄 실제적인 웹문서 (HTML문서)들을 하나씩 정의 할 때 <FRAME>태그가 사용됩니다.
<FRAME> 태그는 아래와 같은 속성을 가지며, 단독태그로 종료태그는 없습니다.
|
속성 |
내용 |
|
src |
해당 프레임에서 출력할 웹문서(HTML 문서)의 URL을 지정합니다. |
|
name |
해당 프레임의 이름을 정의합니다. |
|
marginwidth |
해당 프레임의 좌우 여백을 픽셀 단위로 지정합니다. |
|
marginheight |
해당 프레임의 상하 여백을 픽셀 단위로 지정합니다. |
|
scrolling |
프레임의 우측과 하단에 스크롤 바를 만들 것인지 아닌지를 지정합니다. |
|
noresize |
해당 웹문서를 보는 사용자가 프레임의 크기를 임의로 변경할 수 없도록 합니다. |
<NOFRAME> ... </NOFRAME>
프레임이 지원되지 않는 경우, 프레임 대신에 <NOFRAME> 태그내의 데이터를 출력합니다.
프레임태그 실습 예제
<!-- left.html -->
<HTML>
<HEAD> <TITLE> 일반 웹문서1 </TITLE> </HEAD>
<BODY bgcolor = "#CC99CC"> 일반 웹문서 1</BODY>
</HTML>
<!-- right.html -->
<HTML>
<HEAD> <TITLE> 일반 웹문서2 </TITLE> </HEAD>
<BODY bgcolor = "#FFCCCC"> 일반 웹문서 2</BODY>
</HTML>
프레임태그는 웹브라우저의 창을 나누는 정보만을 결정하기 때문에, 실제로 보여지는 웹문서파일이 필요합니다.
이번 프레임태그 실습을 위해서 left.html, right.html, top.html 3개의 웹문서파일을 사용하도록 하겠습니다.
해당 웹문서들은 구분을 위해서 배경색상만 bgcolor 속성으로 지정했습니다.
본격적으로 프레임태그를 실습해보도록 하겠습니다.
<!-- frame1.html -->
<HTML>
<HEAD> <TITLE> 프레임태그 실습1</TITLE> </HEAD>
<FRAMESET cols = "200, *">
<FRAME src = "left.html" name = "left" marginwidth = "15" marginheight = "15" scrolling = "no" noresize>
<FRAME src = "right.html" name = "right" >
</FRAMESET>
</HTML>
프레임태그 실습1 예제를 살펴보면, <FRAMESET>태그에 cols 속성에 의해서 웹 브라우저 창이 세로로 분할됨을 확인할 수 있습니다. 이때, 첫번째 창의 크기를 200px로 정의하고, 나머지 모든 영역에 대하여 두번째 크기의 창으로 설정했습니다 (*)
<FRAME>태그의 순서에 따라 세로로 분할된 프레임의 각각에 대한 정보를 정의할 수 있습니다.
첫번째 프레임은 실제로 보여지는 웹문서 파일 left.html 을 src 속성으로 연결해 주었습니다.
이때 데이터의 여백을 15px로 지정했기 때문에 left.html 텍스트의 위치가 오른쪽 창에 보이는 right.html의 텍스트와 조금 다른 위치에 보여집니다. 그외에도 스크롤이 나타나지 않도록 scrolling속성을 설정했고, 사용자가 프레임의 크기를 조정하지 않도록 noresize 속성을 설정했습니다.
위의 실습을 진행하기 위해서 위의 파일들이 같은 위치 상에 존재해야합니다. 이에 관련된 내용은 이미지 태그 실습을 하면서 상대경로와 절대경로로 설정함을 설명하며 자세히 알아봤었습니다. 참고하시기 바랍니다.
오늘은 웹브라우저의 창을 여러개로 나누어 각각 다른 웹문서(HTML문서)를 연결하여 함께 볼 수 있는 FRAME 태그에 대해 알아보았습니다. 다음 포스트에서는 HTML의 꽃이라고 할 수 있는 링크태그에 대해서 알아보도록 하겠습니다.
감사합니다.
'IT > HTML' 카테고리의 다른 글
| HTML A 태그 (링크태그) target 속성 (0) | 2021.01.06 |
|---|---|
| HTML A 태그 (0) | 2021.01.06 |
| HTML TABLE 태그 (0) | 2021.01.03 |
| HTML IMG 태그 (0) | 2021.01.02 |
| HTML 논리적 스타일 지정 태그 (0) | 2021.01.01 |
댓글