코드를 입력하세요
코드를
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Scrolling</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
:root {
--img-width:2500px;
--p1-width:50vw;
}
* {
margin:0;
padding:0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif
}
html,
body {
height:100%;
min-height:100%;
/* overflow:hidden; */
overflow-y: hidden;
letter-spacing: 0;
}
#page-wrap {
/* 100% x length of panel */
width:calc(var(--img-width) + var(--p1-width));
/* width:300%; */
height:100%;
overflow:hidden;
}
.panel {
width:20%; /* 100% / length of panel */
float:left;
height:100%;
justify-content: center;
align-items: center;
text-align: center;
}
/* .panel .inner {padding:2em} */
.panel-1 {width:50vw;}
.panel-2 .inner { display: flex;
justify-content: center;
height: 100vh;
flex-direction: column;}
/* Details (Ignore this!) */
body {
font:italic normal 13px/1.4 Georgia,Serif;
/* font-style: italic; */
/* color:#666; */
}
h2 {
font-weight:bold;
font-size:200%;
/* margin:0 0 1em; */
}
p {margin:1.5em 0 ; font-size:24px; letter-spacing: 2px;}
.panel-1 {
background-color:black;
color:white;
display: flex;
}
.image {
width:var(--img-width);
/* width:420%; */
/* background: url('1.png'); */
}
img {width:100%;}
@media screen and (max-width:480px){
:root {
--img-width:1500px;
}
}
</style>
</head>
<body>
<div id="page-wrap">
<!-- <div class="panel panel-1">
<div class="inner">
<h2>
기분이 <br>별로야
</h2>
</div>
</div> -->
<div class="panel panel-2">
<div class="inner">
<div class="image">
<p>
<!-- My hair tousled from the wind blowing through, I don't feel like it<br> -->
바람이 슝 - 지나가서 헝클어진 머리, 기분이 별로야
</p>
<img src="1.png" alt="">
</div>
</div>
</div>
</div>
<script type="text/javascript">
// http://www.dte.web.id/2013/02/event-mouse-wheel.html
(function() {
function scrollHorizontally(e) {
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
document.documentElement.scrollLeft -= (delta*60); // Multiplied by 40
document.body.scrollLeft -= (delta*60); // Multiplied by 40
e.preventDefault();
}
if (window.addEventListener) {
// IE9, Chrome, Safari, Opera
window.addEventListener("mousewheel", scrollHorizontally, false);
// Firefox
window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
} else {
// IE 6/7/8
window.attachEvent("onmousewheel", scrollHorizontally);
}
})();
</script>
</body>
</html>입력하세요
```
```
mindaeng