19. 웹표준 사이트 만들기 - ban2

braverokmc79 · Sep 12, 2022 · 32808f6 · 32808f6
1 parent 351b3a9
commit 32808f6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 
 
-### 유튜브 강의 목록 :  https://www.youtube.com/playlist?list=PL4UVBBIc6giKkfYN_2TVPgbMpd87lJEfg
+######  유튜브 강의 목록 :  https://www.youtube.com/playlist?list=PL4UVBBIc6giKkfYN_2TVPgbMpd87lJEfg
 
 
 

diff --git a/css/style.css b/css/style.css
@@ -80,10 +80,17 @@ body{
 
 
 /* ban */
-.ban{}
+.ban{padding: 30px 0 20px 0;}
 .ban ul{overflow: hidden;}
-.ban ul li{float: left; width: 330px; text-align: center;}
-.ban ul li a{}
-
-.ban .ban-prev{}
-.ban .ban-next{}
+.ban ul li{float: left; width: 330px; text-align: center; font-size: 0;}
+.ban ul li a img{border: 4px solid #dcdcdc;}
+.ban ul li a img:hover{border-color:  #98bcdc;}
+.ban .ban-prev{position: absolute; left: -50px; top: 70px;  width:43px; height: 43px;  background: url(../img/icon.png) -150px  0px; }
+.ban .ban-next{position: absolute; right: -50px; top: 70px;  width:43px; height: 43px;  background:url(../img/icon.png)  -150px -43px;  }
+.ban .ban-prev:hover{background-position-x: -193px; }
+.ban .ban-next:hover{background-position-x: -193px; }
+
+.ban .dot { margin-top: 15px;}
+.ban .dot ul{overflow: hidden;  display: flex;justify-content: center;}
+.ban .dot ul li{float: left; width:15px; height: 15px; margin: 0px 5px; border-radius: 50%; cursor: pointer;  background-color: #5dbfeb;}
+.ban .dot li:hover{ width:15px; height: 15px; background-color: #2b91c8; }
diff --git a/index.html b/index.html
@@ -134,14 +134,22 @@ <h2>&ldquo;나는 개발자다.&rdquo;</h2>
             <div id="cont-ban">
                 <div class="container">
                     <div class="ban">
-                        <a href="#" class="ban-prev">이전 이미지</a>
+                        <a href="#" class="ban-prev"><span class="ir">이전 이미지</span></a>
                         <ul>
                             <li><a href="#"><img src="img/banner_link1.jpg" alt="웹표준 지침서 보기"></a></li>
                             <li><a href="#"><img src="img/banner_link2.jpg" alt="CSS를 이용한 입체적인 버튼 만들기"></a></li>
                             <li><a href="#"><img src="img/banner_link3.jpg" alt="HTML5를 이용한 로그인 폼 만들기"></a></li>
                         </ul>
-                        <a href="#" class="ban-prev">다음 이미지</span>
+                        <a href="#" class="ban-next"><span class="ir">다음 이미지</span></a>
+                            <div class="dot">
+                                <ul>
+                                    <li><a href="#">점</a></li>
+                                    <li><a href="#">점</a></li>
+                                    <li><a href="#">점</a></li>
+                                </ul>
+                            </div>
                     </div>
+
                 </div>
             </div>
             <!-- //cont-ban -->