개미처럼 부지런하게
블로그 이미지

Home

Write

Setting

About Me
Dark
개발자 ++/개발일지↗

미니프로젝트 1일차 경과

개미Coder
|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>
반응형
저작자표시

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

게시판 만들기 (개인적으로)  (0) 2024.06.24
개발일지 1차 프로젝트(아이디어)  (0) 2024.06.12
프로그래밍에 도움이 되는 독서  (0) 2024.05.10
오늘 학습한 것  (0) 2024.05.02
개발일지(1) 만들어보고 싶은 것  (0) 2024.05.01

티스토리툴바