20. 웹표준 사이트 만들기 - cont1

braverokmc79 · Sep 12, 2022 · 4b552fa · 4b552fa
1 parent 32808f6
commit 4b552fa
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/css/style.css b/css/style.css
@@ -21,7 +21,7 @@ body{
 #cont-nav{background: url(../img/body_bg.gif) repeat-x;}
 #cont-tit{background-color: #fff;}
 #cont-ban{background-color: #dceff7; }
-#cont-cont{width: 100%;height: 100px;background-color: #222;}
+#cont-cont{}
 
 
 /* quick */
@@ -94,3 +94,15 @@ body{
 .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; }
+
+
+
+/* cont layout */
+.cont{overflow: hidden; padding-top: 30px;}
+.cont .box{width:289px; height: 364px; float: left;  margin: 0 30px 30px 0; padding-right: 30px;}
+.cont .box1{border-right: 1px solid #c8c8c8;}
+.cont .box2{border-right: 1px solid #c8c8c8;}
+.cont .box3{margin-right: 0px; padding-right: 0px;}
+.cont .box4{border-right: 1px solid #c8c8c8;}
+.cont .box5{border-right: 1px solid #c8c8c8;}
+.cont .box6{margin-right: 0px; padding-right: 0px}
diff --git a/index.html b/index.html
@@ -154,7 +154,16 @@ <h2>&ldquo;나는 개발자다.&rdquo;</h2>
             </div>
             <!-- //cont-ban -->
             <div id="cont-cont">
-                 <div class="container">cont-cont</div>
+                 <div class="container">
+                    <div class="cont">
+                        <div class="box box1">box1</div><!-- box1 -->
+                        <div class="box box2">box2</div><!-- box2 -->
+                        <div class="box box3">box3</div><!-- box3 -->
+                        <div class="box box4">box4</div><!-- box4 -->
+                        <div class="box box5">box5</div><!-- box5 -->
+                        <div class="box box6">box6</div><!-- box6 -->
+                    </div>
+                 </div>
             </div>
             <!-- //cont-con -->
         </div>