【HTML】404 페이지를 만드는 방법

1869 단어 HTML초보자프로그래밍 공부 일기

프로그래밍 공부 일기



2020년 10월 24일
404페이지를 커스터마이즈하는 방법을 처음 알았으므로 정리한다.

404면이란?



먼저 404 페이지에 대해 설명한다.
  • 삭제 된 페이지에 액세스 할 때
  • 잘못된 URL을 입력하면

    • 404 페이지는 상기와 같이 존재하지 않는 페이지에 유저가 링크했을 때에 표시되는 에러 페이지이다. 서버에 액세스했을 때의 표시가 404에서 처리되므로, 404 페이지라고 부른다.

    Google 예제


    GitHub 예제


    오리지널 404 페이지에 기술하는 내용



    오리지널 404 페이지를 만드는 포인트를 소개한다.
  • 사이트의 디자인과 통일성을 갖게 한다
  • 다음 행동을 촉구합니다.

    예를 들면 다른 페이지가 파랑을 기조로 하고 있는 것에 대해 404 페이지가 빨강을 기조로 하면 통일성이 없어져 버린다. 그래서 웹사이트의 디자인과 맞추어 갑자기 에러 화면을 낼 때 혼란을 막을 수 있다.
    「페이지를 찾을 수 없습니다」만으로는 유저가 어떻게 하면 좋은지 모르게 되어 버리기 때문에, 페이지의 사이트 맵을 넣거나, 사이트내 검색을 할 수 있도록 하거나, 유저에게 다음의 행동을 촉구할 필요가 있다.

    원본 404 페이지를 표시하는 방법


    .htaccess 를 사용한다. .htaccess 의 파일을 작성해, 404 상태일 때에 어느 페이지를 표시할까라고 설정한다.


    위 그림과 같이 루트 디렉토리에 404.html을 설치하고 .htaccess에 다음을 기술한다.

    .htaccess
    ErrorDocument 404 /404.html

    표시 할 페이지의 경로는 루트 경로로 작성됩니다.

    참고문헌



    HTML로 404페이지의 작성 방법을 현역 엔지니어가 해설【초보자용】
    오리지널 404(Not Found) 페이지를 올바르게 만드는 방법
    • 【HTML】 셀렉트 박스를 사용해 보았다
    【JavaScript】 이미지를 무작위로 표시하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage