고정 헤더 영역
상세 컨텐츠
본문
https://www.youtube.com/watch?v=Brl3O-0S-30&list=PLqUdVJG04WRbNBkwi6qn-ppWYU6HIkBH5&index=3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나이트폴리마켓</title>
<link href="css/style.css" rel="stylesheet">
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrap">
<header>
<h1>
<a href="#">
<img src="images/logo.png" alt="나이트폴리마켓">
</a>
</h1>
<nav>
<ul>
<li><a href="#">홈</a>
<ul class="sub">
<li><a href="#">소개</a></li>
<li><a href="#">행사일정</a></li>
<li><a href="#">공지사항</a></li>
<li><a href="#">갤러리</a></li>
</ul>
</li>
<li><a href="#">판매자</a>
<ul class="sub">
<li><a href="#">판매자 목록</a></li>
<li><a href="#">판매자 등록</a></li>
<li><a href="#">판매자 가이드</a></li>
</ul>
</li>
<li><a href="#">축제정보</a>
<ul class="sub">
<li><a href="#">행사 개요</a></li>
<li><a href="#">주요 이벤트</a></li>
<li><a href="#">참여 이벤트</a></li>
<li><a href="#">위치 안내</a></li>
</ul>
</li>
<li><a href="#">먹거리</a>
<ul class="sub">
<li><a href="#">푸드트럭</a></li>
<li><a href="#">지역특산물</a></li>
<li><a href="#">추천 메뉴</a></li>
<li><a href="#">할인쿠폰</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="contents">
<section class="slide">
<ul>
<li class="s1">
<a href="#">
<h2>나이트 슬라이드1</h2>
</a>
</li>
<li class="s2">
<a href="#">
<h2>나이트 슬라이드2</h2>
</a>
</li>
<li class="s3">
<a href="#">
<h2>나이트 슬라이드3</h2>
</a>
</li>
</ul>
</section>
<div class="con">
<article class="notice">
<h2>공지사항</h2>
<ul>
<li>
<a href="#" class="pop">
<p>나이트폴리마켓 공지사항1</p>
<span class="date">2025.07.02</span>
</a>
</li>
<li>
<a href="#">
<p>나이트폴리마켓 공지사항2</p>
<span class="date">2025.07.01</span>
</a>
</li>
<li>
<a href="#">
<p>나이트폴리마켓 공지사항3</p>
<span class="date">2025.06.30</span>
</a>
</li>
<li>
<a href="#">
<p>나이트폴리마켓 공지사항4</p>
<span class="date">2025.06.29</span>
</a>
</li>
</ul>
</article>
<article class="gall">
<h2>겔러리</h2>
<ul>
<li>
<a href="#">
<img src="/images/g1.jfif" alt="겔러리후기1">
</a>
</li>
<li>
<a href="#">
<img src="/images/g2.jpg" alt="겔러리후기2">
</a>
</li>
<li>
<a href="#">
<img src="/images/g3.jpg" alt="겔러리후기3">
</a>
</li>
</ul>
</article>
<article class="go">
<h2>바로가기</h2>
<ul>
<li>
<a href="#">
<img src="/images/icon1.png" alt="바로가기1">
바로가기1
</a>
</li>
<li>
<a href="#">
<img src="/images/icon2.jpg" alt="바로가기2">
바로가기2
</a>
</li>
<li>
<a href="#">
<img src="/images/icon3.png" alt="바로가기3">
바로가기3
</a>
</li>
</ul>
</article>
</div>
<footer>
<div>
<ul class="fens">
<li><a href="#"><img src="/images/sns1.png" alt="페이스북"></a></li>
<li><a href="#"><img src="/images/sns2.png" alt="트위터"></a></li>
<li><a href="#"><img src="/images/sns3.png" alt="카카오"></a></li>
</ul>
<select name="fmalilysite">
<option>fmalilysite1</option>
<option>fmalilysite2</option>
<option>fmalilysite3</option>
</select>
<p class="fcopy">
copyright © by web design developmennt . all right reserved.
</p>
</div>
</footer>
</div>
<div class="popup">
<div class="popcon">
<h2>나이트폴리마켓 공지사항</h2>
<p class="img">
<img src="/images/pop.png" alt="팝업이미지">
</p>
<p class="text">
나이트폴리마켓 공지사항<br>
팝업창 내용입니다.<br>
<strong> 강조합니다.</strong>
</p>
<p class="close">
<button>CLOSE X</button>
</p>
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
*{margin: 0; padding: 0; box-sizing: border-box;}
li{list-style: none;}
a{text-decoration: none; color: inherit;}
img{vertical-align: top; max-width: 100%;}
button{cursor: pointer;}
body{background-color: rgb(255, 255, 255); color: #333;}
.wrap{width: 1000px; height: 670px; display: flex; position: relative;}
header{width:200px; background:#1a237e; padding: 80px 10px;}
nav{margin-top: 50px; position: relative;}
nav>ul>li>a{display: block; border: 1px solid #ffeb3d; padding: 10px 0; text-align: center; color:#ffeb3d; border-bottom: 0;}
nav>ul>li:hover>a{background: #ffeb3d; color: #1a237e;}
nav>ul>li:last-child>a{border-bottom: 1px solid #ffeb3d;}
.sub{position: absolute; top:-10px; left: 180px; width: 150px; height: 250px; background:#ffeb3d; display: none; z-index: 9;}
.sub li a{display: block; padding: 10px 0; color: #1a237e; text-align: center;}
.sub li a:hover{background: #757575; color: white;}
.contents{width: 800px;}
.slide{height: 350px; background: yellowgreen; overflow: hidden;}
.slide ul li {width: 800px; height: 350px; position: relative;}
.slide ul li a{display: block; height: 100%;}
.slide ul li.s1{background:url(../images/im1.jpeg) no-repeat center/cover;}
.slide ul li.s2{background:url(../images/im2.jpg) no-repeat center/cover;}
.slide ul li.s3{background:url(../images/im3.jpg) no-repeat center/cover;}
.slide ul li h2{position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); background: #1a237e; border-radius: 20px 0;
padding: 10px 40px; color: #ffeb3d;width: 600px; text-align: center;}
.con{height: 200px; background: fuchsia; display: flex;}
.notice{width: 300px; padding: 5px;}
.notice h2{background: #1a237e; padding: 5px; color: aliceblue; text-align: center; margin-bottom: 10px;}
.notice ul li a{display: block; padding: 5px 0; position: relative;}
.notice ul li{border-bottom: 1px dashed #fff;}
.notice ul li:last-child{border-bottom: none; }
.notice ul li p{width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.notice ul li .date{position: absolute; top:5px; right: 0;}
.gall{width: 300px; padding: 5px;}
.gall h2{background: #ffeb3d; padding: 5px; color: #1a237e; text-align: center;}
.gall ul{display: flex; gap:10px; margin-top: 10px;}
.gall ul li img{width: 100px; height: 120px; object-fit: cover;}
.go{width: 200px; padding: 5px;}
.go h2{background: #1a237e; padding: 5px; color: #fff; text-align: center;}
.go ul li{margin-top: 5px;}
.go ul li img {width: 20px;}
.go ul li a {display: block; font-size: 13px; height: 40px; border-radius:5px; background: #757575; text-align: center; color: #fff;
padding: 10px;}
footer{height: 120px; background:blue; position: relative; color: #fff;}
footer div{position: absolute; top:25px; right: 20px;}
footer .fens{display:flex; gap:10px; justify-content: center; }
footer .fens li a{display: block; width: 30px; height:30px ; border-radius: 50px; text-align: center; padding-top: 5px;}
.popup{position: absolute; top:0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: none; }
.popcon{position: relative; width: 500px; top: 50%; left: 50%; transform:translate(-50%,-50%); background: #fff;
text-align: center; padding:10px; border-radius: 20px;}
.popcon h2{ color: #1a237e; margin-bottom: 20px;}
.popcon .text{margin: 20px 0;}
.popcon .close{text-align: right;}
.popcon .close button{background: #1a237e; border: 0; padding: 10px; color: #fff;}
.popcon .close button:hover{background:#ffeb3d; color: #0e022e;}
$(function () {
// 메뉴
$("nav>ul>li").mouseenter(function () {
$(this).children(".sub").stop().fadeIn();
// $('.sub').slideDown();
})
$("nav>ul>li").mouseleave(function () {
$('.sub').stop().fadeOut();
})
//슬라이드
let i = 0;
function slide() {
if (i < 2) {
i++;
} else{
i=0;
}
$('.slide ul').animate({ marginTop: -350 * i }, 1000);
}
setInterval(slide, 2000)
//팝업
$('.pop').click(function(){
$('.popup').show();
return false;
})
$(".close button").click(function(){
$('.popup').hide();
})
})
'html, css' 카테고리의 다른 글
| 웹디자인개발 기능사 실기 연습 (0) | 2025.07.03 |
|---|---|
| sdu html 강의 실습 1차 (0) | 2025.04.23 |
| 실습 수정 (0) | 2025.04.16 |
| sdu html실습 태블릿 레이아웃 (0) | 2025.04.16 |
| 계산기 (0) | 2025.04.15 |
