HTML FrameSet , Frame 태그 :: Arch4n

2020. 6. 21. 21:36·개발 공부 일기장/HTML&CSS

이번에 새롭게 배운 Frameset, Frame태그들에 대해서 정리를 하겠습니다.

 

일단 이 태그들은 html5에서 지원하지 않는 퇴화 태그라고 합니다. 어쩐지 코딩할때 계속 빨간색으로 뜨더라고요..

 

일단 Frameset Frame 태그들은 말 그대로 브라우저를 프레임화(화면 분할) 시켜서 

 

분할된 부분마다 다른 html 문서들을 연결 시킬 수 있습니다.

 

일단 main html을 만들고

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <frameset rows="8%,92%" frameborder="0"> <!--세로 나누기-->
        <frame src="title.html">
        <frameset cols = "10%,90%"><!--가로 나누기-->
            <frame src="menu.html">
            <frame src="notice.html" name="right">
        </frameset>
            
    </frameset>
</head>
<body>
    
</body>
</html>

요론식으로 코드를 짜게되면 frame set row는 세로로 화면을 분할시킨 것 입니다.

 

분할의 크기는 퍼센트로 줬고 프레임 보더는 프레임의 테두리를 설정 할 수 있습니다.

 

frame src를 이용해서 html을 삽입할 수 있습니다.

 

frameset cols는 가로로 분할할 수 있습니다. rows랑 똑같이 src를 이용해서 프레임을 연동시켜줍니다.

 

과제로 만든 방탄소년단 소개 웹 사이트..

원래는 디자인때문에 보더 값을 주지 않는데 프레임이 어떤식으로 나눠져 있는지 보여드리기 위해서 보더값을 줬습니다

 

맨 위 헤더 부분이 title.html 왼쪽 메뉴가 menu.html 그리고 메인에서 슬라이드가 돌아가게 코딩한 notice.html입니다.

 

일단 제가 생각하는 frameset의 장점은 다른 웹사이트를 불러오기 아주 편한것 같습니다.

 

a태그를 이용해서 링크를 걸게되면 html전체가 이동하게 되는데 frameset으로 notice.html안에 링크를 걸어서 이동하게

 

한다고 치면 

 

요론식으로 frameset으로 나눈 부분에서만 웹페이지를 불러 올 수 있습니다.

 

가끔 과제를 하게 되면 꿀빨기 위해서 사용할 듯 한 태그인것 같습니다..

'개발 공부 일기장 > HTML&CSS' 카테고리의 다른 글

[따라하면서 배우는 HTML] 0 - 개발환경 세팅하기 :: Archan  (0) 2020.08.01
'개발 공부 일기장/HTML&CSS' 카테고리의 다른 글
  • [따라하면서 배우는 HTML] 0 - 개발환경 세팅하기 :: Archan
Archan
Archan
개발자/해커 Archan의 블로그입니다
  • Archan
    Archan의 알찬 Write Up
    Archan
  • 전체
    오늘
    어제
    • 분류 전체보기 (82)
      • Hacking (18)
        • CTF Write Up (1)
        • Pwnable.kr (1)
        • [Toddler's Bottle] (11)
        • Network (0)
        • Pwnable Tips (3)
        • 실전 해킹 (2)
      • 개발 공부 일기장 (64)
        • PHP Develop (2)
        • Android Develop (1)
        • HTML&CSS (2)
        • Tips (4)
        • iOS Develop (7)
        • 방화벽 (2)
        • C Develop (0)
        • Linux Develop (1)
        • DBMS Develop (5)
        • Basic Develop (4)
        • Java Develop (5)
        • 생각 정리 (18)
        • DevOps (1)
        • 사이드 프로젝트 (12)
        • Algorithm (0)
        • 컴퓨터공학 (0)
        • 시스템 설계 (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • 포트폴리오
  • 공지사항

  • 인기 글

  • 태그

    사이드 프로젝트
    포너블
    포너블 워게임
    pwn wargame
    동아리 관리 프로젝트
    개발자
    Linux
    ubuntu
    왕초보
    Spring
    스위프트
    오늘도
    스프링
    해킹
    리눅스
    Spring Boot
    ios
    성공적
    토이 프로젝트
    초보
    객체지향
    협업
    SWIFT
    Swift를 스프링처럼 사용하기
    root
    백엔드
    동아리 관리 웹
    슬축생
    pwnable.kr
    성공적:D
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.4
Archan
HTML FrameSet , Frame 태그 :: Arch4n
상단으로

티스토리툴바