관리 메뉴

키스세븐

404 에러페이지 만들기 - .htaccess 파일 (404 error 페이지 404.html) 본문

홈피와 블로그

404 에러페이지 만들기 - .htaccess 파일 (404 error 페이지 404.html)

키스 키스세븐 2019. 2. 13. 10:07
공유하기 링크
필요하면 공유하세요 ^^
이 블로그를 북마크 하세요! 좋은 정보가 계속 이어집니다.

[404 에러페이지 만들기 (404 error 페이지 404.html) - .htaccess 파일]


유명 사이트들은 잘못된 주소로 접근을 하면 "에러 페이지"라는 안내를 해주는 화면이 뜹니다. 이것을 '404 에러페이지' 또는 '404.html'라고 합니다. 물론 개인 홈페이지를 운영하는 경우라도 이런 것을 쉽게 만들 수 있습니다. 그 파일을 .htaccess라고 합니다. FTP 업로드만 할 줄 만다면 누구나 에러페이지를 만들어서 방문자의 실수를 안내해 줄 수가 있습니다. 






초보자라면 미리 읽어두기


404 에러페이지 만들기를 하기 전에 어떤 경우에 이것이 필요한지 알아봅시다. 예를 들어 www.kiss7.kr이라는 홈페이지를 운영하고 있다고 할 때, 그 아래에 http://www.kiss7.kr/index.html 같은 파일이 있을 것입니다. 그렇다면 '구글'이나 '다음' 같은 검색엔진이 이것을 검색결과에 보여줄 것입니다. 그런데 만약 이 파일이 index_pc.html로 바뀌었다면 어떻게 될까요? 접속이 안 될 것이고 방문자는 사이트가 망한 줄 알고 다시는 오지 않을 것입니다. 


사진: 에러페이지를 만들면 방문자에게 믿음을 줄 수 있다(에러페이지를 만들면 방문자에게 믿음을 줄 수 있다 [404 에러페이지 만들기 error .htaccess] / ⓒ www.kiss7.kr)


이렇게 사이트가 정상적으로 운영되지만 사소한 접속 경로 오류 때문에 방문자가 가버리는 상황을 막기 위해서 이용하는 것이 '404 error 페이지'입니다. 단, 블로그 같은 서비스를 받는 경우에는 불가능하고, 웹호스팅을 받고 있어서 FTP를 이용할 수 있을 경우에만 가능합니다. 그리고 FTP를 사용할 줄 알아야 합니다. 그런데 이게 매우 간단하므로 초보자도 쉽게 할 수 있습니다. 




.htaccess 파일 만들기


먼저 .htaccess 파일을 만들어 봅시다. (FTP에서 바로 만드는 등의 여러 방법이 있지만 가장 기본적인 방법으로 진행합니다.) 

사실 .htaccess 파일은 그냥 텍스트 파일입니다. 메모장을 열어서 만들면 됩니다. 컴퓨터를 사용한다면 누구나 메모장을 열어서 404 에러페이지 만들기를 할 수 있습니다. 


메모장에 아래와 같은 내용을 입력합니다. 이것이 404 에러페이지의 정체입니다. 단, 사이트의 주소를 자신의 것으로 바꿔야 합니다. 물론 404.html도 다른 것으로 바꿀 수 있습니다. 


ErrorDocument 404 http://사이트주소/404.html



사진: .htaccess 파일은 저장할 때 특히 주의해서 한다(.htaccess 파일은 저장할 때 특히 주의해서 한다 [404 에러페이지 만들기 error .htaccess] / ⓒ www.kiss7.kr)


입력을 한 후 저장을 할 때는 매우 주의해야 합니다. 대부분의 초보자는 저장을 잘 못해서 404 error 페이지 만들기에 실패합니다. 

저장할 때의 파일이름에 .htaccess라고 입력합니다. 특히 점이 하나 있다는 것을 잊으면 안됩니다. 이 점 앞에는 아무것도 쓰면 안됩니다. 오른쪽 끝에 확장명도 적으면 안됩니다. 오직 '.htaccess'만 있어야 합니다. 다른 것은 아무것도 붙지 않도록 해야 합니다. 

그리고 파일이름 적는 곳의 바로 아래를 보면 '파일형식'이 있는데, 여기에 '텍스트 문서(*.txt)'라고 되어 있을 것입니다. 여기를 '모든 파일(*.*)'로 바꿉니다. 

또한 그 아래에는 '인코딩'이라고 있습니다. 여기에서 'ANSI'를 선택합니다. 




404 에러페이지 올리기


이렇게 만든 .htaccess 파일을 FTP 프로그램으로 웹서버에 업로드합니다. 물론 초보자는 FTP 접속방법을 미리 배워둬야 이것을 할 수 있습니다. 

중요한 것은 업로드 위치입니다. 마음대로 변경하면 안 됩니다. 반드시 www 안에 넣어야 합니다. FTP에서 www 디렉토리를 클릭하고 들어간 후 바로 업로드한다는 얘기입니다. 다른 곳에 업로드하면 안 됩니다. 예를 들어 www 아래의 test 같은 다른 폴더에 올리며 안 된다는 것입니다. 


사진: .htaccess를 FTP로 올릴 때 반드시 www인지 경로를 확인한다(.htaccess를 FTP로 올릴 때 반드시 www인지 경로를 확인한다 [404 에러페이지 만들기 error .htaccess] / ⓒ www.kiss7.kr)


404 에러페이지 만들기의 마지막은 당연히 실제 파일 만들기입니다. 방문자가 보게 되는 에러페이지는 .htaccess 파일이 아니라 404.html이니 말입니다. 404.html파일은 다른 홈페이지 파일을 만드는 방법과 똑 같습니다. 예를 들어 "아래 링크로 가십시오"처럼 단순한 문장만 적어놔도 됩니다. 물론 좀 더 자동화 기능을 넣어서 자동으로 페이지가 바뀌게 하거나, 모바일일 때와 PC일때의 경우에 따라 다른 화면을 보여 줄 수도 있겠지만 말입니다. 

[저작권법 표시] 이 글의 원본: 키스세븐(www.kiss7.kr)


이것으로 404 error 페이지 404.html 만들기의 모든 것이 완료되었습니다. 확인방법은 자신의 홈페이지가 http://www.kiss7.kr/일 경우 http://www.kiss7.kr/0000처럼 아무 거나 입력해서 접속해 보면 됩니다. 



키스세븐지식은 키스세븐과 그룹 사이트입니다.

아래로 더 내려 가 보세요!

혹시 읽을만한 것이 또 있을지도 모르잖아요? ^^

이 블로그를 북마크 하세요! 좋은 정보가 계속 이어집니다.
http://kiss7.tistory.com

5 Comments
  • 프로필사진 Favicon of https://ellameyrosek.tistory.com BlogIcon 피그마장인 2021.09.04 22:29 신고 안녕하세요 ...질문이 있어서 글 올립니다 ㅠㅠ!

    만약 제홈페이지 주소가 http://~.kr/a/b/index.html고

    제가 따로 만든 에러페이지 파일이 a/c/404.html 인데

    ErrorDocument 404 http://~.kr/a/b/index.html/a/c/404.html 이렇게 쓰니 에러페이지가 안떠서요 ㅠㅠ!

    어떻게 써야할까요?
  • 프로필사진 Favicon of https://kiss7.tistory.com BlogIcon 키스 키스세븐 2021.09.05 00:01 신고 .htaccess 라는 파일명 규칙을 잘 지켰나 다시 한번 확인 바랍니다. 많은 사람이 여기에서 실수를 많이 합니다.

    두번째,
    반드시 최상위 디렉토리인지 확인하고, 혹시 그 아래에 다른 디렉토리에도 넣었는지 확인해 보세요. 하위에도 또 있으면 상위 명령을 무효화시키는 경우가 있습니다.

    세번째, 이것은 아파치 서버에서 사용되는 명령어입니다. 그러므로 Nginx 서버를 이용하는 경우 지원되지 않는 경우도 있습니다. 이것은 웹호스팅 회사에 문의해서 도와달라고 해야 합니다.
  • 프로필사진 Favicon of https://kiss7.tistory.com BlogIcon 키스 키스세븐 2021.09.05 00:30 신고 그리고 에러페이지는 "없는 파일"을 호출했을 때 뜨는 겁니다.
    그러므로
    http://~.kr/a/b/index.html/a/c/kkk.html 처럼 없는 주소를 넣으세요.

    그리고 써주신 URL도 이상하네요.
    http://~.kr/a/c/404.html 라고 해야겠습니다.
  • 프로필사진 Favicon of https://ellameyrosek.tistory.com BlogIcon 피그마장인 2021.09.04 22:38 신고 그리고 인코딩 - ANSI 내용이 안나오네요? ㅜㅜ 저장할때 파일이름 파일형식만 나오네요
  • 프로필사진 Favicon of https://kiss7.tistory.com BlogIcon 키스 키스세븐 2021.09.05 00:07 신고 인코딩 선택은 맨 아래에 있는 "저장" 버튼 옆에 있습니다.

    확실히 모르겠다면 검색창에서 "메모장 ANSI 인코딩 하는 방법"라고 입력한 후 이미지 검색을 해 보면 눈으로 직접 확인할 수 있습니다.

    만약 메모장에서 모르겠다면, 에디트플러스 등의 웹에디터에서 인코딩을 고를 수도 있습니다.

댓글쓰기 폼