프레임 (월드 와이드 웹)
"오늘의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