웹페이지 다른 이름으로 저장시 깨지는 현상
웹페이지를 저장할 때, 많은 사람들이 흔히 겪는 문제 중 하나는 저장된 파일을 열었을 때 페이지 구조나 디자인이 깨지는 현상입니다. 필요한 페이지를 저장하고 나중에 다시 열어보려고하는데 다 깨지면 매우 짜증이나죠.
특히, 깃허브 페이지와 같은 사이트를 저장할 때 이런 문제가 자주 발생하곤 합니다.
웹페이지의 빈 공간에서 마우스 오른쪽 버튼을 클릭하고 ‘다른 이름으로 저장’을 선택하면 HTML 파일 형식으로 저장할 수 있습니다.
저장된 파일을 열게되면 화면과같이 UI가 완전히 깨져서 나오는걸 확인할 수 있습니다.
이 글에서는 이러한 문제를 방지하고 웹페이지를 완벽하게 저장하는 방법을 소개하겠습니다.
웹 페이지 깨지지 않게 저장하는 방법
저장 형식 변경하기
페이지를 저장하려면 저장하고자하는 페이지에서 ctrl +s 또는 마우스 우클릭 - 다른 이름으로 저장을 클릭하여 저장할 수 있습니다.
이때 파일을 저장할때 파일 형식을 웹페이지, 단일 파일 (*.mhtml)로 선택하여 저장합니다.
기본 페이지 저장과의 차이점
웹페이지, 전부로 저장하면 페이지가 저장될 때 HTML 파일과 함께 이미지, CSS, 자바스크립트 파일이 따로 저장됩니다. 저장된 파일을 열어도 원래 웹사이트와 동일한 구조를 유지하지 못하는 경우가 많습니다.
또한 외부 리소스가 누락되거나 경로가 엉키면서 화면이 깨지거나 제대로 작동하지 않는 일이 발생합니다.
하지만 앞서 저장했던 방식대로 웹페이지, 단일 파일로 저장하게되면, HTML, 이미지, CSS 등 모든 리소스가 하나의 파일로 저장됩니다. 따라서 파일을 열 때 외부 리소스를 로드할 필요가 없으며, 구조가 깨질 위험이 없습니다.
또한 단일 파일로 저장되므로 다른 컴퓨터로 파일을 옮기거나 보관하기에도 편리합니다.
이 mhtml 파일을 실제로 열어보면 아까와는 다르게 페이지가 깨지는 문제 없이 정상적으로 웹페이지가 나오는걸 확인할 수 있습니다.