HTML 404 에러페이지 만들기 - 만드는 방법과 404 페이지의 뜻
페이지 정보
조회 1,454회 작성일 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+글자+예제