404 에러페이지 만들기 - 만드는 방법과 404 페이지의 뜻 > 웹제작/운영

사이트 내 전체검색
[멀티검색] 먼저 왼쪽 검색창에 검색어를 입력하세요.
  • 네이버
  • 다음
  • 구글
  • 유튜브
  • 랜덤Go
[멀티검색] 먼저 왼쪽 검색창에 검색어를 입력하세요.
  • 네이버
  • 다음
  • 구글
  • 유튜브
  • 랜덤Go

웹제작/운영

HTML 404 에러페이지 만들기 - 만드는 방법과 404 페이지의 뜻

페이지 정보

profile_image
작성자 키스세븐
조회 1,265회 작성일 22-04-10 15:15

본문

404 에러페이지 만들기

만드는 방법과 404 페이지의 뜻


검색을 타고 사이트에 방문했는데 링크가 잘못됐거나 삭제돼서 URL 에러가 날 때가 있다. 

그렇다고 방문자를 그냥 보낼 수는 없는 일... 이때 다시 사이트 안으로 불러들이는 것이 404 페이지의 역할이다.



404 에러페이지 만들기 - 만드는 방법과 404 페이지의 뜻



404 Not Found의 뜻과 방법


"서버로 연결할 수 없을 경우" 브라우저 자체로 에러페이지를 보여주긴 한다.

하지만, 사이트를 운영하다 보면, 주소가 잘못된 방문자일 경우라도 붙잡고 싶을 때가 있다.


404 에러의 뜻은 HTTP 상태 코드로, 링크로 연결하지 못한다는 의미다. 

그 페이지가 사라졌거나 링크가 달라졌을 때 나타난다.


그러므로, 사이트 운영자가 직접 이 404 Not Found 에러 페이지를 만들어서 사이트 내부를 볼 수 있도록 할 필요가 있을 것이다. 


이때 중요한 것은 아래의 코드다.

루트 디렉토리에 .htaccess를 만들어서 올려야 한다.


[code]

ErrorDocument 404 http://주소

[/code]

위에서 "주소"라고 적힌 부분은 아래에서 만든 404가 에러페이지가 있는 경로다. 

여기서 저장해 주면, 주소가 없는 링크가 발생했을 때 아래의 404 페이지를 보여주게 된다.


 

404 페이지 만들기 예제


먼저, 키스세븐이 만든 예제를 먼저 보며, 사용된 코드의 역할도 설명하겠다.

필요하다면 그대로 복사한 후 내용만 변경해서 사용해도 된다.

[code]

<html>

<head>

   <title>제목</title>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <meta http-equiv=refresh content='원하는 시간; url=원하는주소'>

</head>

<body>

<style type ="text/css">

   꾸미기를 원하는 스타일 코드

   .Container { }

   .Content { }

   .subject { }

   .info { }

   .infotext { }

</style>

<div class="Container">

   <div class="Content">

      <span class="subject">404 ERROR PAGE</span><br><br><br>

      <span class="info">방문하려는 페이지가 옮겨졌거나 바뀌었습니다.</span><br>

      <span class="info">아래 링크를 방문하시어 다시 검색해 보기를 바랍니다.</span><br>

      <a class="link" href="원하는주소">원하는 주소</a>

      <br><br><br><br>

      | <span class="infotext"><a href="링크주소">안내 보기</a></span> |

   </div>

</div>

</body>

<html>

[/code]

여기서 이름으로 사용된 Container, Content, subject, info, link, infotext는 임의로 정한 이름이니, 필요한대로 바꿔서 사용하면 된다.



404 에러페이지 만드는 방법


우선, 이 페이지에 포함된 기능을 먼저 알아본 후 추가 예제를 적을 것이니, 초보자라면 이 두 가지를 비교해서 필요한 부분을 공부하면 되겠다.


[code]

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

[/code]

이 부분은 문자세트를 지정하는 부분이다. 한글이 깨지지 말라고 사용한다.

없어도 페이지를 만들 수는 있으나, 영어 사이트가 아니라면 있는 것이 좋다.


[code]

<meta http-equiv=refresh content='원하는 시간; url=원하는주소'>

[/code]

URL 주소가 잘못되어 404 페이지로 방문자가 왔을 때, 일정한 시간이 되면 바른 링크로 보내주는 코드다. 

예를 들어, 

<meta http-equiv=refresh content='60; url=http://www.kiss7.kr/'>

60초가 지나면 키스세븐의 메인페이지로 보내주는 것은 위와 같이 한다.

여기서 주의할 것은 60의 왼쪽과 URL의 오른쪽에 따옴표가 하나씩 있다는 것이다. 빼먹지 않도록 주의한다.


그 외에는 일반적인 HTML 링크 태그들로 이루어져 있다.

<style> 부분은 화면 모양을 예쁘게 하는 데에 사용된다. 이것은 스타일 태그이므로 검색을 통하여 배워서 추가하면 된다.

스타일 모양 추가 부분은 <style>에 있는 { } 안에 넣으면 예쁘게 꾸밀 수 있다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)


배우기 예제 : https://www.google.com/search?q=css+글자+예제

 

 

추천0
총 87개 (1Page)
  • RSS
웹제작/운영 목록
번호 제목 조회 추천 날짜
공지 공지 456 0 03-26
86 그누보드 323 0 02-25
85 그누보드 1335 0 10-17
84 SCRIPT 617 0 10-17
83 CSS 630 0 09-10
82 PHP 1101 0 08-26
81 PHP 661 0 08-21
80 기타활용 600 0 08-15
79 그누보드 1139 0 08-05
78 CSS 844 0 08-04
77 HTML 1588 0 07-24
76 그누보드 441 0 07-24
75 HTML 764 0 07-21
74 CSS 677 0 07-18
73 그누보드 630 0 07-09

검색


    허브사이트 "키스세븐"
    [허브사이트란?]
    수많은 사이트와 포털을
    한 번에 모아서
    사용할 수 있는 서비스를 말합니다.