글 작성 이유
현재 dhtmlx를 이용해서 프런트를 구성하는 프로젝트를 하고 있다.
작업 중 페이지 소스를 보려고 오른쪽 클릭을 하니 평소에는 보이지 않던 프레임 소스보기와 프레임 새로고침이 생겼다.
이게 뭔가 싶어서 차이점을 찾아보니 제대로 설명되어있는 블로그 글이 하나도 없어
나름 혼자 조사해보면서 정리된 내용으로 간단하게 결론을 내려보려고 한다.
프레임 이란 무엇일까?
간단히 말하면 복수의 웹 페이지가 구획별로 나뉘어서 동시에 표시되게 하는 태그이다.
그럼 사진으로 좀 더 명확히 보자.
HTML 구조
평소 우리가 보는 웹페이지는 위와 같이 하나의 html에 여러가지 태그로 짜여져있다.
하지만 우리가 궁금해하는 프레임은 위와 같은 하나의 html이 아니라
프레임 구조
위와 같이 태그의 공간이 html로 대체되어 각각 <frame> 단위로 화면을 구성하게 된다. (태그 -> html)
(<iframe>과 <frame> 차이점 : https://otep.tistory.com/44 )
그러므로 위의 top.html, left.html, main.html 영역에서 오른쪽 클릭을 하게 되면
각각 영역에 맞는 프레임 소스보기나 프레임 새로고침이 되는 것이다.
TIP.
프레임 소스보기를 하게 되면 URL이 [view-source:홈페이지 주소] 이런 형식으로 되는데
view-source부분만 지워서 검색하면 해당 페이지만 화면에서 떼어내서 바로 볼 수 있다.
※ URL 뒤에 #none이 붙어있는 경우 프레임화면이 나오지 않는다.
결론
오른쪽 클릭을 해봐서 프레임 소스보기가 나온다?
홈페이지가 프레임 단위(여러개의 html)로 구성되어있구나
페이지 소스보기로는 내가 현재 보고 있는 페이지를 전부 볼 수는 없겠다고 생각하면 된다.