roakfwk30 / 2021_단기집중교육_JSP_Bootstrap star
안효원 안효원 2021-08-10
Day2Half
@a62cbd6979cb0f71aba5199fddb0523e941b98ba
0368aec
a62cbd6
20210809/3.html
--- 20210809/3.html
+++ 20210809/3.html
@@ -12,7 +12,7 @@
 
         .topFooter {background-color: #aeaca8;}
 
         .nav {font-size: 20px; display: flex; align-items: center; color: #ffffff; padding-top: 15px;}
 
         .nav:hover {color: black;}
 
-        .copy {color: #ffffff;}
 
+        .copy {color: #ffffff; padding: 10px 0 10px 5px;}
 
         .lorem1 {font-size: 25px;}
 
         .lorem2 {font-size: 20px; color: palevioletred;}
 
         .img {width: 80%; height: 200px; margin-top: 10px;}
 
a62cbd6
20210810/1.html (added)
+++ 20210810/1.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
+    <style>
+        * {color: #666666;}
+        body {background: no-repeat url("http://web.miri.kr/example/images/bg.jpg") fixed; background-size: cover;}
+        .container {background-color: #ffffff; width: 1030px; margin: 0 auto;}
+        .topFooter {background-color: #aeaca8;}
+        .nav {font-size: 20px; display: flex; align-items: center; color: #ffffff; padding-top: 15px;}
+        .nav:hover {color: black;}
+        .copy {color: #ffffff;}
+        .lorem1 {font-size: 25px;}
+        .lorem2 {font-size: 20px; color: palevioletred;}
+        .img {width: 80%; height: 50%; margin-top: 10px;}
+        .rightTitle {font-size: 20px; color: palevioletred;}
+        .rightTop {margin-bottom: 15px; margin-top: 15px;}
+        .lorem5 {color: palevioletred; border-bottom: #aeaca8 1px solid; padding-bottom: 10px;}
+        .lorem5:hover {background-color: #aeaca8;}
+        .mainImg {position: relative; right: 15px;}
+        .left {border-right: #aeaca8 1px solid;}
+        .lolo {position: relative; left: 20px;}
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="row topFooter">
+            <div class="col-xs-3"><img src="http://www.aiit.or.kr/images/logo.png"></div>
+            <div class="col-xs-9">
+                <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8  nav">Company</div>
+                <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8 nav">Product</div>
+                <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8 nav">Service</div>
+                <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8 nav">Community</div>
+                <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8 nav">Contact</div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-12">
+                <img class="mainImg" src="http://web.miri.kr/example/images/main1.jpg">
+            </div>
+        </div>
+        <div class="row">
+                <div class="col-lg-4 col-md-8 col-xs-12 article">
+                    <div class="row left">
+                            <img class="img" src="http://web.miri.kr/example/images/image1.jpg">
+                            <p>그림 [1]</p>
+                            <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. Ab porro sint minus laudantium non natus quod, laborum quasi officia quibusdam nemo tenetur enim nostrum libero vero! Et ad beatae culpa!</span>
+                    </div>
+                </div>
+                <div class="col-lg-4 col-md-8 col-xs-12 article">
+                    <div class="row left">
+                            <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. Ab porro sint minus laudantium non natus quod, laborum quasi officia quibusdam nemo tenetur enim nostrum libero vero! Et ad beatae culpa!</span>
+                            <img class="img im2" src="http://web.miri.kr/example/images/image2.jpg">
+                            <p class="caption">그림 [2]</p>
+                    </div>
+                </div>
+                <div class="col-lg-4 col-md-8 col-xs-12 article">
+                    <div class="lolo">
+                        <div class="row rightTop">
+                                <span class="rightTitle">Walking Exersise</span><br><br>
+                                <span class="lorem5">Lorem ipsum dolor sit amet.</span><br><br>
+                                <span class="lorem5">Lorem ipsum dolor sit amet.</span><br><br>
+                                <span class="lorem5">Lorem ipsum dolor sit amet.</span><br><br>
+                                <span class="lorem5">Lorem ipsum dolor sit amet.</span><br><br>
+                        </div>
+                        <div class="row">
+                                <span class="rightTitle">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>
+                        </div>
+                    </div>
+                </div>
+        </div>
+
+
+
+
+
+
+
+
+
+
+
+
+        <div class="row topFooter">
+            <div class="col-xs-12">
+                <span class="copy">Copyright&copy;2019 한국정보통신교육원 All rights reserved.</span>
+            </div>
+        </div>
+    </div>    
+</body>
+</html>(No newline at end of file)
 
a62cbd6
20210810/2.html (added)
+++ 20210810/2.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+                                                                                                         <!-- 보안 -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
+    <style>
+        body {background: no-repeat url("http://web.miri.kr/example/images/bg.jpg") fixed; background-size: cover;}
+        .container {max-width: 1030px;}
+        a {text-decoration: none;}
+        header {background-color: #aeaca8;}
+        nav a {font-size: 1.2rem;}
+        nav a.link-light:hover, nav a.current {color: #555;}
+        .bg-grey {background-color:  #aeaca8;}
+        .text-grey {color: #666}
+        .text-pink {color: palevioletred}
+    </style>
+</head>
+<body>
+    <div class="container bg-white">
+        <header class="row py-2">
+            <div class="col-3"><img src="http://www.aiit.or.kr/images/logo.png"></div>
+            <nav class="col-8 d-flex justify-content-between align-items-center">
+                <a href="#" class="link-light current">Company</a>
+                <a href="#" class="link-light">Product</a>
+                <a href="#" class="link-light">Service</a>
+                <a href="#" class="link-light">Community</a>
+                <a href="#" class="link-light">Contact</a>
+            </nav>
+        </header>
+        <main>
+            <div class="row">
+                <div class="col-12 p-0 m-0">
+                    <img src="http://web.miri.kr/example/images/main1.jpg">
+                </div>
+            </div>
+            <div class="row py-4">
+                <div class="col-md-8">
+                    <div class="row">
+                        <figure class="col-auto figure">
+                            <img src="http://web.miri.kr/example/images/image1.jpg" width="290" class="figure-img                               img-thumbnail rounded">
+                            <figcaption class="figure-caption">그림 [1]</figcaption>
+                        </figure>
+                        <div class="col-6">
+                            <h4 class="text-grey">Lorem ipsum.</h4>
+                            <h5 class="text-pink">Lorem ipsum dolor sit amet.</h5>
+                            <p class="text-grey">
+                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur at                                     consequatur, culpa dolorem earum excepturi facilis magni natus nemo obcaecati                                       perferendis quasi quo recusandae, rem sit ullam, vitae voluptates!</p>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <figure class="col-auto figure order-2">
+                            <img src="http://web.miri.kr/example/images/image2.jpg" width="290" class="figure-img                               img-thumbnail rounded">
+                            <figcaption class="figure-caption">그림 [2]</figcaption>
+                        </figure>
+                        <div class="col-6 order-1">
+                            <h4 class="text-grey">Lorem ipsum.</h4>
+                            <h5 class="text-pink">Lorem ipsum dolor sit amet.</h5>
+                            <p class="text-grey">
+                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur at                                     consequatur, culpa dolorem earum excepturi facilis magni natus nemo obcaecati                                       perferendis quasi quo recusandae, rem sit ullam, vitae voluptates!</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-3 border-start">
+                    <h4 class="text-pink">Walking Exercise</h4>
+                    <a href="#" class="text-pink d-block p-2 border-bottom">Lorem ipsum dolor sit amet.</a>
+                    <a href="#" class="text-pink d-block p-2 border-bottom">Lorem ipsum dolor sit amet.</a>
+                    <a href="#" class="text-pink d-block p-2 border-bottom">Lorem ipsum dolor sit amet.</a>
+                    <a href="#" class="text-pink d-block p-2 border-bottom">Lorem ipsum dolor sit amet.</a>
+                    <h4 class="text-pink mt-5">Contact Us</h4>
+                    <pp class="text-grey">
+                        Gwangju Industrial Tools<br>
+                        Circulating Center,<br>
+                        Maewol-dong, Seo-gu,<br>
+                        Gwangju, Korea<br>
+                        062-000-1111
+                    </pp>
+                </div>
+            </div>
+        </main>
+        <footer class="row bg-grey">
+            <p class="text-white pt-3">Copyright&copy; 2019 한국정보통신교육원 All rights reserved.</p>
+        </footer>
+    </div>
+</body>
+</html>(No newline at end of file)
Add a comment
List