이미지 정중앙 반응형 404 페이지 만들기
https://wittazzurri.com/404.html
----------
----------
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개
추천합니다.
@푸른산타 감사합니다.
자바스크립트는 이것처럼 리스너이벤트 보다는 아래처럼 클래식이벤트를 쓰는 것이 사실 더 간명하긴 합니다.
[code]
<script>
onresize = function() {
document.querySelector("body").style.height = innerHeight * 0.99 + "px";
}
onresize();
</script>
[/code]
감사 합니다.
@들레아빠
사실 이미지 정중앙 반응형을 주는 건 그리 어려운게 아닌데
모바일에서는 이상하게도 body 의 height 를 화면 세로영역과 똑같이 주었는데도 스크롤이 들어가더라구요. 그래서 구글링해 보니
https://yohanpro.com/posts/css/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A3%BC%EC%86%8C%EC%B0%BD-%ED%81%AC%EA%B8%B0-%EC%A0%9C%EC%96%B4
결론은 body 의 세로사이즈는 주소창 때문에 화면세로보다 0.01% 적게 줘야 스크롤이 생기지 않는다고 하네요.
근데 링크글이나 원본글이나 코드를 왜 그렇게 난잡하게 짜는지...
전체화면 세로 곱하기 0.99 하면 될것을
전체화면 세로 - (전체화면 세로 x 0.01) 이라는 연산을 한다는게 참 그래요.
그리고 어차피 반응형 때문에 온리사이즈 이벤트를 쓸 거라면 왜 css 에서 중복으로 height 를 정의하는지도 모르겠고...
자랑을 좀 하자면 제 코드가 링크글이나 링크참조글보다 열배는 깔끔하고 간명합니다.^^
body 의 세로사이즈는 주소창 때문에 화면세로보다 0.01% 적게 줘야 스크롤이 생기지 않는다는 건 처음 알았습니다. 감사합니다. ^^
@민트다이어리
그러게요. 전체 내용물이 모바일 세로보다 작을 경우를 감안해서 페이지마다 넣어 주는 것도 괜찮을 것 같아요.
단 그럴 때는 온리사이즈 함수가 이벤트 "누적"이 가능한 리스너이벤트를 써야지 이벤트를 "갱신"하는 클래식이벤트를 쓰면 안 됩니다.^^
공유 감사드립니다. 추천꾹!!
@marty72
감사합니다~~
@아이스웨덴™ 감사합니다
좋은 정보 감사합니다.
@하늘뚱 감사합니다
멋지네요.
@오소피아 멋지다니 다행입니다.
@웅프 감사합니다
감사드립니다.
@크리스휘 감사합니다
감사합니다.
@마틴 감사합니다
멋져욧*^^*
감사합니다.
감사합니다 ^^