404. 페이지가 없다!

개요

몇몇 포스트에서 글자가 깨져있거나, 코드 블록이 이상하게 나오는 경우를 제보받아 블로그 파일들을 확인해보기로 했다.

그런데 내 블로그의 404페이지는 어떻게 구성되어 있는지 궁금해져서 들어가보았더니….

아니 너무 심심하게 생겼다!!!!!

오… 그런 의미에서 갑자기 아주 갑자기 404 페이지를 변경하게 되었다.

과정

  1. 이미지 생각하기 : 텍스트만 있는 404 페이지는 재미 없다고 생각했다.
  2. 메인으로 돌아가는 버튼 추가하기
  3. CSS 작업하기…
  4. 문구 수정하기 : 영어로 써있는 것 보다. 주요 콘텐츠가 한국어로 작성되어 있으니 적절히 수정하기

작업 후

요즘 피크민이 너무나 귀여워서 PNF 404로 Page Not Found를 표시해봤다

작업 후 404 페이지

돌아가기는 a:hover를 이용했다. 처음에는 버튼을 이용할까 했지만, 오히려 손이 더 많이 가는 작업이라고 생각했기에, a태그를 이용하는 방향으로 접근했다.

간단 소감

루비 기반으로 돌아가는 블로그로 생성했던 기억이 있는데 훗날 시간이 된다면 루비랑 웹 프레임워크로 간단하게 사이트를 만들어보는 과정을 가지면 더더욱 좋겠다고 생각도 해보았다.

404 페이지 및 이런 status에 관한 정리도 한번 쓱 해야겠다는 마음가짐은 덤!

추가 학습 필요!

a태그 보안 관련 : blank? rel? 여러가지 속성. 취약점 공격

작업한 코드

.a-tag-404 {
  margin: 20px 0;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.2;
  border: gray, solid, 1px;
  color: slategrey;
  transition: 0.3s;
}
.a-tag-404:hover {
  text-decoration: none;
  color: white;
  background-color: gray;
}

.img-404 {
  margin: 10px 0 30px;
}