프로젝트
웹과 정보_웹사이트_옆으로 넘어가는 페이지 만들기
gom1n
2021. 3. 9. 15:37
코드
<!DOCTYPE html>
<html><head>
<title>flowerTea</title>
<link rel="stylesheet" href="flowerTea.css">
<link href="https://fonts.googleapis.com/css?family=Song+Myung&display=swap" rel="stylesheet">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function () {
// 변수를 선언합니다.
var width = $('[data-role="slider"]').attr('data-width');
var height = $('[data-role="slider"]').attr('data-height');
var count = $('[data-role="slider"] div.item').length;
// 스타일을 적용합니다.
$('[data-role="slider"]').css({
position: 'relative',
overflow: 'hidden',
width: width,
height: height,
}).find('.container').css({
position: 'relative',
width: count * width,
}).find('.item').css({
width: width,
height: height,
float: 'left'
});
// 변수를 선언합니다.
var currentPage = 0;
var changePage = function () {
$('[data-role="slider"] > .container').animate({
left: -currentPage * width
}, 500);
};
// 이벤트를 연결합니다.
$('#left-button').click(function () {
if (currentPage > 0) {
// 왼쪽으로 이동
currentPage = currentPage - 1;
changePage();
}
});
$('#right-button').click(function () {
if (currentPage < count - 1) {
// 오른쪽으로 이동
currentPage = currentPage + 1;
changePage();
}
});
});
</script>
<style>
/*스마트폰*/
@media screen and (max-width: 639px) {
body {width : auto;}
#icon { margin: 0; position: absolute; top: 55px; right: 160px; width: 50px; height: 50px;}
#icontext {display: none;}
.right {float : top; width : 48px; height : 52px; margin-top : 10px; margin-right : 100px;}
.left {float : top; width : 48px; height : 52px; margin-top : 10px; margin-left : 100px;}
.teaframe
{
width : 350px;
height : 500px;
margin-left: 12px;
float : top;
margin-top : -30px;
overflow: scroll;
}
.line{ width : 350px;}
#font1
{
width: 300px;
font-size : 40px;
float : top;
}
#smallfont
{
float: bottom;
font-size : 18px;
margin-left : 25px;
width: 300px;
}
#img1 {margin-right : 23px;}
#img2
{
width: 285px;
height: 210px;
margin-top : 10px;
margin-right : 28px;
}
#img3
{
width: 285px;
height: 210px;
margin-top : 10px;
margin-right : 28px;
}
#img4
{
width: 285px;
height: 210px;
margin-top : 10px;
margin-right : 28px;
}
#img5
{
width: 285px;
height: 210px;
margin-top : 10px;
margin-right : 28px;
}
}
/*휴대폰 가로 돌림 혹은 길이에 맞는 태블릿 세로*/
@media screen and (min-width:640px) and (max-width: 767px) {
body {width: auto;}
#icon { margin: 0; position: absolute; top: 55px; right: 300px; width: 50px; height: 50px;}
#icontext {display: none;}
.right {float : top; width : 48px; height : 52px; margin-top : 10px; margin-right : 200px;}
.left {float : top; width : 48px; height : 52px; margin-top : 10px; margin-left : 200px;}
.teaframe
{
width : 600px;
height : 500px;
margin-left: 30px;
float : top;
margin-top : -30px;
overflow: scroll;
}
.line{ width : 600px;}
#font1
{
width: 500px;
font-size : 40px;
float : top;
text-align:center;
}
#smallfont
{
float: bottom;
font-size : 18px;
margin-left : 50px;
width: 500px;
margin-top : 10px;
margin-bottom : 10px;
}
#img1 {margin-right : 150px; margin-top : 10px;}
#img2
{
width: 285px;
height: 210px;
margin-top : 10px;
margin-right : 150px;
}
#img3
{
width: 285px;
height: 210px;
margin-top : 10px;
margin-right : 150px;
}
#img4
{
width: 285px;
height: 210px;
margin-top : 10px;
margin-right : 150px;
}
#img5
{
width: 285px;
height: 210px;
margin-top : 10px;
margin-right : 150px;
}
}
/*테블릿 세로*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
body {width: auto;}
#icon { margin: 0; position: absolute; top: 55px; right: 350px; width: 60px; height: 60px;}
#icontext {display: none;}
.right {float : top; width : 48px; height : 52px; margin-top : 10px; margin-right : 200px;}
.left {float : top; width : 48px; height : 52px; margin-top : 10px; margin-left : 200px;}
.teaframe
{
width : 700px;
height : 500px;
margin-left: 30px;
float : top;
margin-top : -30px;
overflow: scroll;
}
.line{ width : 700px;}
#font1
{
width: 630px;
font-size : 40px;
float : top;
text-align:center;
}
#smallfont
{
float: bottom;
font-size : 18px;
margin-left : 50px;
width: 600px;
margin-top : 10px;
margin-bottom : 10px;
}
#img1 {margin-right : 200px; margin-top : 10px;}
#img2
{
width: 285px;
height: 210px;
margin-top : 10px;
margin-right : 200px;
}
#img3
{
width: 285px;
height: 210px;
margin-top : 10px;
margin-right : 200px;
}
#img4
{
width: 285px;
height: 210px;
margin-top : 10px;
margin-right : 200px;
}
#img5
{
width: 285px;
height: 210px;
margin-top : 10px;
margin-right : 200px;
}
}
/*태블릿 가로*/
@media screen and (min-width: 1024px) and (max-width : 1100px) {
body {width: auto;}
.right {float : top; width : 48px; height : 52px; margin-top : 10px; margin-right : 350px;}
.left {float : top; width : 48px; height : 52px; margin-top : 10px; margin-left : 350px;}
#icon { margin: 0; position: absolute; top: 50px; right: 475px; width: 70px; height: 70px;}
#icontext {display: none;}
}
/*아이패드프로가로*/
@media screen and (min-width: 1366px) and (max-width : 1367px) {
body {width: auto;}
.right {float : top; width : 48px; height : 52px; margin-top : 10px; margin-right : 350px;}
.left {float : top; width : 48px; height : 52px; margin-top : 10px; margin-left : 350px;}
#icon { margin: 0; position: absolute; top: 50px; right: 620px; width: 80px; height: 80px;}
#icontext {display: none;}
}
</style>
</head>
<body>
<div>
<a href="FirstPage-1.html">
<img id="icon" src="return.gif">
<p id="icontext">돌아가기</p>
</a>
</div>
<button id="left-button" class="left"></button>
<button id="right-button" class="right"></button>
<div data-role="slider" data-width="955" data-height="650" style="position: relative; overflow: hidden; width: 955px; height: 650px;">
<div class="container" style="position: relative; width: 4775px;">
<div class="item" style="width: 955px; height: 650px; float: left;">
<div class="teaframe">
<div class="line"></div>
<h1 id="font1">1. 목련꽃차</h1>
<img id="img1" src="1sttea.jpg">
<p id="smallfont"><br>목련꽃은 맛이 맵고 성질이 따뜻해 차가운 공기에 의해 걸리는 감기를 치료하고 코를 뚫어주는 약재처럼 사용되어 왔다. 병균을 몸 바깥으로 밀어내는데 힘을 더해주고 코의 면역력을 상승시키는 데 특효가 있어 콧물과 코막힘, 감기 등이 지속될 때 목련꽃차를 마시면 도움이 될 수 있다. </p>
</div>
</div>
<div class="item" style="width: 955px; height: 650px; float: left;">
<div class="teaframe">
<div class="line"></div>
<h1 id="font1">2. 산수유꽃차</h1>
<img id="img2" src="2ndtea.jpg">
<div>
<p id="smallfont"><br>눈의 피로와 청력 증진, 아토피에도 효과가 있으며 이뇨 작용이 뛰어나 노폐물 배출과 피부미용 효과가 있다. 성질이 따뜻하며 간 기능 허약 증상, 자궁 출혈에 도움을 준다. 동의보감 ‘향약집성방’에서 산수유꽃차는 무기력 해소, 해열, 두통, 월경과다 등을 다스리는 데 효능이 있다고 설명하고 있다. 또한 산수유꽃차는 신장을 강화와 혈액순환에 도움을 준다고 한다. </p>
</div>
</div>
</div>
<div class="item" style="width: 955px; height: 650px; float: left;">
<div class="teaframe">
<div class="line"></div>
<h1 id="font1">3. 벚꽃차</h1>
<img id="img3" src="3rdtea.jpg">
<div>
<p id="smallfont"><br>벚꽃차는 예부터 한방에서 약이 되는 차로 알려져 있으며, 숙취나 식중독 등의 해독제로 사용되어 왔다. 또한 당뇨병, 습진, 기침에 효과적이라고 한다. 벚꽃차를 만들기 위해서는 여덟 겹 벚꽃잎이 가장 좋은 효능을 갖추고 있다고 한다. 벚꽃차는 벚꽃의 색과 향기, 모양을 그대로 담고 있어 차로 마실 때 무척이나 아름답고, 효능까지 갖췄으니 소중한 지인들에게 선물하는 것도 추천한다. </p>
</div>
</div>
</div>
<div class="item" style="width: 955px; height: 650px; float: left;">
<div class="teaframe">
<div class="line"></div>
<h1 id="font1">4. 개나리꽃차</h1>
<img id="img4" src="4thtea.jpg">
<div>
<p id="smallfont"><br>봄의 전령 개나리꽃은 스트레스 완화에 도움을 주는 효과가 있다. 또 당뇨에 효과가 있고 이뇨 작용도 뛰어난 꽃차 중 하나로 환으로 섭취하는 경우도 있다. 소염과 항균 작용이 있어 여드름과 화농성을 막아줘 피부 미용에도 도움을 준다. 다만 개나리꽃은 성질이 차가운 편으로 몸이 차가운 사람은 조금씩 적당히 마시는 편이 좋다고 한다</p>
</div>
</div>
</div>
<div class="item" style="width: 955px; height: 650px; float: left;">
<div class="teaframe">
<div class="line"></div>
<h1 id="font1">5. 장미꽃차</h1>
<img id="img5" src="5thtea.jpg">
<div>
<p id="smallfont"><br>장미꽃차는 미용에 효과가 있어 아름다움을 위한 로망티로 자리 잡고 있다. 보습에 메마른 갈라지는 피부와 트러블 등에 신경을 쓰고 있다면 장미꽃차를 꼭 기억하자. 에스트로겐을 석류보다 8배 더 함유하고 있고, 비타민 A와 C, E 등이 풍부해 미백은 물론 피부 탄력 효과도 기대할 수 있는 톡톡한 효능이 담겨있다고 한다. </p>
</div>
</div>
</div>
</div>
</div></body></html>
결과화면