프레임 (월드 와이드 웹)
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
프레임(Frames)은 HTML에서 웹 페이지를 여러 개의 독립적인 영역으로 분할하여 각 영역에 다른 HTML 문서를 표시하는 데 사용되는 기술이다. 넷스케이프 네비게이터 2.0에서 처음 도입되었으며, <frameset>, <frame>, <noframes>, <iframe> 등의 태그를 사용하여 구현된다. 프레임은 콘텐츠 관리 단순화, 대역폭 절약, 정보 비교 용이성 등의 장점이 있지만, 사용성과 접근성 문제, 검색 엔진 최적화 문제, 저작권 문제, 보안 문제 등 다양한 비판을 받아왔다. CSS, 서버 측 포함, 웹 스크립팅 언어, 클라이언트 측 스크립팅, AJAX 등 다양한 대체 기술의 등장으로 프레임의 사용은 점차 감소했다.
더 읽어볼만한 페이지
- 웹 1.0 - 전화 접속
전화 접속은 공중 교환 전화망을 통해 모뎀과 전화선으로 인터넷에 연결하는 방식으로, 1980년대부터 사용되었으나 광대역 인터넷의 등장으로 2000년대 이후 사용이 줄어 현재는 제한적으로 사용되며 사라지는 추세이다. - 웹 1.0 - 자바 애플릿
자바 애플릿은 웹 페이지에서 실행되는 자바 기반 프로그램으로, 웹 상호작용성을 높였으나 기술적 문제와 웹 표준 기술 발전에 따라 쇠퇴하여 사용이 중단되었다. - HTML - Alt 속성
`alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다. - HTML - 폰트 패밀리 (HTML)
폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다. - 월드 와이드 웹 - 구글
구글은 래리 페이지와 세르게이 브린이 개발한 웹 검색 엔진에서 출발하여 검색 기술 혁신을 통해 유튜브, 안드로이드 등 다양한 서비스를 제공하는 세계적인 기술 기업으로 성장했지만, 개인정보보호 및 독점 논란에도 직면하고 있다. - 월드 와이드 웹 - 온라인 언론
온라인 언론은 인터넷을 통해 뉴스 및 정보를 제공하며, 디지털 기술 발달과 함께 성장하여 시민 저널리즘 부상, 정보 전달 속도 혁신 등의 특징을 보이지만 정보 신뢰성 문제, 전통 언론 쇠퇴 등의 과제를 안고 있다.
| 프레임 (월드 와이드 웹) | |
|---|---|
| 개요 | |
| 유형 | 웹 페이지 레이아웃 기술 |
| 목적 | 웹 페이지 내에 여러 개의 독립적인 영역 (프레임)을 생성 각 프레임은 별도의 HTML 문서를 표시 |
| 역사 | |
| 도입 시기 | 1990년대 후반 |
| 주요 브라우저 지원 | 넷스케이프 내비게이터, 인터넷 익스플로러 |
| 사용 목적 | 웹 페이지 레이아웃 분할, 광고 삽입 등 |
| 기술적 특징 | |
| HTML 요소 | ``, ` |
| frameset | 웹 페이지를 프레임으로 분할하는 데 사용 HTML 문서 구조 정의 |
| frame | frameset 내에서 개별 프레임을 정의 표시할 HTML 문서 지정 |
| iframe | 인라인 프레임 HTML 페이지 내에 다른 HTML 페이지를 포함하는 데 사용 |
| 장점 | |
| 페이지 분할 | 웹 페이지 레이아웃을 논리적으로 분할 가능 |
| 독립적인 내용 표시 | 각 프레임은 독립적으로 내용을 표시하고 스크롤 가능 |
| 광고 삽입 | 특정 프레임에 광고를 삽입하여 수익 창출 |
| 단점 | |
| 접근성 문제 | 시각 장애인 사용자의 접근성 문제 발생 가능 스크린 리더 호환성 문제 |
| 검색 엔진 최적화 (SEO) 문제 | 검색 엔진이 프레임 내부의 내용을 제대로 인식하지 못할 수 있음 웹 페이지 색인 생성의 어려움 |
| 북마크 및 링크 문제 | 특정 프레임의 내용을 직접 북마크하거나 링크하기 어려움 사용자 경험 저하 |
| 유지 보수 | 복잡한 프레임 구조는 유지 보수를 어렵게 할 수 있음 |
| 대체 기술 | |
| CSS 레이아웃 | ` ` 요소를 사용한 레이아웃, 플렉스박스, 그리드 레이아웃 |
| 서버 사이드 포함 (Server-Side Includes, SSI) | 서버에서 HTML 페이지를 동적으로 조합 |
| AJAX (Asynchronous JavaScript and XML) | 웹 페이지의 일부분만 비동기적으로 업데이트 |
| 보안 문제 | |
| 클릭재킹 (Clickjacking) | 악의적인 웹 사이트가 iframe을 사용하여 사용자를 속이는 공격 사용자가 의도하지 않은 작업을 수행하도록 유도 |
| 교차 사이트 스크립팅 (Cross-Site Scripting, XSS) | iframe을 통해 악성 스크립트를 삽입하여 사용자 정보를 탈취하거나 웹 페이지를 변조하는 공격 |
| 기타 | |
| 표준 준수 | HTML5에서는 `` 및 ` |
| 웹 표준 | 웹 표준을 준수하는 대체 기술 사용 권장 (CSS 레이아웃, SSI, AJAX) |
2. 태그 및 속성
HTML에서 프레임을 생성하고 관리하는 데 사용되는 주요 태그와 속성은 다음과 같다.
- `<frameset>`: 프레임 생성에 사용되는 다른 모든 태그를 포함하는 컨테이너 태그이다. frameset 문서에서 `<body>` 태그를 대체하며, 창을 프레임으로 분할하는 방법을 정의한다. `rows` 속성을 사용하면 수평 프레임이, `cols` 속성을 사용하면 수직 프레임이 생성된다. `border` 속성을 통해 프레임 테두리 크기를 조정할 수 있다.
- `<frame>`: 각 프레임에 표시될 HTML 문서를 지정한다. `src` 속성으로 표시할 문서의 URL을, `name` 속성으로 프레임 이름을 지정하여 다른 프레임이나 링크에서 대상으로 지정할 수 있다.
- `<noframes>`: 프레임을 지원하지 않거나 사용하지 않는 브라우저를 위한 대체 콘텐츠를 제공한다.
- `<iframe>`: HTML 본문 내에 인라인으로 삽입되는 프레임을 정의한다. `<frame>` 요소와 유사하게 초기 콘텐츠와 이름을 정의할 수 있다.
2. 1. <frameset>
HTML에서 프레임은 `<frameset></frameset>` 태그 쌍을 사용하여 생성된다. `<frameset>` 태그는 프레임을 생성하는 데 사용되는 다른 모든 태그의 컨테이너 태그이다. `<frameset>` 태그는 frameset 문서에서 `<body>` 태그를 대체한다. `<frameset>` 태그는 창을 프레임으로 분할하는 방법을 정의한다.각 프레임 세트는 일련의 행 또는 열을 정의한다. 사용자가 `rows` 속성을 사용하여 프레임을 정의하면 수평 프레임이 생성된다. 사용자가 `cols`를 사용하여 프레임을 정의하면 수직 프레임이 생성된다.
`<noframes>` 요소를 포함하여 프레임을 사용하지 않거나 프레임을 지원하지 않는 웹 브라우저가 사용자에게 무언가를 표시할 수 있다. 예시는 다음과 같다.
```html
```
프레임 세트에는 `border` 속성이 있다. 0보다 큰 정수로 설정하면 frame 요소에 `noresize` 속성이 없는 한 사용자는 이 테두리를 드래그하여 프레임의 크기를 조정할 수 있다. border가 0으로 설정되면 테두리가 표시되지 않으며 서로 다른 프레임의 콘텐츠가 구분 없이 서로 맞닿게 된다.
2. 2. <frame>
`<frame>` 태그는 각 프레임에 표시될 HTML 문서를 지정한다. `src` 속성을 사용하여 표시할 문서의 URL을 지정한다. `name` 속성을 사용하여 프레임에 이름을 지정하고, 다른 프레임이나 링크에서 대상으로 지정할 수 있다.[1] `<frame>` 요소는 `<frameset>` 태그 내에서 사용된다.[1]```html
2. 3. <noframes>
`<noframes>` 요소는 프레임을 지원하지 않거나, 프레임 사용을 하지 않도록 설정된 웹 브라우저에서 사용자에게 보여줄 내용을 정의한다.`<noframes>` 요소 사용 예시:
```html
<frameset cols="85%, 15%">
<frame src="http://www.example.com/frame_1.html" name="frame_1">
<frame src="http://alt.example.com/frame_2.html" name="frame_2">
<noframes>
브라우저가 프레임을 지원하지 않습니다.
여기를 클릭하면 frame 1을 볼 수 있습니다.
여기를 클릭하면 frame 2를 볼 수 있습니다.
</noframes>
</frameset>
```
`<iframe>` 태그를 이해하지 못하는 브라우저는 `<iframe></iframe>` 태그 쌍 사이의 텍스트를 표시한다.
```html
<iframe src="http://www.example.com/frame_1.html" height="480" width="640">
브라우저가 iframes을 지원하지 않습니다. 여기를 클릭하면 내용을 볼 수 있습니다.
</iframe>
2. 4. <iframe>
`<iframe>` 요소는 일반 HTML 본문 내에서 인라인으로 사용되며 `<frame>` 요소와 유사하게 초기 콘텐츠 및 이름을 정의한다. `<iframe></iframe>` 태그 쌍 내부의 모든 텍스트는 iframe 태그를 이해하지 못하는 브라우저에 표시된다.[1]iframe영어을 사용한 예시는 다음과 같다.
```html
<iframe src="http://www.example.com/frame_1.html" height="480" width="640">
Your browser does not support iframes. Click here to view the content.
</iframe>
```[1]
3. 역사
넷스케이프 네비게이터 2.0이 1996년 3월 프레임 요소를 도입한 이후, 애플의 사이버독 출시와 함께 다른 브라우저 벤더들도 프레임 기술을 도입하기 시작했다.[2] 넷스케이프는 프레임을 HTML 3.0 표준에 포함시키기 위해 월드 와이드 웹 컨소시엄(W3C)에 제안했다.[3]
초기에는 온라인 잡지나 웹 앱, 웹메일, 웹 채팅 사이트 등에서 프레임을 활용했다. 프레임은 서버 측 인클루드나 CGI 지원과 같은 서버 기능 없이도 사이트 전체 요소를 표시할 수 있게 해 주었으며, 초기 웹 서버 환경에서는 이러한 기능이 일반적이지 않았기 때문에 프레임은 유용하게 사용되었다. 초기 웹사이트들은 상단 프레임에 스크롤이 불가능한 배너를 표시하여 사이트 로고나 온라인 광고를 노출하기도 했다.[4]
이후 HTML 4의 후속으로 의도된 XHTML 1.1에서는 모든 프레임이 제거되었고, XFrames가 복합 URI를 통해 프레임 세트를 처리하는 대체 기술로 제안되었다.[5]
HTML5 표준에서는 XHTML과는 다른 방식으로 프레임 세트를 제거했지만, `iframe` 요소는 사이트 간 콘텐츠 공유를 위한 여러 샌드박싱 옵션과 함께 여전히 남아있다.[7]
3. 1. 넷스케이프 네비게이터와 프레임
넷스케이프 네비게이터 2.0은 1996년 3월에 프레임에 사용되는 요소를 도입했다.[2] 그해 넷스케이프는 HTML 3.0 표준에 프레임을 포함시킬 것을 월드 와이드 웹 컨소시엄(W3C)에 제안했다.[3]3. 2. 초기 웹사이트에서의 활용
넷스케이프 네비게이터 2.0은 1996년 3월에 프레임에 사용되는 요소를 도입했다. 그해 늦게 애플이 사이버독을 출시하며 다른 브라우저 벤더들이 뒤따랐다.[2] 당시 넷스케이프는 HTML 3.0 표준에 포함시키기 위해 프레임을 월드 와이드 웹 컨소시엄(W3C)에 제안했다.[3]프레임은 초기 온라인 잡지 및 웹 앱, 예를 들어 웹메일 서비스 및 웹 채팅 사이트를 표시하고 탐색하는 데 사용되었다. 프레임은 서버 측 인클루드 또는 CGI 지원과 같은 서버 기능 없이 사이트 전체에 요소를 표시할 수 있다는 장점이 있었다. 이러한 기능은 초창기 웹 서버에서는 흔하지 않았고, 일반 대중이 접근할 수 있었다.
초기 웹사이트는 스크롤할 수 없는 배너를 표시하기 위해 상단에 프레임을 사용하는 경우가 많았다. 이러한 배너 프레임에는 사이트의 로고와 온라인 광고가 포함되기도 했다.[4]
3. 3. XHTML과 XFrames
XHTML 1.1은 HTML 4의 후속 버전으로 의도되었으며, 모든 프레임을 제거했다. XFrames는 채워진 프레임 세트를 처리하기 위해 복합 URI를 제공하는 대체 기술로 제안되었다.[5]3. 4. HTML5와 iframe
이후의 HTML5 표준은 XHTML과 다른 방식으로 프레임 세트를 제거했다.[6] `iframe` 요소는 사이트 간 콘텐츠 공유를 위한 여러 "샌드박싱" 옵션과 함께 남아 있다.[7]4. 장점
프레임은 처음 개발되었을 때 사용되던 일반 HTML보다 몇 가지 장점을 제공했다.[8] 그중에는 다음과 같은 장점들이 있다.
- 페이지의 일부를 고정된 상태로 유지할 수 있다. 이는 탐색 메뉴나 배너 광고와 같이 스크롤하여 보이지 않게 하고 싶지 않은 요소에 유용하다.[8]
- 별도의 서버에 있는 리소스를 통합할 수 있다. 예를 들어, 프레임을 사용하여 자신의 자료와 생성된 스레드 토론 자료를 결합할 수 있다.[9]
4. 1. 콘텐츠 관리 단순화
프레임은 처음 개발되었을 때 사용되던 일반 HTML보다 몇 가지 장점을 제공했는데, 그중 하나는 콘텐츠 관리를 단순화한다는 것이다. 예를 들어, 탐색 메뉴와 같이 여러 페이지에서 공유되는 콘텐츠는 한 번만 수정하면 되므로 유지 관리가 용이하다.[8]사이드바 탐색 메뉴에 항목을 추가해야 하는 경우, 웹 페이지 작성자는 프레임셋을 사용하면 하나의 웹 페이지 파일만 변경하면 된다. 하지만 프레임셋이 아닌 기존 웹사이트에서는 사이드바 메뉴가 모든 페이지에 나타나는 경우 각 페이지를 편집해야 했다.[8]
4. 2. 대역폭 절약
프레임은 변경되지 않은 페이지 부분을 다시 다운로드하지 않음으로써 필요한 대역폭을 줄인다.[8]4. 3. 정보 비교 용이성
프레임은 여러 정보를 나란히 표시하고 각 섹션을 독립적으로 스크롤할 수 있게 해준다. 이는 두 개의 사진이나 비디오를 비교하거나, 비디오, 이미지, 애니메이션 등 옆에 독립적으로 스크롤되는 텍스트 페이지를 통해 내용을 이해하는 두 가지 방법을 제시하는 데 유용하다.[8]4. 4. 문맥 유지
프레임은 콘텐츠를 독립적으로 불러오고 탐색할 수 있게 함으로써 처음 개발되었을 때 사용되던 일반 HTML보다 몇 가지 장점을 제공했다.[8]- 각주 또는 추가 내용을 연결했을 때 페이지의 전용 섹션에 나타나도록 하여 독자가 본문의 위치를 잃지 않도록 한다.
- 여러 정보를 나란히 볼 수 있게 하여 각 섹션을 독립적으로 스크롤할 수 있게 한다. 여기에는 두 개의 사진 또는 비디오를 나란히 비교하거나, 비디오, 이미지, 애니메이션, 3D 회전 객체 등 옆에 독립적으로 스크롤되는 텍스트 페이지와 같이 무언가를 이해하는 두 가지 다른 방법이 포함될 수 있다.
- 프레임의 주요 장점은 다른 부분이 스크롤되는 동안 페이지의 일부가 고정된 상태로 유지되도록 한다는 것이다. 이는 탐색 옵션이나 배너 광고와 같이 스크롤하여 보이지 않게 하고 싶지 않은 요소에 유용하다.
- 모든 페이지 또는 대부분의 페이지에서 공유되는 콘텐츠(예: 탐색 데이터)의 유지 관리를 단순화한다.[8] 사이드바 탐색 메뉴에 항목을 추가해야 하는 경우 웹 페이지 작성자는 하나의 웹 페이지 파일만 변경하면 되지만, 프레임셋이 아닌 기존 웹사이트의 개별 페이지는 사이드바 메뉴가 모든 페이지에 나타나는 경우 각 페이지를 편집해야 한다.
- 변경되지 않은 페이지 부분을 다시 다운로드하지 않음으로써 필요한 대역폭을 줄인다.
- 프레임은 별도의 서버에 있는 리소스를 통합한다. 예를 들어, 프레임을 사용하여 자신의 자료(및 탐색 그래픽)와 생성된 스레드 토론 자료를 결합할 수 있다.[9]
5. 비판
HTML 콘텐츠 프레이밍(framing)은 사용성과 접근성 문제를 야기하여 많은 비판을 받았다.[10] 프레임은 브라우저의 기본 기능을 방해하고, 웹 표준을 준수하지 않게 하며, 사용자 경험을 저해한다.
5. 1. 사용성 및 접근성 문제
HTML 콘텐츠 프레이밍(framing) 관행은 사용성과 접근성에 대한 우려로 인해 많은 비판을 받았다. 주요 문제점은 다음과 같다.[10]- 프레이밍은 브라우저에 표시되는 콘텐츠와 URL 간의 연결을 끊어, 프레임셋 내 특정 콘텐츠에 대한 링크나 북마크를 어렵게 만든다.[10]
- 브라우저마다 프레임 구현 방식이 일관되지 않다.[10]
- 자료를 선형으로 렌더링하는 브라우저는 프레임을 제대로 처리하지 못한다.[11]
- 스크린 리더 프로그램
- 텍스트 또는 오디오 브라우저
- Agora와 같은 이메일 브라우저[12]
- 모바일 브라우저
- 프레이밍은 웹 인덱싱을 복잡하게 만들어 검색 엔진 최적화에 부정적인 영향을 줄 수 있다.[13]
- 프레이밍은 다른 서버의 콘텐츠 간 경계를 모호하게 하여[14] 저작권 침해 문제를 야기할 수 있다.[15]
- 검색 엔진을 통해 방문한 사용자는 프레임에 표시될 의도로 만들어진 페이지에 도착할 수 있으며, 이 때문에 사이트의 다른 부분으로 이동하지 못할 수 있다.[16]
- 프레임은 뒤로 가기 버튼의 동작을 변화시킨다.[16]
- 사용자는 일반적으로 브라우저가 프레임을 인쇄하는 방식을 예상하기 어렵다.[15]
- 프레임을 사용하는 웹 페이지의 외부 링크는 다른 페이지가 프레임셋에 나타나게 할 수 있다. 이는 링크의 기본 동작이 작성자가 별도로 지정하지 않는 한 현재 프레임에 로드되는 것이기 때문이다. 부도덕한 웹마스터는 이를 이용하여 다른 사이트의 콘텐츠가 마치 프레임셋을 호스팅하는 사이트의 일부인 것처럼 보이게 할 수 있다.
- 화면 해상도나 브라우저 창 크기가 너무 작으면 각 프레임에 스크롤 막대가 나타나서 보기 좋지 않고, 이미 제한된 공간을 차지한다. 이러한 동작은 일반적으로 모든 프레임셋 기능을 제대로 활용하지 않는, 잘못된 사이트 디자인(고정 레이아웃 대신 유동 레이아웃)에서 더 많이 발생했다. 이러한 동작은 다음 방법으로 완화할 수 있다.
- 일반적으로 스크롤 막대가 필요하지 않은 작은 프레임의 스크롤을 비활성화한다.
- 고정 디자인 대신 대상 페이지에서 유동 디자인 특성을 사용하여 콘텐츠가 처음부터 가로 스크롤 막대를 생성하지 않도록 한다.
5. 2. 검색 엔진 최적화 문제
프레임은 웹 인덱싱을 복잡하게 만들고 검색 엔진 최적화에 부정적인 영향을 줄 수 있다.[13] 검색 엔진을 통해 사이트를 방문한 사용자는 프레임 안에 표시될 페이지로 바로 이동하게 되어, 사이트의 다른 부분을 탐색하기 어려워질 수 있다.[16]5. 3. 저작권 문제
프레이밍은 다른 서버의 콘텐츠 간의 경계를 모호하게 하여[14] 저작권 침해 문제를 일으킬 수 있다.[15]5. 4. 사용자 경험 저해
프레이밍은 브라우저에 표시되는 콘텐츠와 URL 간의 식별을 깨뜨려 프레임셋 내에서 특정 콘텐츠 항목에 링크하거나 북마크하기 어렵게 만든다.[10] 프레임 구현은 브라우저마다 일관성이 없다.[10] 자료를 선형으로 렌더링하는 브라우저는 프레임을 제대로 처리하지 못한다.[11] 여기에는 다음이 포함된다.프레이밍은 웹 인덱싱을 복잡하게 만들고 검색 엔진 최적화에 해로울 수 있다.[13] 프레이밍은 다른 서버의 콘텐츠 간의 경계를 혼란스럽게 하여[14] 저작권 침해 문제를 제기한다.[15] 검색 엔진에서 방문한 사용자는 프레임에 표시되도록 의도된 페이지에 도착할 수 있으며, 이로 인해 방문자는 사이트의 나머지 부분으로 이동할 수 없게 된다.[16] 프레임은 뒤로 가기 버튼의 동작을 변경한다.[16] 사용자는 일반적으로 브라우저가 프레임을 인쇄하는 방식을 예상하지 않는다.[15]
프레임을 사용하는 웹 페이지의 외부 링크는 다른 페이지가 프레임셋에 나타나게 할 수 있다. 이는 링크의 기본 동작이 작성자가 달리 지정하지 않는 한 현재 프레임에 로드되는 것이기 때문이다. 이는 부도덕한 웹마스터가 다른 사이트의 콘텐츠가 실제로 프레임셋을 호스팅하는 사이트의 일부인 것처럼 보이게 하는 데 사용될 수 있다.
화면 해상도 또는 브라우저 창 크기가 너무 낮으면 각 프레임에 스크롤 막대가 나타나 지저분해 보일 수 있으며 이미 제한된 공간을 차지한다. 이러한 동작은 일반적으로 모든 프레임셋 기능을 제대로 사용하지 않는, 잘못된 사이트 디자인(고정 레이아웃 대신 유동 레이아웃)에서 더 많이 발생했다. 이러한 동작은 다음과 같은 방법으로 완화할 수 있다.
- 일반적으로 스크롤 막대가 필요하지 않은 더 작은 프레임의 스크롤을 비활성화한다.
- 고정 디자인 대신 대상 페이지에서 유동 디자인 특성을 사용하여 콘텐츠가 처음부터 가로 스크롤 막대를 생성하지 않도록 한다.
6. 보안
프레임은 동일 출처 정책 시행에 어려움을 야기하여 보안 문제를 일으킬 수 있다. 예를 들어, 외부 페이지가 투명하게 만들어진 내부 페이지(iframe 요소를 사용하여 로드됨)를 통해 사용자를 속여 특정 동작을 수행하게 만들 수 있다.[1]
6. 1. 동일 출처 정책 (Same-Origin Policy)
프레임은 동일 출처 정책 시행에 기술적 및 사용자 인터페이스 측면에서 어려움을 야기한다. 후자의 예시로, 외부 페이지는 99% 투명하게 만들어진 내부 페이지(iframe 요소를 사용하여 로드됨)에서 사용자가 어떤 동작을 수행하도록 속일 수 있다.[1]7. 대체 기술
웹 기술이 발전하면서 프레임이 사용되던 많은 목적은 프레임 관련 문제를 피하는 방식으로 가능해졌다.[1]
- CSS: 페이지 요소를 독립적으로 스크롤하거나 화면에 고정할 수 있다.
- 서버 측 포함: 공유 콘텐츠를 한 번 편집하여 완성된 페이지의 일부로 클라이언트에 자동으로 제공할 수 있다.
- CGI, PHP, Active Server Pages 등의 웹 기반 스크립팅 언어 및 웹 개발 프레임워크, WordPress 같은 데이터베이스 기반 콘텐츠 관리 시스템: 콘텐츠 유지 관리 및 탐색 기능을 제공한다.
- 클라이언트 측 스크립팅, 동적 HTML: 사용자의 행동에 따라 페이지의 일부를 시각적으로 바꿀 수 있다.
- AJAX: 페이지 내에서 콘텐츠를 동적으로 표시할 수 있다.
7. 1. CSS (Cascading Style Sheets)
웹 기술이 발전하면서, CSS의 `overflow` 속성을 사용하여 페이지의 요소를 독립적으로 스크롤하거나, `position:fixed` 속성을 사용하여 다른 콘텐츠가 스크롤되는 동안에도 화면에 고정할 수 있게 되었다.[1]7. 2. 서버 측 포함 (Server-Side Includes)
웹 기술이 발전하면서, 서버 측 포함을 사용하여 공유 콘텐츠를 한 번만 작성하고 서버에서 자동으로 완성된 페이지에 포함시킬 수 있게 되었다. 서버 CPU와 연결 속도가 빨라짐에 따라, 이러한 작업을 즉석에서 처리하는 데 필요한 추가적인 부담은 크게 줄어들었다.[1]7. 3. 웹 스크립팅 언어 및 프레임워크
웹 기술이 발전하면서, CGI, PHP, Active Server Pages와 같은 웹 기반 스크립팅 언어 및 웹 개발 프레임워크, 그리고 WordPress와 같은 데이터베이스 기반 콘텐츠 관리 시스템은 콘텐츠를 관리하고 탐색 기능을 제공하는 데 훨씬 더 풍부한 옵션을 제공하게 되었다.[1] 클라이언트 측 스크립팅 및 동적 HTML을 사용하면 사용자의 행동에 따라 페이지의 일부를 시각적으로 바꿀 수 있게 되어 주석이나 지침과 같은 "사이드" 콘텐츠를 훨씬 더 유연하게 표시할 수 있는데, 이는 미리 정의된 프레임이 필요 없이 페이지 어디에서나 표시하고 숨길 수 있게 되었기 때문이다.[1] AJAX를 사용하면 로그인한 사용자 또는 다른 곳에서 발생한 이벤트에 따라 서버에서 가져와야 하는 경우에도 페이지 내에서 콘텐츠를 동적으로 표시할 수 있다.[1]7. 4. 클라이언트 측 스크립팅 및 동적 HTML
클라이언트 측 스크립팅 및 동적 HTML을 사용하면 사용자의 행동에 따라 페이지의 일부를 시각적으로 바꿀 수 있다. 이를 통해 주석이나 지침과 같은 부가적인 콘텐츠를 훨씬 더 유연하게 표시할 수 있는데, 미리 정의된 프레임 없이도 페이지 어디에서나 표시하고 숨길 수 있기 때문이다.[1]AJAX를 사용하면 로그인한 사용자나 다른 곳에서 발생한 이벤트에 따라 서버에서 가져와야 하는 경우에도 페이지 내에서 콘텐츠를 동적으로 표시할 수 있다.[1]
7. 5. AJAX (Asynchronous JavaScript and XML)
AJAX를 사용하면 페이지를 다시 로드하지 않고도 서버에서 데이터를 가져와 페이지 내에서 콘텐츠를 동적으로 표시할 수 있다.[1]참조
[1]
웹사이트
Connecting to Other Websites
https://fairuse.stan[...]
2013-04-02
[2]
간행물
A Present From Apple: Cyberdog 2.0a1
http://browserwatch.[...]
Internet.com
2011-04-14
[3]
웹사이트
Using HTML 3.2, Java 1.1, and CGI; Ch. 13, Frames
http://docs.rinet.ru[...]
[4]
서적
JavaScript & Netscape wizardry
https://archive.org/[...]
Coriolis Group Books
[5]
웹사이트
XFrames working draft
http://www.w3.org/TR[...]
W3C
[6]
문서
HTML5 differences from HTML4
http://www.w3.org/TR[...]
[7]
문서
HTML5 differences from HTML4
http://www.w3.org/TR[...]
[8]
웹사이트
Framesets
http://www.howtocrea[...]
[9]
뉴스
CSS and SEO
https://www.benhaimd[...]
2022-01-28
[10]
웹사이트
Frames Suck Most of the Time
http://www.useit.com[...]
1996-12
[11]
웹사이트
Should You Use Frames?
http://www.htmlcodet[...]
HTML Code Tutorial
2010-04-07
[12]
웹사이트
G.E.Boyd's How To Do Just About Anything by email – Part 1
http://www.geocities[...]
GeoCities
2010-06-24
[13]
웹사이트
SEO fundamentals 1
http://www.lewesseo.[...]
Lewes SEO
2012-02-25
[14]
웹사이트
I Hate Frames Club
http://budugllydesig[...]
[15]
웹사이트
Why are frames so evil?
http://www.html-faq.[...]
[16]
웹사이트
The Pros and Cons of Frames in Web Pages
http://www.mediacoll[...]
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com