프레임(World Wide Web)

Frame (World Wide Web)
HTML
비교

웹 브라우저의 맥락에서 프레임은 웹 페이지나 브라우저 창의 일부로서 컨테이너와 독립적으로 콘텐츠를 로드할 수 있는 기능을 가지고 있다.프레임에 표시된 HTML 또는 미디어 요소는 다른 웹 사이트에서 제공될 수 있지만,[1] 프레임이라고 알려진 이러한 관행이 오늘날 종종 동일한 원산지 정책의 위반으로 간주되고 저작권 침해의 한 형태로 간주되고 있다.

HTML에서 프레임셋은 웹 페이지와 미디어를 지시할 수 있는 명명된 프레임의 그룹이다. iframe은 문서의 본문 내부에 프레임을 배치하는 것을 제공한다.

2000년대 초반부터 프레임셋 사용은 사용성 및 접근성 문제로 구식인 것으로 간주되어 HTML5 표준에서 기능이 삭제되었다.

태그 및 속성

HTML의 프레임은 다음을 사용하여 생성된다.<frameset></frameset>꼬리표를 달다그<frameset>태그는 프레임을 만드는 데 사용되는 다른 모든 태그의 컨테이너 태그다.그<frameset>태그가 다음을 대체한다.<body>액자에 끼우다그<frameset>태그는 창을 프레임으로 나누는 방법을 정의한다.

각 프레임셋은 행 또는 열의 집합을 정의한다.사용자가 프레임을 정의한 경우rows그러면 수평 프레임이 생성된다.사용자가 프레임을 정의한 경우cols그러면 수직 프레임이 만들어진다.

그<noframes>이 예에서처럼 프레임이 비활성화된 웹 브라우저(또는 프레임을 지원하지 않는 브라우저)가 사용자에게 무언가를 표시할 수 있도록 요소를 포함할 수 있다.

<<frameset cols="85%%, 15%" > <프레임 src="http://www.example.com/frame_1.html" name="frame_1"> <프레임 src="http://alt.example.com/frame_2.html" name="frame_2"><노프레임> 당신의 브라우저는 프레임을 지원하지 않는다.<a href="http://www.example.com/frame_1.html" 프레임 1. 를 보려면 여기를 클릭하십시오. <a href="http://alt.example.com/frame_2.html" 프레임 2. </noframes> </locket>을 보려면 여기를 클릭하십시오.

프레임셋에는border기여하다0보다 큰 정수로 설정된 경우, 사용자는 다음이 아닌 경우 이 테두리를 끌어서 프레임 크기를 조정할 수 있다.noresize속성이 프레임 요소에 존재한다.테두리를 0으로 설정하면 테두리가 표시되지 않고 서로 다른 프레임의 콘텐츠가 구분 없이 서로 보완된다.

그iframe요소는 일반적인 HTML 본문 내에서 인라인으로 사용되며, 초기 내용과 이름을 정의한다.frame원소의내부 텍스트<iframe></iframe>iframe 태그를 이해하지 못하는 브라우저에 태그 쌍이 표시된다. 

<iframe src="http://www.example.com/frame_1.html" 높이="migure" width="midwidth"="migram") 브라우저에서 iframes를 지원하지 않는다.<a href="http://www.example.com/frame_1.html" 내용을 보려면 여기를 클릭하십시오.</이프라임>

역사

Netscape Navigator 2.0은 1996년 3월에 프레임에 사용된 요소를 소개하였다.애플과 사이버독과 같은 다른 브라우저 업체들도 그 해 말에 그 뒤를 이었다.[2]당시 넷스케이프는 월드와이드웹컨소시엄(W3C)에 HTML 3.0 표준에 포함시킬 프레임을 제안했다.[3]

프레임은 웹메일 서비스와 웹 채팅 사이트와 같은 초기 온라인 잡지 및 웹 앱을 표시하고 탐색하는 데 사용되었다.프레임은 서버측 포함 또는 CGI 지원 등의 서버 기능을 요구하지 않고 요소를 사이트 전체에 표시할 수 있는 장점이 있었다.이러한 기능들은 대중이 접근할 수 있는 초기 웹 서버에서는 흔하지 않았다.

초기 웹사이트들은 종종 위쪽에 있는 프레임을 사용하여 스크롤할 수 없는 배너를 표시했다.이 배너 프레임들은 때때로 광고뿐만 아니라 사이트의 로고를 포함했다.[4]

HTML 4의 후속으로 의도된 XHTML은 1.1에서 모든 프레임을 제거했다.최종적으로는 XFrames가 대체될 예정이었는데, XFrames는 복합 URI를 통해 인구밀집 프레임셋을 해결하는 문제를 해결하려고 시도했다.[5]

HTML 4와는 다른 접근방식을 취했던 후기 HTML5 표준도 프레임셋을 제거한다.[6]그iframe그러나 사이트 간 컨텐츠를 공유하기 위한 여러 "변경" 옵션이 있는 요소는 그대로 남아 있다.[7]

이점

콘텐츠를 독립적으로 로드하고 탐색할 수 있게 함으로써 프레임은 처음 개발되었을 때 사용하던 일반 HTML에 비해 다음과 같은 몇 가지 이점을 제공하였다.

  • 탐색 데이터와 같이 전체 또는 대부분의 페이지에서 공유되는 콘텐츠의 유지 [8]관리 간소화항목을 사이드바 탐색 메뉴에 추가해야 하는 경우, 웹 페이지 작성자는 하나의 웹 페이지 파일만 변경해야 하는 반면, 기존의 비프레임셋 웹 사이트의 각 페이지는 사이드바 메뉴가 모두 표시되면 편집해야 한다.
  • 변경되지 않은 페이지 부분을 다시 다운로드하지 않음으로써 필요한 대역폭 양 감소.
  • 각 섹션을 독립적으로 스크롤할 수 있는 기능과 함께 여러 개의 정보를 나란히 볼 수 있도록 허용.여기에는 두 사진이나 비디오의 나란히 비교하거나, 비디오, 이미지, 애니메이션, 3D 회전 객체 등 독립적으로 텍스트 스크롤 페이지와 같이 무언가를 이해하는 두 가지 다른 방법이 포함될 수 있다.
  • 각주 또는 디브레이션을 링크할 때 페이지의 전용 섹션에 표시할 수 있도록 하여, 독자가 본문에서 자신의 위치를 잃지 않도록 한다.

비판

HTML 콘텐츠를 프레임화하는 관행은 가용성 및 접근성 문제를 중심으로 수많은 비판을 초래했다.여기에는 다음이 포함된다.

  • 프레임은 브라우저에 표시된 내용과 URL 사이의 ID를 파괴하여 프레임셋[9] 내의 특정 컨텐츠 항목에 연결하거나 즐겨찾기를 지정하기 어렵게 한다.
  • 프레임 구현이 서로 다른 브라우저에서[9] 일관되지 않음
  • 재료를 선형적으로 렌더링하는 브라우저는 프레임을 잘 다루지 못한다.[10]
  • 프레임은 웹 인덱싱을 복잡하게 하고 검색 엔진 최적화에 해로울 수 있다.[12]
  • 프레임은 서로 다른 서버에 있는 컨텐츠 사이의 경계를 혼동하여 저작권[14] 침해의 문제를 제기한다.[13]
  • 검색 엔진에서 도착하는 방문자는 프레임으로 표시하기 위한 페이지에 착륙할 수 있으므로 방문자는 사이트의 나머지 부분으로[15] 이동할 방법이 없다.
  • 프레임은 뒤로 버튼의 동작을 바꾼다.[15]
  • 사용자들은 보통 브라우저가 그들이 하는 방식으로 프레임을 인쇄할 것이라고 기대하지 않는다.[14]
  • 링크의 기본 동작은 작성자가 달리 지정하지 않을 경우 현재 프레임에 로드되는 것이기 때문에 프레임을 사용하는 웹 페이지의 외부 링크는 프레임셋에 다른 페이지를 표시할 수 있다.이것은 다른 사이트의 콘텐츠가 실제로 프레임셋을 호스팅하는 사이트의 일부인 것처럼 보이게 하기 위해 비양심적인 웹마스터에 의해 사용될 수 있다.
  • 화면 해상도나 브라우저 창 크기가 너무 낮으면 각 프레임에는 스크롤 막대가 있어 지저분해 보이고 이미 제한된 공간을 모두 사용할 수 있다.이러한 동작은 일반적으로 불량 사이트 설계(유체 레이아웃 대신 고정된 레이아웃)에서 더 많이 발생하며, 모든 프레임셋 기능이 적절하게 사용되지는 않았다.
    이러한 행동은 다음과 같이 완화될 수 있다.
    • 일반적으로 스크롤 막대가 필요하지 않은 작은 프레임의 스크롤 사용 안 함.
    • 내용이 처음부터 가로 스크롤 막대를 발생시키지 않도록 고정 설계 대신 대상 페이지에 유동 설계 특성을 사용한다.

대안

웹 기술이 발전하면서 프레임을 사용하는 목적의 많은 부분이 프레임으로 식별되는 문제를 피할 수 있는 방식으로 가능해졌다.

  • CSS(Cascading Style Sheets)는 페이지 요소를 독립적으로 스크롤할 수 있도록 허용했다(사용:overflow속성) 또는 다른 콘텐츠가 스크롤되는 동안 화면에 유지(사용)position:fixed)
  • 서버측 포함 - 공유 콘텐츠를 한 번 편집하고 완료된 페이지의 일부로 클라이언트에 자동으로 전송할 수 있도록 허용함; 서버 CPU와 연결 속도가 증가함에 따라, 즉석에서 이 작업을 수행하는 데 필요한 추가 작업이 고려 대상이 되지 않게 되었다.
  • CGI와 웹 지향 스크립팅 언어 및 PHP, Active Server Pages와 같은 웹 개발 프레임워크와 WordPress와 같은 데이터베이스 지원 Content Management Systems는 컨텐츠를 유지하고 내비게이션을 제공하기 위해 훨씬 더 풍부한 옵션을 제공했다.
  • 클라이언트측 스크립팅과 동적 HTML은 사용자의 작업에 따라 페이지의 일부를 시각적으로 교체할 수 있도록 했다.이것은 각주나 지침과 같은 "측면" 콘텐츠를 보여주는 데 훨씬 더 많은 유연성을 허용했는데, 이는 이제 미리 정의된 프레임을 요구하기 보다는 페이지의 어느 곳에나 표시되고 숨겨질 수 있기 때문이다.
  • AJAX는 로그인한 사용자나 다른 이벤트에 기반하여 서버에서 가져와야 하는 경우에도 컨텐츠 페이지 내에서 동적 표시를 허용했다.

프레임셋과 함께 식별된 모든 문제가 이러한 대안적 접근법을 사용함으로써 제거되는 것은 아니다. 예를 들어 DHTML/AJAX 탐색을 많이 사용하는 많은 사이트에서 Back/Forward 탐색, 북마크 지정 및 인덱싱 문제가 남아 있다.

참고 항목

참조

  1. ^ "Connecting to Other Websites". 2 April 2013. What makes framing different is that instead of taking the user to the linked website, the information from that website is imported into the original page and displayed in a special “frame.” Technically, when you’re viewing framed information, your computer is connected to the site doing the framing—not the site whose page appears in the frame.
  2. ^ Garaffa, Dave (23 December 1996). "A Present From Apple: Cyberdog 2.0a1" (Press release). Internet.com. Archived from the original on 17 August 2000. Retrieved 14 April 2011.
  3. ^ Ladd, Eric. "Using HTML 3.2, Java 1.1, and CGI; Ch. 13, Frames". Archived from the original on 30 October 2007.
  4. ^ Shafer, Dan (1996). JavaScript & Netscape wizardry. Scottsdale, AZ: Coriolis Group Books. pp. 31. ISBN 978-1-883577-86-5.
  5. ^ "XFrames working draft". W3C.
  6. ^ HTML 5와 HTML 4의 차이점: "Frame, Frameet, noframe 등의 부정적인 방식으로 최종 사용자의 가용성 및 접근성에 영향을 미치기 때문에 HTML 5에는 다음 요소가 없다."
  7. ^ HTML 5와 HTML 4의 차이점: "iframe에 대한 새로운 샌드박스 기능"
  8. ^ "Framesets".
  9. ^ a b Nielsen, Jakob (December 1996). "Frames Suck Most of the Time".
  10. ^ "Should You Use Frames?". HTML Code Tutorial.
  11. ^ "G.E.Boyd's How To Do Just About Anything by email – Part 1". GeoCities. 11 August 2000. Archived from the original on 17 August 2000. Retrieved 24 June 2010.
  12. ^ Moore-Eded, Piers. "SEO fundamentals 1". Lewes SEO. Retrieved 25 February 2012.
  13. ^ "I Hate Frames Club".
  14. ^ a b "Why are frames so evil?".
  15. ^ a b "The Pros and Cons of Frames in Web Pages".

외부 링크