반응형
3w school bootstrap 테마 이용하여 페이지 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- Theme Made By www.w3schools.com - No Copyright -->
<title>Bootstrap Theme Simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="moment-with-locales.min.js"></script>
<link rel="stylesheet" href="layout.css">
<script>
const showtime = () => {
let fullDate = moment().format('YYYY MMM DD ddd h:mm:ss a')
$('h3').text(fullDate)
}
showtime()
setInterval(showtime,1000)
let ctnt = []
ctnt[0] = "<img src='evening-shining-stars-background-wallpaper-1920x1200_6.jpg' class='image-thumbnail'>"
ctnt[1] = "<img src='milky_way_galaxy-Space_Universe_Photography_Wallpaper_1366x768.jpg' class='image-thumbnail'>"
ctnt[2] = "<img src='sailboat-floating-in-space-wallpaper-1920x1200_6.jpg' class='image-thumbnail'>"
ctnt[3] = "<img src='the_heaven-wallpaper-1920x1080.jpg' class='image-thumbnail'>"
ctnt[4] = "<img src='evening-shining-stars-background-wallpaper-1920x1200_6.jpg' class='image-thumbnail'>"
ctnt[5] = "<img src='milky_way_galaxy-Space_Universe_Photography_Wallpaper_1366x768.jpg' class='image-thumbnail'>"
ctnt[6] = "<img src='sailboat-floating-in-space-wallpaper-1920x1200_6.jpg' class='image-thumbnail'>"
ctnt[7] = "<img src='the_heaven-wallpaper-1920x1080.jpg' class='image-thumbnail'>"
const scroll = () => {
// 이미지 8장을 동시에 왼쪽여백 조정하기
for (let i=0; i<ctnt.length; i++) {
let tmp = document.getElementById("area" + i).style
tmp.left = parseInt(tmp.left) - 1 + "px" // 몇 px 씩 움직일지 결정
// 이미지 순환을 위해서 이미지 재배치
if (tmp.left === "-380px") { // 90 + 540 = 630 (7장의 총px) 으로 맞춤
tmp.left = "2660px"
}
// if(parseInt(tmp.left)<=-100) { // 다른풀이
// tmp.left=(ctnt.length-1)*90 + "px"
// }
}
// 스크롤 속도 -> 이미지를 -1px 씩 몇초마다 옮길지
timer = setTimeout(scroll,15)
}
// ctnt에 저장된 이미지를 id=mydiv에 배치
const start = () => {
for(let i=0; i<ctnt.length; i++) {
document.write(`<div id='area${i}' style='position:absolute; top:0; left:${380*i}px'>`)
document.write(ctnt[i])
document.write("</div>")
}
// 페이지 시작 시 스크롤함수 시작 시간 설정
setTimeout(scroll, 1000)
}
let timer; // scroll 함수를 실행시키면 setTimeout 함수의 상태가 저장되고, killtime 함수를 실행시키면 clearTimeout() 함수가 작동되어 setTimeout 함수를 중지함
const killtime = () => { // 스크롤 함수의 setTimeout 해제 함수
clearTimeout(timer)
}
</script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">HOME</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">게시판</a></li>
<li><a href="#">공지사항</a></li>
<li><a href="#">로그인</a></li>
<li><a href="#">포토갤러리</a></li>
<li><a href="#">메일보내기</a></li>
</ul>
</div>
</div>
</nav>
<!-- First Container -->
<div class="container-fluid bg-1 text-center">
<img src="6xNwPlX.jpeg" class="img-responsive img-circle margin" style="display:inline" alt="Bird" width="350" height="350">
<h3></h3>
</div>
<!-- Second Container -->
<div class="container-fluid bg-3 text-center">
<div class="row">
<div class="col-xs-12">
<script>start()</script>
</div>
</div>
</div>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
Copyright © 2023 MyWeb
</footer>
</body>
</html>반응형
'Front-End > HTML & CSS' 카테고리의 다른 글
| html과 css를 이용하여 웹 화면 구현해보기(3) (0) | 2023.02.24 |
|---|---|
| html과 css를 이용하여 웹 화면 구현해보기(2) (0) | 2023.02.10 |
| html과 css를 이용하여 웹 화면 구현해보기(1) (0) | 2023.02.07 |
댓글