roakfwk30 / 2021_단기집중교육_HTML.CSS star
안효원 안효원 2021-08-06
Day5Half
@fc52151bf19ea3044d2d4962d4580b95bad2ffaa
3fe3fe9
fc52151
20210805/6.html
--- 20210805/6.html
+++ 20210805/6.html
@@ -16,6 +16,7 @@
 
         #drama {vertical-align: bottom;}
 
         #secondText2 {color: rgb(173, 255, 047); font-weight: bolder; font-size: 20px; position: relative; right: 285px; margin-top: 110px;}
 
         #btn {width: 106px; height: 34px; margin-top: 200px; position: relative; right: 1010px; border-style: none; border-radius: 5px; font-weight: bold;}
 
+        #btn:hover {background-color: honeydew;}
 
         #drop {background-color: rgb(034, 034, 034);}
 
         #thirdText {font-size: 30px; position: relative; left: 160px; top: 40px;}
 
         #thirdText2 {font-size: 20px; color: grey; position: relative; left: 160px; top: 40px;}
@@ -27,8 +28,8 @@
 
         #this2 {margin-right: 75px;}
 
         .chill {color: rgb(170, 170, 170); font-size: 60px;}
 
         .four1 {position: relative; top: 80px; left: 160px; float: left;}
 
-        .anker {font-size: 40px; color: blueviolet;}
 
-        .anker:hover {color: blueviolet;}
 
+        .anker {font-size: 40px; color: steelblue;}
 
+        .anker:hover {color: steelblue; text-decoration: underline;}
 
         #one_one {margin-right: 200px;}
 
         #one_two {margin-right: 200px;}
 
         #pre1 {margin-bottom: 10px;}
@@ -41,6 +42,7 @@
 
         #fiver_one {margin-right: 80px;}
 
         #fiver_two {margin-right: 70px;}
 
         .btn_last {width: 150px; height: 30px; border-radius: 5px; border-style: none; position: absolute; top: 190px;}
 
+        .btn_last:hover {background-color: honeydew;}
 
         .lastAnker { color: cornflowerblue; font-size: 20px;}
 
         .lastAnker:hover {color: cornflowerblue;}
 
         #nice1 {border-right: 1px solid rgb(170, 170, 170);}
@@ -48,12 +50,15 @@
 
         #lastAnkerSector {position: relative; left: 150px;}
 
         #realLast {color: grey; margin-left: 150px;}
 
         #footer {position: relative; bottom: 130px;}
 
-        #like {position: relative; left: 800px;}
 
+        #like {position: relative; left: 810px;}
 
         #btn_search {border-radius: 5px; height: 37px; border-style: none; width: 70px; font-weight: bolder}
 
+        #btn_search:hover {background-color: honeydew;}
 
         #searchText {height: 37px; border-radius: 5px; border-style: none;}
 
         #lastSpan {position: relative; bottom: 5px;}
 
         #check3 {position: relative; bottom: 5px;}
 
         #check1 {position: relative; bottom: 3px;}
 
+        #select {background-color:rgb(034, 034, 034); color: white; border-style: none; width: 100px; font-size: 20px;} 
+        #intention {position: relative; left: 5px;}
 
     </style>
 
 </head>
 
 <body>
@@ -64,7 +69,7 @@
 
             <li><a href="">Products</a></li>
 
             <li><a href="">Home</a></li>
 
             <li>
 
-                <select>
 
+                <select id="select">
 
                     <option id="drop" value="">Service</option>
 
                 </select>
 
             </li>
@@ -78,7 +83,7 @@
 
         <div id="third">
 
             <span id="thirdText">Superior Collaboration </span><span id="thirdText2">Visualize Quality</span>
 
             <hr id="hr">
 
-            <span id="thirdText3">Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base<br>portals after maintainable products.</span>
 
+            <span id="thirdText3">Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly multimedia visualize quality intellectual collaboration capital without superior collaboration and idea-sharing. Holistically pontificate installed base<br>portals after maintainable products.</span>
 
             <div id="imageSector">
 
                 <div id="this" class="three"><span class="chill">700X300</span></div>
 
                 <div id="this2" class="three"><span class="chill">700X300</span></div>
@@ -89,7 +94,7 @@
 
                     <span><a class="anker" href="#">Efficiently Unleash</a></span>
 
                 </div>
 
                 <div class="four1" id="one_two">
 
-                    <span><a class="anker" href="#">Completely Synergize</a></span>
 
+                    <span><a id="intention" class="anker" href="#">Completely Synergize</a></span>
 
                 </div>
 
                 <div class="four1" id="one_three">
 
                     <span><a class="anker" href="#">Dynamically Procrastinate</a></span>
@@ -100,6 +105,7 @@
 
                 </pre>
 
                 <pre class="pre" id="pre2">
 
 
+
 
 Dramatically maintain clicks-and-mortar
 
 solutions without functional solutions.
 
 Efficiently unleash cross-media information
 
fc52151
20210806/1.html (added)
+++ 20210806/1.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Smart Web Publisher</title>
+    <style>
+        * {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;
+        }
+        .container {width: 1030px; margin: 0 auto; background-color: white; height: auto;}
+        .left {float: left;}
+        .right {float: right;}
+        nav, footer {clear: both; background-color: #aeaca8; color: white;}
+        ul, li {list-style: none;}
+        nav ul {padding: 10px;}
+        nav li {
+            display: inline-block; margin-right: 40px; font-weight: 600; font-size: 1.2em;
+            vertical-align: middle;
+        }
+        nav li a {text-decoration: none; color: white;}
+        nav li a:hover, nav li a.current {color: #555;}
+        section.courses {width: 700px; border-right: 1px solid #eee; padding-bottom: 20px;}
+        article {clear: both; overflow: hidden; width: 100%;}
+        hgroup {margin: 30px 20px 20px;}
+        figure {width: 290px; height: 220px; padding: 5px; margin: 20px; border: 1px solid #eee;}
+        figure img {width: 280px; height: 210px;}
+        figcaption {font-size: 90%; text-align: left;}
+        aside {padding-left: 20px;}
+        aside section a {
+            display: block; padding: 10px; border-bottom: 1px solid #eee; font-size: 90%;
+            text-decoration: none;
+        }
+        a { color: #de6581;}
+        aside section a:hover {background-color: #efefef; color: #985d6a;}
+        h1, h2 ,h3 {font-weight: normal;}
+        h2 {margin: 10px 0 5px 0;}
+        h3 {margin: 0 0 10px 0; color: #de6581;}
+        aside h2 {padding: 30px 0 10px;}
+        footer {font-size: 80%; padding: 10px;}
+        .courses{float: left;}
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <nav>
+                <ul>
+                    <li><img src="http://aiit.or.kr/images/logo.png"></li>
+                    <li><a href="#" class="current">Company</a></li>
+                    <li><a href="#">Product</a></li>
+                    <li><a href="#">Service</a></li>
+                    <li><a href="#">Cummunity</a></li>
+                    <li><a href="#">Contact</a></li>
+                </ul>
+            </nav>
+            <div>
+                <ul>
+                    <li><img src="http://web.miri.kr/example/images/main1.jpg"></li>
+                </ul>
+            </div>
+        </header>
+        <!-- 본문-Start -->
+        <section class="courses">
+            <article>
+                <figure class="left">
+                    <img src="http://web.miri.kr/example/images/image1.jpg">
+                    <figcaption>[그림1]</figcaption>
+                </figure>
+                <hgroup>
+                    <h2>Lorem, ipsum.</h2>
+                    <h3>Lorem ipsum dolor sit amet.</h3>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab eos omnis facere nesciunt harum dolore velit soluta, possimus illum a nostrum pariatur. Porro, et laborum itaque voluptatem facere namut.
+                    </p>
+                </hgroup>
+            </article>
+            <article>
+                <figure class="right">
+                    <img src="http://web.miri.kr/example/images/image2.jpg">
+                    <figcaption>[그림2]</figcaption>
+                </figure>
+                <hgroup>
+                    <h2>Lorem, ipsum.</h2>
+                    <h3>Lorem ipsum dolor sit amet.</h3>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab eos omnis facere nesciunt harum dolore velit soluta, possimus illum a nostrum pariatur. Porro, et laborum itaque voluptatem facere namut.
+                    </p>
+                </hgroup>
+            </article>
+        </section>
+        <!-- 본문-End -->
+        <aside class="left">
+            <section>
+                <h2>Walking Exersise</h2>
+                <a href="#">Lorem ipsum dolor sit amet.</a>
+                <a href="#">Lorem ipsum dolor sit amet.</a>
+                <a href="#">Lorem ipsum dolor sit amet.</a>
+                <a href="#">Lorem ipsum dolor sit amet.</a>
+            </section>
+            <section>
+                <h2>Contact Us</h2>
+                <p>
+                    Gwangju Industrial Tools, <br>
+                    Circulating Center, <br>
+                    Maewol-dong, seo-gu, <br>
+                    062-000-1111
+                </p>
+            </section>
+        </aside>
+        <footer>
+            Copyright &copy; 2019 한국정보통신교육원 All rights reserved.
+        </footer>
+    </div>
+</body>
+</html>(No newline at end of file)
Add a comment
List