25. 웹 표준 사이트 만들기(2019) - 갤러리

25. 웹 표준 사이트 만들기(2019) - 갤러리

전체소스

index.html

<div class="column col6">

           <h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>

           <p class="icon_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>

           <!-- 갤러리 -->

           <div class="gallery">

                      <h4>포트폴리오</h4>

                      <div class="gallery_btn">

                                 <ul>

                                             <li class="gb_icon1"><a href="#"><span class="ir_pm">시작</span></a></li>

                                             <li class="gb_icon2"><a href="#"><span class="ir_pm">정지</span></a></li>

                                             <li class="gb_icon3"><a href="#"><span class="ir_pm">이전이미지</span></a></li>

                                             <li class="gb_icon4"><a href="#"><span class="ir_pm">다음이미지</span></a></li>

                                 </ul>

                      </div>

                      <div class="gallery_img">

                                 <ul>

                                             <li><a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a></li>

                                             <li><a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a></li>

                                             <li><a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a></li>

                                             <li><a href="#"><img src="img/gallery04.jpg" alt="갤러리4"></a></li>

                                             <li><a href="#"><img src="img/gallery05.jpg" alt="갤러리5"></a></li>

                                 </ul>

                      </div>

           </div>

           <!-- //갤러리 -->

</div>

<!-- //col6 -->

 

style.css

/* 갤러리 */

.gallery {position: relative; border: 1px solid #ccc; height: 254px; overflow: hidden;}

.gallery h4 {font-size: 14px; color: #0093bd; border-bottom: 1px solid #ccc; padding: 10px 0 8px 11px; font-weight: bold;}

.gallery .gallery_btn {position: absolute; right: 5px; top: 7px;}

.gallery .gallery_btn ul {overflow: hidden;}

.gallery .gallery_btn li {float: left; margin: 1px 2px;}

.gallery .gallery_btn li a {display: block; width: 23px; height: 23px; background: url(../img/icon.png) no-repeat;}

.gallery .gallery_btn li.gb_icon1 a {background-position: -150px -120px;}

.gallery .gallery_btn li.gb_icon2 a {background-position: -150px -143px;}

.gallery .gallery_btn li.gb_icon3 a {background-position: -150px -166px;}

.gallery .gallery_btn li.gb_icon4 a {background-position: -150px -189px;}

.gallery .gallery_btn li.gb_icon1 a:hover {background-position: -173px -120px;}

.gallery .gallery_btn li.gb_icon2 a:hover {background-position: -173px -143px;}

.gallery .gallery_btn li.gb_icon3 a:hover {background-position: -173px -166px;}

.gallery .gallery_btn li.gb_icon4 a:hover {background-position: -173px -189px;}

.gallery .gallery_img img {width: 100%;}