roakfwk30 / 2021_단기집중교육_HTML.CSS star
안효원 안효원 2021-08-06
Day5End
@2cafdc58e72bcc3010f924d6605a5b42fec4aa3b
fc52151
2cafdc5
20210806/1.html
--- 20210806/1.html
+++ 20210806/1.html
@@ -9,7 +9,8 @@
 
         * {margin: 0; padding: 0; box-sizing: border-box;}
 
         header, section, footer, aside, nav, article, figure, figcaption {display: block;}
 
         body {
 
-            color: #666; background:no-repeat url('http://web.miri.kr/example/images/bg.jpg')fixed; background-size: cover; font-family: sans-serif, serif; line-height: 1.4em;
 
+            color: #666; background:no-repeat url('http://web.miri.kr/example/images/bg.jpg')fixed;
 
+            background-size: cover; font-family: sans-serif, serif; line-height: 1.4em;
 
         }
 
         .container {width: 1030px; margin: 0 auto; background-color: white; height: auto;}
 
         .left {float: left;}
 
2cafdc5
20210806/2.html (added)
+++ 20210806/2.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <style>
+        * {margin: 0; padding: 0; box-sizing: border-box; color: #666666;}
+        body {background:no-repeat url("http://web.miri.kr/example/images/bg.jpg") fixed; background-size: cover; color: #666;}
+        .container {width: 1030px; margin: 0 auto; background-color: white; height: auto;}
+        #top {background-color: #aeaca8;}
+        #top ul li img {vertical-align: middle;}
+        #top ul li {display: inline-block; color: white; font-size: 20px; list-style: none;}
+        #top ul li a {text-decoration: none; margin-left: 20px; color: white; vertical-align: middle;}
+        #secondImg {background: url("http://web.miri.kr/example/images/main1.jpg"); width: 1030px; height: 500px;}
+        #articleSector {width: 1030px; height: 500px;}
+        #left {width: 70%; height: 500px; float: left;}
+        #right {width: 30%; height: 500px; float: left;}
+        #left_top {height: 250px; width: 100%;}
+        #left_bottom {height: 250px; width: 100%;}
+        #footer {width: 1030px; height: 25px; background-color: #aeaca8;}
+        #left_top_image {height: 200px; margin-top: 25px; margin-left: 20px;}
+        #caption1 {margin-left: 20px;}
+        #left_bottom_image {height: 200px; margin-top: 25px; margin-right: 20px; float: right;}
+        #caption2 {margin-left: 20px; clear: both; float: right; margin-right: 20px;}
+        #left_top_left {width: 50%; float: left;}
+        #text1 {width: 50%; height: 250px;float: left; position: relative; top: 20px;}
+        #text2 {width: 50%; height: 250px; position: relative; left: 10px; top: 10px;}
+        #lorem1 {font-size: 25px;}
+        #lorem2 {font-size: 20px; color: palevioletred;}
+        #walking {font-size: 30px;}
+        #right ul li {margin-top: 25px; list-style: none;}
+        #right ul li a {text-decoration: none; color: palevioletred; margin-left: 15px;}
+        #right_top {height: 50%; position: relative; top: 20px;}
+        #right_bottom {height: 50%; position: relative; top: 20px ;}
+        #contact {color: palevioletred; font-size: 30px;}
+        #copy {color: white; font-size: 15px; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div id="top">
+            <ul>
+                <li><img src="http://www.aiit.or.kr/images/logo.png"></li>
+                <li><a href="#" id="checked">Company</a></li>
+                <li><a href="#">Product</a></li>
+                <li><a href="#">Service</a></li>
+                <li><a href="#">Community</a></li>
+                <li><a href="#">Contact</a></li>
+            </ul>
+        </div>
+        <div id="secondImg">
+            <!-- 손 그림 -->
+        </div>
+        <div id="articleSector">
+            <div id="left">
+                <div id="left_top">
+                    <div id="left_top_left">
+                        <img id="left_top_image" src="http://web.miri.kr/example/images/image1.jpg">
+                        <p id="caption1">그림[1]</p>
+                    </div>
+                    <div id="text1">
+                        <span id="lorem1">Lorem, ipsum.</span><br>
+                        <span id="lorem2">Lorem ipsum dolor sit amet.</span><br><br>
+                        <span id="lorem3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, reprehenderit soluta deleniti labore dolorum, nisi natus maiores adipisci optio perferendis officiis vitae sunt hic dolore aliquam itaque. Perspiciatis, expedita consequuntur.</span>
+                    </div>
+                </div>
+                <div id="left_bottom">
+                    <div id="left_bottom_right">
+                        <img id="left_bottom_image" src="http://web.miri.kr/example/images/image2.jpg">
+                        <p id="caption2">그림[2]</p>
+                    </div>
+                    <div id="text2">
+                        <span id="lorem1">Lorem, ipsum.</span><br>
+                        <span id="lorem2">Lorem ipsum dolor sit amet.</span><br><br>
+                        <span id="lorem3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, reprehenderit soluta deleniti labore dolorum, nisi natus maiores adipisci optio perferendis officiis vitae sunt hic dolore aliquam itaque. Perspiciatis, expedita consequuntur.</span>
+                    </div>
+                </div>
+            </div>
+            <div id="right">
+                <div id="right_top">
+                    <p id="walking">Walking Exersise</p>
+                    <ul>
+                        <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
+                        <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
+                        <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
+                        <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
+                    </ul>
+                </div>
+                <div id="right_bottom">
+                    <span id="contact">Contact Us</span><br><br>
+                    <span>Gwangju Industrial Tools</span><br>
+                    <span>Circulating Center,</span><br>
+                    <span>Maewol-dong, seo-gu,</span><br>
+                    <span>062-000-1111</span>
+                </div>
+            </div>
+        </div>
+        <div id="footer">
+            <span id="copy">Copyright&copy;2019한국정보통신교육원 All rights reserved.</span>
+        </div>
+    </div>
+</body>
+</html>(No newline at end of file)
Add a comment
List