미니프로젝트 1일차 경과

메타플랫폼대표
|2024. 6. 14. 17:55
- 추가할 기능들 : 버튼 클릭시 앵커로 경로 넘기기
- product 박스 앵커 넣기
- 메뉴 앵커 넣기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

@font-face {
    font-family: 'TTTogether';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/TTTogetherA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
	margin: 0px;
	padding: 0px;
}


#quickmenu img {
	width: 150px;
	position: absolute;
	right: 1px;
	top: 20px;
	
	display: inline-block;
	
	z-index: 1;
}

.container {
	margin-top: 50px;
}

.btn {
  flex: 1 1 auto;
  margin: 10px;
  padding: 30px;
  
  text-align: center;
  text-transform: uppercase;
  font-family: "TTTogether";
  
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
 }
 
.btn:hover {
  	background-position: right center; /* change the direction of the change here */
}

.btn-5 {
	height: 30px;
	background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 51%, #ffecd2 100%);
}

#head #rogo {
	width: 250px;
}

#headbanner {
	width: 250px;

}

#head {
	text-align: center;
	margin-top: 30px;
	margin-bottom: 25px;
}

#drowdownmenu {
	width: 100%;
	
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

li.mainmenu {
	float: left;
	list-style-type: none;
}

li.mainmenu ul {
	margin: 0px;
	list-style-type: none;
	padding: 0px;
}

.mainmenu a {
	background: #FECCBE;
	display: block;
	
	color: white;
	text-decoration: none;
	text-align: center;
	text-shadow: 1px 1px gray;
	
	font-family: "TTTogether";
	padding: 10px;
	border-bottom: 1px solid #ffffff;
}

ul#drowdownmenu li a:hover {
	background-color: white;
	color: #FECCBE;
}

#posterBox {
	margin-top: 30px;
}

#box1 {
	width: 1200px;
	height: 300px;
	background-color: gold;
	border: 4px solid pink;
	overflow: hidden; /* 자식영역이 부모영역보다 크면 오버된 영역 감추기 */
	position: relative; /* 자식영역 absolute로 할 경우 relative가 기준이 된다 */
	
	margin-left: auto;
	margin-right: auto;
}

#box2 {
	width: 7200px;
	height: 300px;
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 0px;
}

#box2 ul li {
	/* 리스트 마크 안보이게 */
	list-style-type: none;
	/* 이미지가 옆으로 나란히 붙게 만들기 */
	float: left;
	margin: 0px;
	padding: 0px;
}

#box2 ul li img {
	width: 1200px;
	height: 300px;
}

#center {
	margin-top: 20px;
	text-align: center;
}

#center-sub {
	margin-top: 30px;
	margin-bottom: 50px;
}

#mainbanner {
	margin: 100px;
	width: 800px;
}

.box3 {
	width: 1500px;

	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	
	margin-left: auto;
	margin-right: auto;
}

.box3 img {
	margin-left: auto;
	margin-right: auto;
}


</style>

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		// 1초에 한번씩 함수 수행 
		setInterval(moveImage, 4000);// cf) setTimeout(fn,시간);
		// quickmenu의 이미지의 top 위치가 얼마인지 담기
		var top = parseInt($("#quickmenu img").css("top"));
		console.log(top);
		
		// 스크롤 되어질때 quickmenu의 속성값도 이동하게 설정
		$(window).scroll(function(){
			var scrollTop = $(window).scrollTop();
			console.log("scrollTop : " + scrollTop);
			var quickTop = top + scrollTop;
			
			$("#quickmenu img").animate({top:quickTop},20);
			
		});
		// 상단 메인 메뉴 관리
		$("li.mainmenu ul").hide(); // 하위메뉴 숨기기
		$("li.mainmenu").hover(function(){
			$("ul",this).show(300);
		}, function(){
			$("ul",this).hide(300);
		});
		
	});

	function moveImage() {
		$("#box2").animate(
			{"left" : "-=1200"}, 1200, 
			function() {
				var left = parseInt($("#box2").css("left"));
				// box2의 left 좌표가 -805보다 작아진다면, 0px로 돌아온다.
				if (left < -2400) {
					$("#box2").css("left", "0px");
			}
		});

	}
</script>
</head>


<body>
	<!-- 따라오는 메인 스크롤 배너 -->
	<div id="quickmenu">
		<a href="https://smhrd.or.kr/" target="_blank">
		<img src="image/scroll.png">	
		</a>		
	</div>
	<!-- 회원가입 로그인 버튼 -->
	<div class="container">
	  <a class="btn btn-5">회원가입</a>
	  <a class="btn btn-5">로그인</a>
	</div>
			
	</div>
	<!-- 상단 메인 로고 -->
	<div id="head">
		<img id="rogo" src="image/kkubipay.png">
		<div>
			<img id="headbanner" src="image/headbanner.png">
		</div>
	</div>

<div style="clear: both; position: relative; border: 1px solid pink;"></div>

	<!-- 상단메인메뉴 클래스 -->
	<ul id="drowdownmenu">
		<li class="mainmenu">
			<a href="#">게임캐쉬</a>
			<ul>
				<li><a href="#">넥슨카드</a></li>
				<li><a href="#">틴캐시</a></li>
				<li><a href="#">와우캐시</a></li>
			</ul>
		</li>	
		<li class="mainmenu">
			<a href="#">상품권</a>
			<ul>
				<li><a href="#">문화상품권</a></li>
				<li><a href="#">구글기프트카드</a></li>
				<li><a href="#">해피머니</a></li>
			</ul>
		</li>		
		<li class="mainmenu">
			<a href="#">이벤트</a>
			<ul>
				<li><a href="#">문화상품권</a></li>
				<li><a href="#">구글기프트카드</a></li>
				<li><a href="#">해피머니</a></li>
			</ul>
		</li>		
		<li class="mainmenu">
			<a href="#">고객문의</a>
			<ul>
				<li><a href="#">문화상품권</a></li>
				<li><a href="#">구글기프트카드</a></li>
				<li><a href="#">해피머니</a></li>
			</ul>
		</li>		
		<li class="mainmenu">
			<a href="#">게시판</a>
			<ul>
				<li><a href="#">문화상품권</a></li>
				<li><a href="#">구글기프트카드</a></li>
				<li><a href="#">해피머니</a></li>
			</ul>
		</li>		
		<li class="mainmenu">
			<a href="#">공지사항</a>
			<ul>
				<li><a href="#">문화상품권</a></li>
				<li><a href="#">구글기프트카드</a></li>
				<li><a href="#">해피머니</a></li>
			</ul>
		</li>		
	</ul>
	
	<!-- 메인배너 박스 -->
	<div id="posterBox">
		<div id="box1">
			<div id="box2">
				<ul>
					<li>
						<img src="image/banner1.jpg" />
					</li>
					<li>
						<img src="image/banner2.jpg" />
					</li>
					<li>
						<img src="image/banner3.jpg" />
					</li>
					
					
					
					<li>
						<img src="image/banner1.jpg" />
					</li>
					<li>
						<img src="image/banner2.jpg" />
					</li>
					<li>
						<img src="image/banner3.jpg" />
					</li>
					
	
				</ul>
			</div>
		</div>
	</div>
		
	<div id="center">
		<div id="center-sub">
			<img src="image/shop1.png">
		</div>
		<div>
		<a href="https://smhrd.or.kr/" target="_blank">
			<img id="center-product-menu" src="image/productmenu.JPG">
		</a>
		</div>
		<div>
			<img id="mainbanner" src="image/mainbanner.png">
		</div>
	</div>
	
	
		<div class="box3">
					<img src="image/nexoncash.jpg" />
					<img src="image/nexoncash.jpg" />
					<img src="image/nexoncash.jpg" />
		</div>
		<div class="box3">
					<img src="image/nexoncash.jpg" />
					<img src="image/nexoncash.jpg" />
					<img src="image/nexoncash.jpg" />
		</div>
</body>
</html>
저작자표시
'개발자 ++ > 개발일지↗' 카테고리의 다른 글

jar -> bat 파일로 변경하면 배포가 매우 쉬워진다. (0)	2024.08.24
게시판 만들기 (개인적으로) (0)	2024.06.24
개발일지 1차 프로젝트(아이디어) (0)	2024.06.12
출석기록 (0)	2024.05.31
프로그래밍에 도움이 되는 독서 (1)	2024.05.10
미니프로젝트 1일차 경과

'개발자 ++ > 개발일지↗' 카테고리의 다른 글

티스토리툴바
