728x90
반응형
푸터까지 완성한 홈페이지
html 팝업창 내용 작성하기
<br> 엔터
미리보기에서 이렇게 뜨게됨
팝업창이 움직일 수 있도록 position: absolute; 명령을 주고 #wrap을 기준점으로 잡아 position: relative 명령을 준다.
absolute;는 절대주소이기 때문에 0,0에 위치하게 됨
그래서 left: 50%, top: 50%를 한다.
하지만 top: 50%가 적용이 안되는데 #header, #banner, #contents, #footer에 들어간 float으로 인해 높이값이 없어지기 때문에 :clearfix 대신 overflow:hidden을 사용한다. 단, 네비게이션에는 overflow:hidden 사용을 하지 말것!!
layer의 부모가 wrap이기 때문에 overflow:hidden과 position:realtive를 wrap에 넣어준다.
text-align: justify 문단의 양쪽 정렬
양쪽 정렬로 하면 가독성이 좋다.
닫기창을 움직이려면 팝업창에 absolute를 넣어서 닫기창은 팝업창을 기준으로 움직일 수 있다.
닫기창에 absolute를 넣어서 닫기창을 움직여준다. right, bottom 처음에 0으로 기준잡고 치수를 높여주면서 이동해주면된다.
팝업창 닫아주기
#layer에 display: none; 명령어로 팝업창이 감춰지도록한다.
공지사항을 클릭했을때 팝업창이 뜨도록해야함
공지사항 ul > li 에 clearfix click을 추가함
이벤트 명령어를 넣어주면 공지사항을 클릭했을 때 팝업창이 뜨게된다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연꽃축제</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/all.css">
</head>
<body>
<div id="wrap">
<header id="header">
<h1 class="logo">
<img src="./img/logo.png" alt="부여연꽃 축제 로고이미지">
</h1>
<nav class="nav">
<ul>
<li><a href="#">축제소개</a>
<ul class="submenu">
<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="submenu">
<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="submenu">
<li><a href="#">축제 소식</a></li>
<li><a href="#">보도 자료</a></li>
<li><a href="#">음식레시피</a></li>
</ul>
</li>
<li><a href="#">참여마당</a>
<ul class="submenu">
<li><a href="#">참가후기</a></li>
<li><a href="#">연꽃갤러리</a></li>
<li><a href="#">포토갤러리</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<section id="banner">
<h2>부여연꽃축제</h2>
<img src="./img/banner.png" alt="연꽃배너이미지">
</section>
<section id="contents" class="clearfix">
<!-- clearfix를 넣어줘야 footer가 위에 안올라옴 contents가 id라 class로 넣어줘야함-->
<article class="notoice">
<h3>공지사항</h3>
<ul>
<li class="clearfix click">
<!-- a태그와 span태그에 float을 주기위해 clearfix를 준다. -->
<a href="#">부여 연꽃 축제기간이 06월 15일부터 시작됩니다.</a>
<span>05-30</span>
</li>
<li class="clearfix">
<a href="#">연꽃 축제기간 중 타지에서 오는 관광객에게 2,000원 할인 행사를 하고 있습니다.</a>
<span>05-25</span>
</li>
<li class="clearfix">
<a href="#">서울 구로구에 계시는 분들은 부여와 자매구로 5,000원 할인하고 있습니다.</a>
<span>05-25</span>
</li>
<li class="clearfix">
<a href="#">부여 연꽃 보러 많이 많이 오세요.</a>
<span>05-24</span>
</li>
</ul>
</article>
<article class="gallery">
<h3>갤러리</h3>
<ul>
<li>
<img src="./img/gall_1.png" alt="연꽃갤러리이미지01">
<span>바로가기</span>
</li>
<li>
<img src="./img/gall_2.png" alt="연꽃갤러리이미지02">
<span>바로가기</span>
</li>
<li>
<img src="./img/gall_3.png" alt="연꽃갤러리이미지03">
<span>바로가기</span>
</li>
</ul>
</article>
<article class="link">
<h3>바로가기</h3>
<ul>
<li>
<img src="./img/link.png" alt="바로가기이미지">
<span>바로가기</span>
</li>
</ul>
</article>
</section>
<footer id="footer" class="clearfix">
<div class="f_copy">
<address>서울특별시 구로구 구로1동 하이미디어빌딩 4층 102호 하이미디어</address>
<p>copyright © 하이미디어 C./, Ltd All Right Reserved.</p>
</div>
<div class="f_sns">
<a href="#"><i class="fa-brands fa-square-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-square-twitter"></i></a>
</div>
<div class="f_f">
<select>
<option selected="selected">패밀리사이트</option>
<option>문화체육관광부</option>
<option>한국관광공사</option>
<option>한국지역진흥재단</option>
</select>
</div>
</footer>
<!-- 팝업창 -->
<div id="layer">
<em class="title">
2023년 6월 9일 우천으로 인한<br> 공연취소 및 연기안내
</em>
<span class="desc">
안녕하세요. 부여 연꽃축제 운영진입니다<br><br>
금일 예정되어 있었던 각종 행사 및 공연이 우천으로 인하여
긴급하게 취소되어 양해 말씀 전달드립니다.
아쉽지만, 이후 방문해주시면
더 멋지고 화려한 공연과 각종 행사로 보답드리도록 하겠습니다
<br><br>
감사합니다.
</span>
<span class="sub_desc">부여 연꽃축제 운영위원회</span>
<a href="#" class="close">닫기</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- .min. 여백을 줄여서 용량이 적은 파일 -->
<script>
//팝업창
$(".click").click(function(){
// $("#layer").show(); //보이기
$("#layer").fadeIn(500); //서서히 보여주는 명령어(0.5초 동안)
});
$(".close").click(function(){
// $("#layer").hide();//감추기
$("#layer").fadeOut(); //서서히 감춰주는 명령어(0.5초동안)
});
$(".nav>ul>li").hover(function(){
//마우스 올렸을 때 이벤트
$(this).find(".submenu").stop().slideDown(200);
},function(){
//마우스 내렸을 때 이벤트
$(this).find(".submenu").stop().slideUp(200);
});
</script>
</body>
</html>css
@charset "utf-8";
/*reset*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #222;
}
img{
display: block;
}
.clearfix::after, .clearfix::before{
content: "";
display: block;
clear: both;
}
#wrap{
width: 1000px;
margin: 0 auto;
position: relative;
/*팝업창의 기준점*/
overflow: hidden;
/*#header, #banner, #contents, #footer을 float으로 인해
높이값 살리기 :clearfix 대신 사용, 단 네비게이션에는 쓰지 말자*/
}
#header{
width: 300px;
float: left;
height: 650px;
/* background-color: lightblue; */
}
#header .logo{
width: 300px;
height: 150px;
/*가운데정렬 삼총사*/
display: flex; /*flex는 반드시 부모한테 넣어라*/
align-items: center;
justify-content: center;
/* background-color: beige; */
}
#header .logo img{}
#header .nav{}
#header .nav ul{}
#header .nav ul li{
width: 100%;
position: relative;
}
#header .nav ul li a{
background-color: #FD89A5;
display: block;
line-height: 40px;
/*줄간격 높여주기*/
color: #fff;
font-size: 18px;
/* text-align: center; */
padding-left: 70px;
/*글자 안쪽 정렬*/
}
#header .nav ul li a:hover{
background-color: lightgreen;
}
#header .nav ul li ul.submenu{
display: none;
position: absolute;
top:0;
left: 300px;
width: 100%;
z-index: 10;
}
#header .nav ul li ul.submenu li{}
#header .nav ul li ul.submenu li a{
background-color: lightpink;
padding-left: 90px;
color: #222;
}
#header .nav ul li ul.submenu li a:hover{
background-color: lightgreen;
}
#banner{
width: 700px;
float: left;
position: relative;
}
#banner h2{
position: absolute;
left: 5%;
bottom: 10%;
/* background-color: white; */
padding: 15px;
border-radius: 28%;
/* opacity: 0.5; */
/* transform: translate(-50%,-50%); */
color: #000;
font-size: 40px;
text-shadow: 5px 5px 5px #fff;
}
#banner img{}
#contents{
width: 700px;
float: left;
}
#contents > article{
width: 33.33%;
height: 200px;
padding: 10px;
/*left, tap 여백10주기*/
float: left;
}
#contents > article>h3{
background-color: #FD89A5;
color: white;
/* 사각형 90*40px radius적용 */
width: 90px;
height: 40px;
border-radius: 10px 10px 0 0;
text-align: center;
line-height: 40px;
}
#contents > article>ul{
border-top: 1.7px solid #FD89A5;
padding-top: 10px;
/*선 밑 10px 여백주기*/
}
#contents .notoice{}
#contents .notoice ul{}
#contents .notoice ul li{
padding: 5px 0;
/*줄간격*/
position: relative;
/*가상요소 기준점*/
font-size: 14px;
}
#contents .notoice ul li::before{
/*가상요소 넣어주기*/
content: "";
position: absolute;
top: 15px;
left: 0;
width: 3px;
height: 3px;
background-color: #FD89A5;
}
#contents .notoice ul li a{
/* background-color: #999; */
display: block;
width: 70%;
float: left;
/*왼쪽 배치하기 위해 float띄워줌*/
white-space: nowrap;
overflow: hidden;
/*일정범위가 넘어가면 대상을 숨겨주어라*/
text-overflow: ellipsis;
/*텍스트가 일정범위를 넘었을 때 ...넣어라*/
padding-left: 10px;
/*왼쪽 여백 들여쓰기*/
}
#contents .notoice ul li span{
/* background-color: #666; */
display: block;
width: 25%;
float: right;
/*오른쪽 배치하기 위해 float띄워줌*/
text-align: right;
/*글자 오른쪽 정렬*/
}
#contents .gallery{}
#contents .gallery ul{
}
#contents .gallery ul li{
float: left;
margin-right: 10px;
overflow: hidden;
width: 64px;
height: 129px;
/*overflow:hidden시에 li의 너비, 높이값을 넣어줘야 된다.*/
}
#contents .gallery ul li:last-child{
margin-right: 0;
}
#contents .gallery ul li img{}
#contents .gallery ul li span{
width: 64px;
height: 40px;
font-size: 10px;
background-color: #000;
display: block;
opacity: 0.3;
color: #fff;
text-align: center;
transition: 0.5s;
}
#contents .gallery ul li:hover span{
transform: translateY(-40px);
}
#contents .link{}
#contents .link ul{}
#contents .link ul li{
position: relative;
}
#contents .link ul li img{}
#contents .link ul li span{
width: 213px;
height: 129px;
font-size: 12px;
background-color: white;
display: block;
opacity: 0.5;
color: #666;
text-align: center;
line-height: 129px;
transition: 0.5s;
position: absolute;
top: 0;
left: 0;
}
#contents .link ul li:hover span{
opacity: 0;
}
#footer{
width: 700px;
float: left;
height: 100px;
background-color: #FD89A5;
}
#footer>div{
width: 200px;
height: 50px;
float: left;
padding: 10px;
}
#footer .f_copy{
/* background-color: #999; */
width: 500px;
height: 100px;
padding-top: 30px;
text-align: center;
color: #fff;
}
#footer .f_copy address{
font-style: normal;
}
#footer .f_sns{
/* background-color: #888; */
text-align: center;
}
#footer .f_sns a{
font-size: 25px;
margin-right: 10px;
color: #fff;
}
#footer .f_sns a:last-child{
margin-right: 0;
}
#footer .f_f{
/* background-color: #777; */
display: flex;
/* align-items: center; */
justify-content: center;
}
#layer{
position: absolute;
/*절대주소, 기본으로 0,0에 위치하게 됨*/
left: 50%;
top: 50%;
background-color: #fff;
transform: translate(-50%,-50%);
width: 500px;
height: 400px;
border: 5px solid #FD89A5;
z-index: 100;
/*subnav가 위에 뜨지 않게 하기 위해서 z-index로 팝업창을 맨위로 가게함*/
padding: 20px;
display: none;
}
#layer .title{
display: block;
/*밑으로 떨어지게 만듦*/
font-size: 26px;
text-align: center;
font-weight: 700;
font-style: normal;
border-bottom: 2px solid #bdbdbd;
padding-bottom: 20px;
/*선의 윗부분 줄 여백주기*/
margin-bottom: 20px;
/*선의 밑부분 줄 여백주기*/
line-height: 1.4;/*한글에서 140%*/
/*문자 줄간격*/
}
#layer .desc{
display: block;
padding: 10px;
font-size: 14px;
/* text-align: center; */
text-align: justify;
/* 문단의 양쪽정렬 */
}
#layer .sub_desc{
display: block;
text-align: center;
font-weight: 700;
}
#layer .close{
position: absolute;
right: 5px;
bottom: 5px;
background-color: #FD89A5;
color: #fff;
padding: 12px 15px;
/*직사각형 만들어주기*/
font-weight: bold;
}
728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 23_ 마우스오버 효과② (0) | 2023.06.12 |
|---|---|
| 비주얼 스튜디오 코드 22_ 탭 메뉴 (0) | 2023.06.09 |
| 비주얼 스튜디오 코드 20_ 연꽃축제 예제 _ footer (0) | 2023.06.09 |
| 비주얼 스튜디오 코드 19_ 연꽃축제 예제_banner, contents 넣기 (0) | 2023.06.08 |
| 비주얼 스튜디오 코드18_ 연꽃축제 예제_header 사이드 (0) | 2023.06.08 |
