roakfwk30 / 2021_단기집중교육_HTML.CSS star
안효원 안효원 2021-08-08
from home4
@a3a1892fae9b56387dc2f6512bbe4f421e3cdd36
 
a3a1892
20210808/3.html (added)
+++ 20210808/3.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>Title</title>
+<style>
+    * {margin: 0; padding: 0; color: #666666; box-sizing: border-box;}
+    body {background: no-repeat url("http://web.miri.kr/example/images/bg.jpg") fixed; background-size: cover;}
+    #container {margin: 0 auto; background-color: #ffffff; width: 1030px;}
+    #top {background-color: #aeaca8;}
+    #top ul li {display: inline-block; vertical-align: middle; margin-right: 40px;}
+    #top ul li a {text-decoration: none; color: #ffffff; font-size: 20px;}
+    #top ul li a:hover {color: black;}
+    #second {background: url("http://web.miri.kr/example/images/main1.jpg"); width: 1030px; height: 500px;}
+    #article {width: 1030px; height: 500px;}
+    #left {width: 68%; height: 100%; float: left; border-right: #aeaca8 1px solid;}
+    #right {width: 30%; height: 100%; float: left; margin-left: 20px;}
+    #leftTop {width: 100%; height: 50%;}
+    #leftBottom {width: 100%; height: 50%;}
+    #leftTopLeft {width: 50%; height: 100%; float: left;}
+    #leftTopRight {width: 50%; height: 100%; float: left;}
+    #img1 {width: 300px; height: 200px; margin-left: 25px; margin-top: 20px;}
+    .caption {margin-left: 25px;}
+    #text1 {margin-top: 20px;}
+    .lorem1 {font-size: 25px;}
+    .lorem2 {font-size: 20px; color: #de6581;}
+    #leftBottomLeft {width: 50%; height: 100%; float: left;}
+    #leftBottomRight {width: 50%; height: 100%; float: left;}
+    #img2 {width: 300px; height: 200px; margin-left: 25px; margin-top: 20px;}
+    #text2 {margin-top: 20px; margin-left: 25px;}
+    #rightTop {height: 50%; width: 100%;}
+    #rightBottom {height: 50%; width: 100%;}
+    #walking {margin-top: 20px; color: #de6581; font-size: 20px;}
+    #rightTop ul li {list-style: none; margin-top: 20px; border-bottom: #aeaca8 1px solid;  width: 220px; padding-bottom: 8px;}
+    #rightTop ul li:hover {background-color: #aeaca8;}
+    #rightTop ul li a {text-decoration: none; color: #de6581;}
+    #contact {font-size: 20px; color: #de6581;}
+    #footer {background-color: #aeaca8;}
+    #copy {color: #ffffff; padding: 10px 0 10px 5px; ;}
+</style>
+
+</head>
+<body>
+    <div id="container">
+        <div id="top">
+            <ul>
+                <li><a href="#"><img src="http://www.aiit.or.kr/images/logo.png"></a></li>
+                <li><a href="#">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="second">
+<!--            손 그림-->
+        </div>
+        <div id="article">
+            <div id="left">
+                <div id="leftTop">
+                    <div id="leftTopLeft">
+                        <img id="img1" src="http://web.miri.kr/example/images/image1.jpg">
+                        <p class="caption">그림 [1]</p>
+                    </div>
+                    <div id="leftTopRight">
+                        <p id="text1">
+                            <span class="lorem1">Lorem ipsum.</span><br>
+                            <span class="lorem2">Lorem ipsum dolor sit amet.</span><br><br>
+                            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur dignissimos explicabo hic molestias placeat reiciendis sapiente voluptatem voluptatibus! A ad consequuntur ea exercitationem minima minus mollitia, similique totam.</span>
+                        </p>
+                    </div>
+                </div>
+                <div id="leftBottom">
+                    <div id="leftBottomLeft">
+                        <p id="text2">
+                            <span class="lorem1">Lorem ipsum.</span><br>
+                            <span class="lorem2">Lorem ipsum dolor sit amet.</span><br><br>
+                            <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi aspernatur dignissimos explicabo hic molestias placeat reiciendis sapiente voluptatem voluptatibus! A ad consequuntur ea exercitationem minima minus mollitia, similique totam.</span>
+                        </p>
+                    </div>
+                    <div id="leftBottomRight">
+                        <img id="img2" src="http://web.miri.kr/example/images/image2.jpg">
+                        <p class="caption">그림 [2]</p>
+                    </div>
+                </div>
+            </div>
+            <div id=right>
+                <div id="rightTop">
+                    <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="rightBottom">
+                    <p>
+                        <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>Gwangju, Korea</span><br>
+                        <span>062-000-1111</span><br>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div id="footer">
+            <p id="copy">Copyright&copy;2019 한국정보통신교육원 All rights reserved.</p>
+        </div>
+    </div>
+</body>
+</html>(No newline at end of file)
Add a comment
List