[frameset] 프레임셋으로 감싼 홈페이지 (+iOS 모바일 모멘텀 스크롤 오류)

FRAMESET ? 

---

회사에서 오래된 웹페이지의 유지보수가 들어오면 대부분 테이블로 코딩돼 있고 메인 페이지가 프레임셋으로 감싸진 경우가 많다. 

 

프레임은 html 문서 여러개가 한 화면에 보이도록 화면의 공간을 나누는 개념으로 복수의 frame을 하나의 frameset이 감싸고 있는 구조를 가진다. iframe과 다른 점이 있다면 frame은 화면 전체를 분할할 때 사용, iframe은 화면 내에서 작은 프레임을 만들 때 사용 (화면 일부를 분할해 영상이나 지도 등을 삽입할 때 iframe 사용)

 

frameset 하나가 문서 하나일 수도 있고 여러 개의 frameset이 모여 페이지 하나를 이루고 있는 경우도 있다. 전체가 하나의 frameset으로 되어 있고 하위 frame이 또 다른 frameset과 형제 구조를 가지는 등등 복잡한 구조도 있음

 

frameset이 하나인 페이지를 예를 들면 아래와 같음

 

<frameset>

     <frame src="main.html" name="main">

     <frame src="bottom.inc" name="bottom">

</frameset>

 

그래서 index.html 파일을 찾아 들어가보면 위와 같이 내용이 몇 줄 없고 내용은 main.html로 include, top이나 bottom도 다른 파일로 include 되어 있는 경우가 많음 (top.inc, bottom.inc 등)

또 메인에서 서브페이지로 이동하더라도 주소창의 도메인이 변하지 않는다는 특이점이 있음 (만약 서브페이지 주소를 알고 싶다면 메인 페이지 뒤에 /index.html을 치고 서브페이지로 이동하면 됨)

 

 

 

Frameset과 Frame의 속성

---

Frameset의 속성

- cols : 세로로 나누어지는 길이 (px이나 %로 지정)

- rows : 가로로 나누어지는 길이 (px이나 %로 지정)

- frameborder : 프레임 간 border 표시 유무 (0은 border 없음, 1은 border 있음)

- border : border의 두께를 px로 지정

- bordercolor : border의 색상 지정

- framespacing : 프레임셋 내에서 프레임 간의 간격을 px로 지정

 

Frame의 속성

- src : 해당 프레임으로 연결될 문서의 경로

- name : 해당 프레임의 이름 지정 (target에서 사용될 이름)

- scrolling : yes는 프레임 내에 스크롤바 생성, no는 스크롤바 없음, auto는 프레임 내의 내용이 화면을 넘어갈 때만 스크롤이 나타남

- frameborder : 프레임 간 border 표시 유무 (0은 border 없음, 1은 border 있음)

- border : border의 두께를 px로 지정

- bordercolor : border의 색상 지정

- marginheight / marginwidth : 프레임 내에서 상하좌우 여백 지정

- noresize : 프레임 간의 경계선을 마우스로 조절할 수 없도록 함 (속성값 없이 noresize만 씀)

 

 

 

아이폰 스크롤 오류 (momentum scroll)

---

모바일 사파리에서만 스크롤이 되지 않는 경우가 있는데 가로로 스크롤을 넘기면 화면이 튕기면서 옆으로 넘어가지 않는 오류

 

이럴 때는 컨텐츠를 감싼 wrap의 css에 -webkit-overflow-scrolling : touch;를 추가하면 해결됨

 

(참고 : velog.io/@chading/iOS-%EC%82%AC%ED%8C%8C%EB%A6%AC-%EC%8A%A4%ED%81%AC%EB%A1%A4-%ED%9A%A8%EA%B3%BC%EB%A5%BC-%EC%A1%B0%EC%A0%95%ED%95%B4%EB%B3%B4%EC%9E%90)

 

문제는 해당 사이트가 frameset으로 감싸진 구조였는데 main.html로 타고 들어가면 스크롤 오류가 없어졌지만 index.html에서는 오류가 그대로였다 (main.html의 wrap과 body에 -webkit-overflow-scrolling: touch를 추가해도 index.html에서는 스크롤 오류가 해결되지 않았음)

 

frameset은 div나 section보다 상위 개념이라 frameset 자체에게 style을 따로 줄 수 없다

 

결국 제이쿼리를 사용해 디바이스의 width가 모바일인 경우 /main.html로 연결되도록 해서 해결