[웹디자인기능사 실기] 남도맛기행 축제 C-3 / 코드

[웹디자인기능사 실기] 남도맛기행 축제 C-3

 

 

0. 이전 유형과 다른 점

✅ 세로 메뉴 - 서브 메뉴가 세로로 펼쳐지는 것이 아닌 우측으로 펼쳐진다.

 

 

 

1. 헤더

1-1. mark-up

<header>
 <div class="logo">
    <h2><a href="#">남도맛기행축제</a></h2>
 </div>
 <ul class="gnb">
    <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>
       </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="#">Q&A</a></li>
          <li><a href="#">사진갤러리</a></li>
          <li><a href="#">공지사항</a></li>
       </ul>
    </li>
 </ul>
</header>

✅ 헤더의 전체적인 구조는 이전과 모두 동일하다.

✅ 모든 요소에 a 태그가 있는지, a 태그에는 임시 링크 # 이 붙어있는지 확인하기

 

1-2. css

.wrap{
    width: 1000px;
    height: 650px;
    display: flex;
}

/* 헤더 */
header{
    width: 200px;
    height: 650px;
    text-align: center;
    position: relative;
    z-index: 10;
    background: #a5aad4;
}
.logo{
    width: 200px;
    height: 40px;
    margin: 30px 0;
}
.logo h2{
    color: #151C48;
}
.gnb li{
    position: relative;
}
.gnb li a{    
    width: 180px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
}
.gnb>li>a{ 
    font-weight: bold;
    font-size: 1.1rem;
}
.gnb>li:hover>a{
    background: #151C48;
    color: #ffffff;
}
.sub{
    position: absolute;
    left: 190px;
    top:-40px;
    background: #eee;
    color: #333333;
}
.sub{
    display: none;
}
.sub li:hover a{
    background: #515b9a;
    color: #ffffff;
}

✅ 헤더 부분과 우측 요소들을 분리하고, wrap 에는 flex 속성을 주면 두 요소가 자연스럽게 가로로 정렬된다.

✅ 헤더는 다른 요소들보다 위에 올라오게 z-index 값을 준다.

✅ 서브메뉴는 우측에서 나오게 left 값을 줘서 오른쪽으로 보내준다.

 

1-3. jquery

$('.gnb li').mouseenter(function(){
    $(this).find('.sub').stop().fadeIn('slow');
});
$('.gnb li').mouseleave(function(){
    $(this).find('.sub').stop().fadeOut('fast');
});

✅ mouseover 가 아닌 mouseenter 사용

✅ gnb li 에 마우스를 올렸을 때 / 이것에서 sub 라는 태그를 찾아서 / 하던 동작은 멈추고 / 천천히 fadeIn

✅ gnb li 에 마우스를 내렸을 때 / 이것에서 sub 라는 태그를 찾아서 / 하던 동작은 멈추고 / 빠르게 fadeOut

 

 

 

2. 좌우 슬라이드

2-1. mark-up

<section id="right">
 <div class="slide">
    <ul class="slide_list">
       <li><a href="#"><p>남도맛기행축제에 오신걸 환영합니다.</p><img src="images/slide01.png" alt="슬라이드이미지"></a></li>
       <li><a href="#"><p>신선한 식재료들이 가득한 식탁</p><img src="images/slide02.png" alt="슬라이드이미지"></a></li>
       <li><a href="#"><p>서로 나누는 문화</p><img src="images/slide03.png" alt="슬라이드이미지"></a></li>
    </ul>
 </div>

 

2-2. css

/* 슬라이드 */
.slide{
    width: 800px;
    height: 350px;
    background: #ccc;
    overflow: hidden;
}
.slide_list{
    width: 2400px;
    height: 350px;
}
.slide_list li{
    float: left;
    position: relative;
}
.slide_list li p{
    width: 300px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

✅ slide_list 는 너비가 모든 li의 너비를 합한 만큼 지정해준다.

✅ slide_list li 는 float 으로 나란히 정렬해준다.

✅ p 는 li 를 기준으로 가운데 정렬시키기

 

2-3. jquery

setInterval(function(){
    $('.slide_list').animate({'margin-left':'-100%'}, function(){
        $('.slide_list li').eq(0).appendTo('.slide_list');
        $('.slide_list').css({'margin-left':'0%'});
    });
}, 3000);

✅ setinterval 로 함수가 실행될 간격 지정해주기

✅ slide_list 에 애니메이션을 적용해서, 마진 left 를 li 의 하나 크기만큼 왼쪽으로 보내기.

✅ slide_list li 의 첫번째 요소는 마지막으로 보낸다.

✅ slide_list 는 마진 left 값을 다시 0으로 조정해서 원상태로 돌려준다.

 

 

 

3. 콘텐츠

3-1. mark-up

 <div class="contents">
    <div class="con_box con_notice">
       <div class="con_tit"><a href="#"><h3>공지사항</h3></a></div>
       <ul class="notice_list">
          <li><a href="#">공지사항 내용입니다.</a><span>2022-11-11</span></li>
          <li><a href="#">공지사항 내용입니다.</a><span>2022-11-11</span></li>
          <li><a href="#">공지사항 내용입니다.</a><span>2022-11-11</span></li>
          <li><a href="#">공지사항 내용입니다.</a><span>2022-11-11</span></li>
          <li><a href="#">공지사항 내용입니다.</a><span>2022-11-11</span></li>
       </ul>
    </div>
    <div class="con_box con_gall">
       <div class="con_tit"><a href="#"><h3>갤러리</h3></a></div>
       <ul class="gall_list">
          <li><a href="#"><img src="images/gall01.png" alt="갤러리이미지"></a></li>
          <li><a href="#"><img src="images/gall02.png" alt="갤러리이미지"></a></li>
          <li><a href="#"><img src="images/gall03.png" alt="갤러리이미지"></a></li>
       </ul>
    </div>
    <div class="con_box con_site">
       <div class="con_tit"><a href="#"><h3>바로가기</h3></a></div>
       <a href="#"><img src="images/shite.png" alt="사이트바로가기"></a>
    </div>
 </div>

 

3-2. css

/* 콘텐츠 */
.contents{
    width: 800px;
    height: 200px;
    display: flex;
}
.con_box{
    width: 30%;
    height: 200px;
}
.con_notice{
    width: 40%;
}
.con_tit{
    width: 90px;
    height: 40px;
    line-height: 40px;
    background-color: #eee;
    margin-left: 8px;
    text-align: center;
    font-size: 15px;
}
.notice_list{
    position: relative;
    font-size: 15px;
}
.notice_list li{
    display: flex;
    line-height: 1.7;
}
.notice_list span{
    margin-left: auto;
}
.notice_list li:hover{
    color: aqua;
}
.gall_list{
    padding: 10px;
    display: flex;
    justify-content: space-between;
}
.gall_list li{
    position: relative;
    width: 70px;
}
.gall_list li:hover:after{
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.7);
}
.gall_list li img{
    width: 100%;
}
.con_site{
    position: relative;
}
.con_site .con_tit{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

✅ gall_list li 에 호버했을때 after 에 콘텐츠 추가

✅ li 에 relative, after 에 absolute 해주기

✅ 너비, 높이는 100%로 투명도는 rgba로 적당히 조절

 

 

 

4. 푸터

4-1. mark-up

 <footer>
    <div class="f_logo">
       <h2><a href="#">남도맛기행축제</a></h2>
    </div>
    <div class="footer_right">
       <ul class="footer_menu">
          <li><a href="#">개인정보보호</a></li>
          <li><a href="#">고객센터</a></li>
          <li><a href="#">주소</a></li>
       </ul>
       <div class="copyright">
          <p>copyright</p>
       </div>
    </div>
 </footer>
</section>

 

4-2. css

/* 푸터 */
footer{
    width: 800px;
    height: 100px;
    display: flex;
}
.f_logo{
    width: 200px;
    height: 100px;
}
.f_logo h2{
    width: 200px;
    height: 40px;
    padding-top: 30px;
    text-align: center;
}

.footer_right{
    width: 600px;
    height: 100px;
    text-align: center;
    line-height: 50px;
}
.footer_menu{
    margin: 0 auto;
    width: 250px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
.copyright{
    width: 600px;
    height: 50px;
    font-size: 14px;
}

 

 

 

5. 모달

5-1. mark-up

<div class="modal_bg"></div>
<div class="modal_box">
 <div class="modal_tit">남도맛기행축제</div>
 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta ab minima nobis, vitae odit temporibus ipsa dolorum, libero, quod unde placeat officia repudiandae sunt. Quae hic doloribus nam dolor quas.</p>
 <div class="close"><a href="#">X 닫기</a></div>
</div>

 

5-2. css

.modal_bg{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.5);
    z-index: 15;
    display: none;
}
.modal_box{
    width: 400px;
    height: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    z-index: 16;
    padding: 20px;
    display: none;
}
.modal_tit{
    font-size: 20px;
    font-weight: bold;
}
.modal_box p{
    line-height: 1.5;
    margin-top: 20px;
}
.close{
    width: 60px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: #515b9a;
    color: #ffffff;
    text-align: center;
}

 

5-3. jquery

$('.con_notice').eq(0).click(function(){
    $('.modal_bg').fadeIn('slow');
    $('.modal_box').fadeIn('slow');
});
$('.modal_bg, .close').click(function(){
    $('.modal_bg').fadeOut('fast');
    $('.modal_box').fadeOut('fast');
});

✅ 배경(dim 처리 부분)을 클릭하면 모달창 같이 사라지게 해주기.

 

 

 

 

 

6. 유효성 검사

6-1. html

▶ clear !

 

6-2. css

▶ clear !

 

6-3. console

▶ clear !

 

 

 

 

 

 

완성!