테스트 사이트 - 개발 중인 베타 버전입니다

이미지 정중앙 반응형 404 페이지 만들기

· 2년 전 · 2400 · 23

 

https://wittazzurri.com/404.html

 

----------

 

3717943588_1698056540.1266.jpg

 

----------

 

1. 원하는 이미지를 만들어서 이미지경로 부분만 바꿔치기 합니다.

2. 이미지 사이즈는 아무래도 상관이 없습니다.

3. 언제나 이미지가 정중앙의 반응형으로 기능합니다.

4. 모바일에서 메뉴 때문에 생기는 스크롤이 무력화 됩니다.

5. 메타태그는 넣고 싶으면 넣어주세요^^

 

----------

 

[code]

<!DOCTYPE html>
<html lang="ko">
<head>
<title>[ 404 ERROR PAGE ]</title>
</head>
<style>
body { margin:0px; display:flex; justify-content:center; align-items:center; width:100%; }
img { display:block; max-width:100%; max-height:100%; object-fit:cover; }
</style>
<body>
<img src="이미지경로">
<script>
addEventListener("resize", bodySize = function() {
    document.querySelector("body").style.height = innerHeight * 0.99 + "px";
} );
bodySize();
</script>
</body>
</html>

[/code]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 23개

1년 전

멋져욧*^^*

감사합니다.

감사합니다 ^^

게시글 목록

번호 제목
21529
21526
21521
21516
21513
21502
21485
21471
21467
21457
21424
21421
21415
21410
21406
21405
21394
21378
21354
21349
21345
21316
21299
21297
21279
21276
21254
21242
21214
21206