프레임

웹 사이트에 자세히 보면 여러 프레임을 이용하여 웹 페이지를 구성하는 경우가 흔하다. 이는 프레임을 여러 화면으로 구역을 나누어 각기 다른 기능을 제공한다. 각 프레임마다 특정 역할을 수행하는 페이지로 효과적인 웹을 만들 수 있다.

프레임의 정의

프레임의 구조는 첫 번째로 <frameset> 태그를 선언하고 <frame> 태그로 실제 프레임을 정의한다.

<html>
    <head>
        <title>HTML Test</title>
    </head>
    <frameset row/cols="프레임 수와 크기">
        <frame src="프레임에 표시할 html파일 및 소스파일의 url">
        <frame src="프레임에 표시할 html파일 및 소스파일의 url">
    </frameset>
</html>

<frameset> 태그

프레임을 선언하는 동시에 프레임의 수와 크기를 설정한다.

프레임의 크기를 설정하는데에는 픽셀 수로 설정, 브라우저 크기에 대한 비율(%)로 설정 ,나머지 전부를 설정이 있다. 나머지 전부는 *로 설정한다.
<frame> 태그

frame 태그의 src 속성을 통하여 프레임에 표시할 HTML 문서를 지정한다.

--------------------------------------------- main 화면
<html>
    <head>
        <title>HTML Test</title>
    </head>
    <frameset rows="30%, 50%, 30%">
        <frame src="C:\test2.html">
        <frame src="C:\test3.html">
        <frame src="C:\test4.html">            
    </frameset>
</html>
--------------------------------------------- 프레임 1
<html>
    <head>
        <title>test 2 second page</title>
    </head>
    <body>
        <center> 프레임 1</center>

    </body>

</html>
--------------------------------------------- 프레임 2
<html>
    <head>
        <title></title>
    </head>

    <body>
        <center>프레임 2</center>
    </body>
</html>
--------------------------------------------- 프레임 3
<html>
    <head>
        <title></title>
    </head>

    <body>
        <center>프레임 3</center>
    </body>
</html>

프레임의 가로 세로 복합 분할

우리가 웹을 보면 메뉴 구성 항목 따로, 제목 구성 따로, 본문 따로인 웹을 익히 봐 왔는데 그러한 구성을 가로 세로 복합 분할로 구현할 수 있다.

이 경우는 frameset의 cols과 rows 속성을 함께 사용하면 된다.

<html>
    <head>
        <title>HTML Test</title>
    </head>

    <frameset cols="30%, *">
            <frame src="C:\test4.html">
    <frameset rows="50%, 50%">
            <frame src="C:\test2.html">
            <frame src="C:\test3.html">            
        </frameset>
    </frameset>
</html>

여기서의 핵심은 <frameset cols="30%, *"> 으로 test.html4의 크기를 30%로 하고 나머지 모두를 사용하겠다는 의미로 * 를 사용하였다.

프레임 서식

프레임의 모양 및 테두리 선, 여백 등을 조절할 수가 있는데 프레임의 서식을 설정하는 방법에 대해서 알아보자.

프레임의 테두리 선 설정

프레임의 테두리 선을 없애거나, 두깨를 조절할 수 있는데 프레임의 테두리 선을 설정하기 위하는 형식은 border속성을 이용한다. 속성 값을 0으로 지정하면 테두리 선이 보이지 않는다.

<frameset border="픽셀 수">

프레임의 여백 설정

프레임의 좌우 및 상하 여백을 <frame> 태그의 **marginwidth 속성과 marginheight 속성을 이용하여 조절한다.

<frame marginwidth="픽셀 수" marginheight="픽셀 수">

프레임의 크기 변경 금지

우리가 지금껏 사용했던 프레임은 사용자가 임의적으로 마우스로 크기를 변경할 수 있는데 이를 방지하기 위해 ** <frame> 태그의 noresize 속성을 이용하여 사용자가 프레임의 크기를 임의적으로 변경하는 것을 막는다.

<frame noresize>

프레임의 스크롤 바 설정

프레임으로 구성된 html 문서는 브라우저에서 문서의 크기에 따라 자동으로 스크롤 바가 나타나지 않는다. 이를 해결하기 위해 <frame> 태그의 scrolling속성을 이용한다.

속성 값

auto (default) : 자동으로 스크롤바를 생성하고 파기한다.
yes : 내용의 크기와 상관없이 항상 스크롤바가 생성된다
no : 내용의 많아도 스크롤바가 생성되지 않는다.

<frame scrolling="auto/yes/no">

타겟 프레임 설정

지금까지 프레임으로 화면을 분할하는 기능을 사용했지만 이런 기능 외에 원하는 프레임으로 링크를 설정할 수 있는 타겟 프레임의 기능을 사용해보자.

<frame name="프레임의 이름">
<a href="파일의 URL" target="파일을 출력할 프레임의 이름"> 브라우저에 나타나는 텍스트 </a>

--------------------------------------------------main page
<html>
    <head>
        <title>HTML Test</title>
    </head>

    <frameset cols="30%, *">
            <frame src="C:\Users\USER\Desktop\html 스터디\test4.html" name="MenuTarget">
    <frameset rows="50%">
            <frame src="C:\Users\USER\Desktop\html 스터디\test2.html" name="MainTarget">
        </frameset>
    </frameset>
</html>
--------------------------------------------------menu page
<html>
    <head>
        <title></title>
    </head>

    <body>
        <center><h2> Menu </h2></center>
        <br><br><br>

        <center>
                <a href="C:\Users\USER\Desktop\html 스터디\test5.html" target="MainTarget"> Login </a> <br>
                <a href="C:\Users\USER\Desktop\html 스터디\test3.html" target="MainTarget"> Join </a>
        </center>
    </body>
</html>
--------------------------------------------------login page
<html>
    <head>
        <title></title>
    </head>
    <body>
        <center>
            <h2>Login Page</h2>

            <br>
            This is login page of this website
        </center>
    </body>
</html>
--------------------------------------------------join page
<html>
    <head>
        <title></title>
    </head>

    <body>
        <center> <h2>Join</h2></center>
        <br>
        This is Join Page of this website
    </body>
</html>
--------------------------------------------------- content page
<html>
    <head>
        <title>test 2 second page</title>
    </head>
    <body>
        <center> <h1>Contents should be here</h1> </center>

    </body>

</html>

흐름을 보면

Main페이지에서 프레임의 구성을 만들고 타겟이름을 설정한다.

<frame src="" name="targetName">
menu 페이지에서 login과 join의 하이퍼링크를 <a> 태그를 통해 설정하고 타겟의 이름을 찾아 걸어준다.

<a href="" target="targetName">
각각의 페이지 구성을 한다.

저작자표시 동일조건

'📺 Front End > - HTML,css,Javascript' 카테고리의 다른 글

[Javascript-Core] JavaScript 의 특징과 다른 언어와의 차이점 (0)	2019.11.29
6. HTML 폼 태그 (0)	2019.11.29
4. HTML 테이블 (0)	2019.11.29
3. HTML 이미지 삽입 (0)	2019.11.28
2. HTML 기본 태그 (0)	2019.11.27

Wonit

5. HTML 프레임

프레임

프레임의 정의

프레임의 가로 세로 복합 분할

프레임 서식

프레임의 테두리 선 설정

프레임의 여백 설정

프레임의 크기 변경 금지

프레임의 스크롤 바 설정

타겟 프레임 설정

'📺 Front End > - HTML,css,Javascript' 카테고리의 다른 글

댓글

티스토리툴바

5. HTML 프레임

프레임

프레임의 정의

프레임의 가로 세로 복합 분할

프레임 서식

프레임의 테두리 선 설정

프레임의 여백 설정

프레임의 크기 변경 금지

프레임의 스크롤 바 설정

타겟 프레임 설정

'📺 Front End > - HTML,css,Javascript' 카테고리의 다른 글

관련글

댓글

티스토리툴바