Commit @d4ec3b39ec09a40b2bda48c0d092465ecec7794f - roakfwk30/2021_단기집중교육_JSP

안효원 2021-08-09

from home 6

@d4ec3b39ec09a40b2bda48c0d092465ecec7794f

67ab3b2

d4ec3b3

20210808/2.html

--- 20210808/2.html

+++ 20210808/2.html


-<!doctype html>
+<!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>
+    <title>2</title>
     <style>
-        * {padding: 0; margin: 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 {width: 1030px; background-color: #ffffff; margin: 0 auto;}
-        #top {background-color: #aeaca8;}
-        #top ul li {display: inline-block; vertical-align: middle; margin-right: 40px;}
-        #top ul li a {text-decoration: none; font-size: 20px; color: #ffffff;}
-        #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 {height: 50%; width: 100%;}
-        #leftBottom {height: 50%; width: 100%;}
-        #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: palevioletred;}
-        #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-left: 25px; margin-top: 15px;}
-        #rightTop {height: 50%;}
-        #rightBottom {height: 50%;}
-        #walking {margin-top: 20px; color: palevioletred; font-size: 20px;}
-        #rightTop ul li {margin-top: 20px; list-style: none; width: 220px; border-bottom: #aeaca8 1px solid;   padding-bottom: 10px;}
-        #rightTop ul li:hover {background-color: #aeaca8;}
-        #rightTop ul li a {text-decoration: none; color: palevioletred;}
-        #contact {font-size: 20px; color: palevioletred;}
-        #footer {background-color: #aeaca8; color: #ffffff;}
+        *{margin: 0;padding: 0;box-sizing: border-box;}
+        body{background:no-repeat url(http://web.miri.kr/example/images/bg.jpg) fixed;background-size: cover;color: black;}
+        .container{width: 1030px; background-color: white;}
+        .top{background-color: #aeaca8;}
+        .nav {margin-top: 20px;}
+        .nav:hover {color: white;}
+        #leftTop1 img{width: 300px;height: 200px;margin-top: 20px;margin-left: 5px;}
+        #leftTop1 p{margin-left: 5px;color: black;}
+        #lorem1{color: black;}
+        #lorem1 h3{color: hotpink;}
+        #lorem2{color: black;}
+        #lorem2 h3{color: hotpink;}
+        #image2 {margin-top: 10px;}
+        #image2 img{width: 300px;height: 200px;}
+        #image2 p{color: black;}
+        #aside1{color: hotpink; margin-left: 20px;}
+        #aside1 a span{color: hotpink;border-bottom: 0.5px solid darkgray;padding: 10px}
+        #aside1 a{text-decoration: none;}
+        #aside1 a:hover{color: white;background-color: red;}
+        #aside2{margin-top: 30px;margin-left: 20px;}
+        #footer{background-color: #aeaca8;color: white;padding: 10px;}
+        #aside{border-left: 0.5px solid darkgray;padding-bottom: 81.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="#">Coummnity</a></li>
-                <li><a href="#">Contact</a></li>
-            </ul>
+    <div class="container">
+        <div class="row top">
+            <div id="logo" 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 id="second">
-            <!-- 손 그림 -->
+        <div class="row">
+            <img src="http://web.miri.kr/example/images/main1.jpg">
         </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 class="row">
+            <div class="col-xs-8">
+                <div class="row">
+                    <div id="leftTop1" class="col-xs-6">
+                        <img src="http://web.miri.kr/example/images/image1.jpg">
+                        <p>[그림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. Illum similique, error quia unde perspiciatis molestiae labore totam necessitatibus fugiat explicabo perferendis vel eveniet, tempora eaque dignissimos id praesentium iusto dolorem!</span>
-                        </p>
+                    <div id="lorem1" class="col-xs-6">
+                        <h2>Lorem, ipsum.</h2>
+                        <h3>Lorem ipsum dolor sit.</h3>
+                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique cum, animi odit obcaecati aliquid repellat consequuntur magnam. Libero blanditiis odio corrupti deserunt unde cupiditate quidem! Dolorum voluptatibus voluptatem ipsam iste.</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. Illum similique, error quia unde perspiciatis molestiae labore totam necessitatibus fugiat explicabo perferendis vel eveniet, tempora eaque dignissimos id praesentium iusto dolorem!</span>
-                        </p>
+                <div class="row">
+                    <div id="lorem2" class="col-xs-6">
+                        <h2>Lorem, ipsum.</h2>
+                        <h3>Lorem ipsum dolor sit.</h3>
+                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique cum, animi odit obcaecati aliquid repellat consequuntur magnam. Libero blanditiis odio corrupti deserunt unde cupiditate quidem! Dolorum voluptatibus voluptatem ipsam iste.</p>
                     </div>
-                    <div id="leftBottomRight">
-                        <img id="img2" src="http://web.miri.kr/example/images/image2.jpg">
-                        <p class="caption">그림 [2]</p>
+                    <div id="image2" class="col-xs-6">
+                        <img src="http://web.miri.kr/example/images/image2.jpg">
+                        <p>[그림2]</p>
                     </div>
                 </div>
             </div>
-            <div id="right">
-                <div id="rightTop">
-                    <ul>
-                        <p id="walking">Walking Exersise</p>
-                        <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 id="aside" class="col-xs-4">
+                <div id="aside1" class="row">
+                    <h2>Walking Exercise</h2><br>
+                    <a href="#"><span>Lorem ipsum dolor sit amet.</span></a><br><br>
+                    <a href="#"><span>Lorem ipsum dolor sit amet.</span></a><br><br>
+                    <a href="#"><span>Lorem ipsum dolor sit amet.</span></a><br><br>
+                    <a href="#"><span>Lorem ipsum dolor sit amet.</span></a>
                 </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>
-                    </p>
+                <div id="aside2" class="row">
+                    <h2>Contact Us</h2><br>
+                    <span>Lorem ipsum dolor sit.</span><br>
+                    <span>Lorem ipsum dolor sit.</span><br>
+                    <span>Lorem ipsum dolor sit.</span><br>
+                    <span>Lorem ipsum dolor sit.</span>
                 </div>
             </div>
         </div>
-        <div id="footer">
-            Copyright&copy;2019 한국정보통신교육원 All rights reserved.
+        <div id="footer" class="row">
+            Copyrights&copy; 한국정보통신교육원 All rights reserved.
         </div>
+
     </div>
 </body>
-</html>
+</html>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

67ab3b2

d4ec3b3

20210809/3.html

--- 20210809/3.html

+++ 20210809/3.html


         .copy {color: #ffffff;}
         .lorem1 {font-size: 25px;}
         .lorem2 {font-size: 20px; color: palevioletred;}
-        .img {width: 80%; height: 200px; margin-top: 10px;}
+        .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;}
-        .loremArea {margin-top: 15px; position: relative; right: 20px;}
         .left {border-right: #aeaca8 1px solid;}
-        .right {margin-left: 30px; width: 200px;}
-        .im2 {position: relative; left: 30px;}
-        .caption {position: relative; left: 30px;}
+        .lolo {position: relative; left: 20px;}
     </style>
 </head>
 <body>

         <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-xs-2 nav">Company</div>
-                <div class="col-xs-2 nav">Product</div>
-                <div class="col-xs-2 nav">Service</div>
-                <div class="col-xs-2 nav">Community</div>
-                <div class="col-xs-2 nav">Contact</div>
+                <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-xs-12">
+            <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-xs-8">
-                <div class="row left">
-                    <div class="col-xs-7">
-                        <img class="img" src="http://web.miri.kr/example/images/image1.jpg">
-                        <p>그림 [1]</p>
-                    </div>
-                    <div class="col-xs-5 loremArea">
-                        <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 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="row left">
-                    <div class="col-xs-5">
-                        <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 class="col-xs-7">
-                        <img class="img im2" src="http://web.miri.kr/example/images/image2.jpg">
-                        <p class="caption">그림 [2]</p>
+                <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>
-
-            <div class="col-xs-4 right">
-                <div class="row rightTop">
-                    <p class="WalkingArea">
-                        <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>
-                    </p>
+                <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 class="row">
-                    <p>
-                        <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>
-                    </p>
-                </div>
-            </div>
         </div>
+
+
+
+
+
+
+
+
+
+
+
+
         <div class="row topFooter">
             <div class="col-xs-12">
                 <span class="copy">Copyright&copy;2019 한국정보통신교육원 All rights reserved.</span>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,110 +1,123 @@
1		-<!doctype html>
	1	+<!DOCTYPE html>
2	2	<html lang="ko">
3	3	<head>
	4	+ <meta charset="UTF-8">
	5	+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	6	+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
	7	+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	8	+ <title>2</title>
4	9	<style>
5		- * {padding: 0; margin: 0; color: #666666; box-sizing: border-box;}
6		- body {background: no-repeat url("http://web.miri.kr/example/images/bg.jpg") fixed; background-size: cover;}
7		- #container {width: 1030px; background-color: #ffffff; margin: 0 auto;}
8		- #top {background-color: #aeaca8;}
9		- #top ul li {display: inline-block; vertical-align: middle; margin-right: 40px;}
10		- #top ul li a {text-decoration: none; font-size: 20px; color: #ffffff;}
11		- #top ul li a:hover {color: black;}
12		- #second {background: url("http://web.miri.kr/example/images/main1.jpg"); width: 1030px; height: 500px;}
13		- #article {width: 1030px; height: 500px;}
14		- #left {width: 68%; height: 100%; float: left; border-right: #aeaca8 1px solid;}
15		- #right {width: 30%; height: 100%; float: left; margin-left: 20px;}
16		- #leftTop {height: 50%; width: 100%;}
17		- #leftBottom {height: 50%; width: 100%;}
18		- #leftTopLeft {width: 50%; height: 100%; float: left;}
19		- #leftTopRight {width: 50%; height: 100%; float: left;}
20		- #img1 {width: 300px; height: 200px; margin-left: 25px; margin-top: 20px;}
21		- .caption {margin-left: 25px;}
22		- #text1 {margin-top: 20px;}
23		- .lorem1 {font-size: 25px;}
24		- .lorem2 {font-size: 20px; color: palevioletred;}
25		- #leftBottomLeft {width: 50%; height: 100%; float: left;}
26		- #leftBottomRight {width: 50%; height: 100%; float: left;}
27		- #img2 {width: 300px; height: 200px; margin-left: 25px; margin-top: 20px;}
28		- #text2 {margin-left: 25px; margin-top: 15px;}
29		- #rightTop {height: 50%;}
30		- #rightBottom {height: 50%;}
31		- #walking {margin-top: 20px; color: palevioletred; font-size: 20px;}
32		- #rightTop ul li {margin-top: 20px; list-style: none; width: 220px; border-bottom: #aeaca8 1px solid; padding-bottom: 10px;}
33		- #rightTop ul li:hover {background-color: #aeaca8;}
34		- #rightTop ul li a {text-decoration: none; color: palevioletred;}
35		- #contact {font-size: 20px; color: palevioletred;}
36		- #footer {background-color: #aeaca8; color: #ffffff;}
	10	+ *{margin: 0;padding: 0;box-sizing: border-box;}
	11	+ body{background:no-repeat url(http://web.miri.kr/example/images/bg.jpg) fixed;background-size: cover;color: black;}
	12	+ .container{width: 1030px; background-color: white;}
	13	+ .top{background-color: #aeaca8;}
	14	+ .nav {margin-top: 20px;}
	15	+ .nav:hover {color: white;}
	16	+ #leftTop1 img{width: 300px;height: 200px;margin-top: 20px;margin-left: 5px;}
	17	+ #leftTop1 p{margin-left: 5px;color: black;}
	18	+ #lorem1{color: black;}
	19	+ #lorem1 h3{color: hotpink;}
	20	+ #lorem2{color: black;}
	21	+ #lorem2 h3{color: hotpink;}
	22	+ #image2 {margin-top: 10px;}
	23	+ #image2 img{width: 300px;height: 200px;}
	24	+ #image2 p{color: black;}
	25	+ #aside1{color: hotpink; margin-left: 20px;}
	26	+ #aside1 a span{color: hotpink;border-bottom: 0.5px solid darkgray;padding: 10px}
	27	+ #aside1 a{text-decoration: none;}
	28	+ #aside1 a:hover{color: white;background-color: red;}
	29	+ #aside2{margin-top: 30px;margin-left: 20px;}
	30	+ #footer{background-color: #aeaca8;color: white;padding: 10px;}
	31	+ #aside{border-left: 0.5px solid darkgray;padding-bottom: 81.5px;}
	32	+
37	33	</style>
	34	+
38	35	</head>
39	36	<body>
40		- <div id="container">
41		- <div id="top">
42		- <ul>
43		- <li><a href="#"><img src="http://www.aiit.or.kr/images/logo.png"></a></li>
44		- <li><a href="#">Company</a></li>
45		- <li><a href="#">Product</a></li>
46		- <li><a href="#">Service</a></li>
47		- <li><a href="#">Coummnity</a></li>
48		- <li><a href="#">Contact</a></li>
49		- </ul>
	37	+ <div class="container">
	38	+ <div class="row top">
	39	+ <div id="logo" class="col-xs-3">
	40	+ <img src="http://www.aiit.or.kr/images/logo.png">
	41	+ </div>
	42	+ <div class="col-xs-9">
	43	+ <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8 nav">Company</div>
	44	+ <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8 nav">Product</div>
	45	+ <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8 nav">Service</div>
	46	+ <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8 nav">Community</div>
	47	+ <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8 nav">Contact</div>
	48	+ </div>
50	49	</div>
51		- <div id="second">
52		- <!-- 손 그림 -->
	50	+ <div class="row">
	51	+ <img src="http://web.miri.kr/example/images/main1.jpg">
53	52	</div>
54		- <div id="article">
55		- <div id="left">
56		- <div id="leftTop">
57		- <div id="leftTopLeft">
58		- <img id="img1" src="http://web.miri.kr/example/images/image1.jpg">
59		- <p class="caption">그림 [1]</p>
	53	+ <div class="row">
	54	+ <div class="col-xs-8">
	55	+ <div class="row">
	56	+ <div id="leftTop1" class="col-xs-6">
	57	+ <img src="http://web.miri.kr/example/images/image1.jpg">
	58	+ <p>[그림1]</p>
60	59	</div>
61		- <div id="leftTopRight">
62		- <p id="text1">
63		- <span class="lorem1">Lorem, ipsum.</span><br>
64		- <span class="lorem2">Lorem ipsum dolor sit amet.</span><br><br>
65		- <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum similique, error quia unde perspiciatis molestiae labore totam necessitatibus fugiat explicabo perferendis vel eveniet, tempora eaque dignissimos id praesentium iusto dolorem!</span>
66		- </p>
	60	+ <div id="lorem1" class="col-xs-6">
	61	+ <h2>Lorem, ipsum.</h2>
	62	+ <h3>Lorem ipsum dolor sit.</h3>
	63	+ <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique cum, animi odit obcaecati aliquid repellat consequuntur magnam. Libero blanditiis odio corrupti deserunt unde cupiditate quidem! Dolorum voluptatibus voluptatem ipsam iste.</p>
67	64	</div>
68	65	</div>
69		- <div id="leftBottom">
70		- <div id="leftBottomLeft">
71		- <p id="text2">
72		- <span class="lorem1">Lorem, ipsum.</span><br>
73		- <span class="lorem2">Lorem ipsum dolor sit amet.</span><br><br>
74		- <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum similique, error quia unde perspiciatis molestiae labore totam necessitatibus fugiat explicabo perferendis vel eveniet, tempora eaque dignissimos id praesentium iusto dolorem!</span>
75		- </p>
	66	+ <div class="row">
	67	+ <div id="lorem2" class="col-xs-6">
	68	+ <h2>Lorem, ipsum.</h2>
	69	+ <h3>Lorem ipsum dolor sit.</h3>
	70	+ <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique cum, animi odit obcaecati aliquid repellat consequuntur magnam. Libero blanditiis odio corrupti deserunt unde cupiditate quidem! Dolorum voluptatibus voluptatem ipsam iste.</p>
76	71	</div>
77		- <div id="leftBottomRight">
78		- <img id="img2" src="http://web.miri.kr/example/images/image2.jpg">
79		- <p class="caption">그림 [2]</p>
	72	+ <div id="image2" class="col-xs-6">
	73	+ <img src="http://web.miri.kr/example/images/image2.jpg">
	74	+ <p>[그림2]</p>
80	75	</div>
81	76	</div>
82	77	</div>
83		- <div id="right">
84		- <div id="rightTop">
85		- <ul>
86		- <p id="walking">Walking Exersise</p>
87		- <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
88		- <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
89		- <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
90		- <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
91		- </ul>
	78	+ <div id="aside" class="col-xs-4">
	79	+ <div id="aside1" class="row">
	80	+ <h2>Walking Exercise</h2><br>
	81	+ <a href="#"><span>Lorem ipsum dolor sit amet.</span></a><br><br>
	82	+ <a href="#"><span>Lorem ipsum dolor sit amet.</span></a><br><br>
	83	+ <a href="#"><span>Lorem ipsum dolor sit amet.</span></a><br><br>
	84	+ <a href="#"><span>Lorem ipsum dolor sit amet.</span></a>
92	85	</div>
93		- <div id="rightBottom">
94		- <p>
95		- <span id="contact">Contact Us</span><br><br>
96		- <span>Gwangju Industrial Tools</span><br>
97		- <span>Circulating Center,</span><br>
98		- <span>Maewol-dong, Seo-gu,</span><br>
99		- <span>Gwangju, Korea</span><br>
100		- <span>062-000-1111</span>
101		- </p>
	86	+ <div id="aside2" class="row">
	87	+ <h2>Contact Us</h2><br>
	88	+ <span>Lorem ipsum dolor sit.</span><br>
	89	+ <span>Lorem ipsum dolor sit.</span><br>
	90	+ <span>Lorem ipsum dolor sit.</span><br>
	91	+ <span>Lorem ipsum dolor sit.</span>
102	92	</div>
103	93	</div>
104	94	</div>
105		- <div id="footer">
106		- Copyright©2019 한국정보통신교육원 All rights reserved.
	95	+ <div id="footer" class="row">
	96	+ Copyrights© 한국정보통신교육원 All rights reserved.
107	97	</div>
	98	+
108	99	</div>
109	100	</body>
110		-</html> (No newline at end of file)
	101	+</html>
	102	+
	103	+
	104	+
	105	+
	106	+
	107	+
	108	+
	109	+
	110	+
	111	+
	112	+
	113	+
	114	+
	115	+
	116	+
	117	+
	118	+
	119	+
	120	+
	121	+
	122	+
	123	+

...	...	@@ -15,17 +15,14 @@
15	15	.copy {color: #ffffff;}
16	16	.lorem1 {font-size: 25px;}
17	17	.lorem2 {font-size: 20px; color: palevioletred;}
18		- .img {width: 80%; height: 200px; margin-top: 10px;}
	18	+ .img {width: 80%; height: 50%; margin-top: 10px;}
19	19	.rightTitle {font-size: 20px; color: palevioletred;}
20	20	.rightTop {margin-bottom: 15px; margin-top: 15px;}
21	21	.lorem5 {color: palevioletred; border-bottom: #aeaca8 1px solid; padding-bottom: 10px;}
22	22	.lorem5:hover {background-color: #aeaca8;}
23	23	.mainImg {position: relative; right: 15px;}
24		- .loremArea {margin-top: 15px; position: relative; right: 20px;}
25	24	.left {border-right: #aeaca8 1px solid;}
26		- .right {margin-left: 30px; width: 200px;}
27		- .im2 {position: relative; left: 30px;}
28		- .caption {position: relative; left: 30px;}
	25	+ .lolo {position: relative; left: 20px;}
29	26	</style>
30	27	</head>
31	28	<body>
...	...	@@ -33,66 +30,69 @@
33	30	<div class="row topFooter">
34	31	<div class="col-xs-3"><img src="http://www.aiit.or.kr/images/logo.png"></div>
35	32	<div class="col-xs-9">
36		- <div class="col-xs-2 nav">Company</div>
37		- <div class="col-xs-2 nav">Product</div>
38		- <div class="col-xs-2 nav">Service</div>
39		- <div class="col-xs-2 nav">Community</div>
40		- <div class="col-xs-2 nav">Contact</div>
	33	+ <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8 nav">Company</div>
	34	+ <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8 nav">Product</div>
	35	+ <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8 nav">Service</div>
	36	+ <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8 nav">Community</div>
	37	+ <div class="col-lg-2 col-md-4 col-sm-6 col-xs-8 nav">Contact</div>
41	38	</div>
42	39	</div>
43	40	<div class="row">
44		- <div class="col-xs-12">
	41	+ <div class="col-lg-12">
45	42	<img class="mainImg" src="http://web.miri.kr/example/images/main1.jpg">
46	43	</div>
47	44	</div>
48	45	<div class="row">
49		- <div class="col-xs-8">
50		- <div class="row left">
51		- <div class="col-xs-7">
52		- <img class="img" src="http://web.miri.kr/example/images/image1.jpg">
53		- <p>그림 [1]</p>
54		- </div>
55		- <div class="col-xs-5 loremArea">
56		- <span class="lorem1">Lorem, ipsum.</span><br>
57		- <span class="lorem2">Lorem ipsum dolor sit amet.</span><br><br>
58		- <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>
	46	+ <div class="col-lg-4 col-md-8 col-xs-12 article">
	47	+ <div class="row left">
	48	+ <img class="img" src="http://web.miri.kr/example/images/image1.jpg">
	49	+ <p>그림 [1]</p>
	50	+ <span class="lorem1">Lorem, ipsum.</span><br>
	51	+ <span class="lorem2">Lorem ipsum dolor sit amet.</span><br><br>
	52	+ <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>
59	53	</div>
60	54	</div>
61		- <div class="row left">
62		- <div class="col-xs-5">
63		- <span class="lorem1">Lorem, ipsum.</span><br>
64		- <span class="lorem2">Lorem ipsum dolor sit amet.</span><br><br>
65		- <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>
66		- </div>
67		- <div class="col-xs-7">
68		- <img class="img im2" src="http://web.miri.kr/example/images/image2.jpg">
69		- <p class="caption">그림 [2]</p>
	55	+ <div class="col-lg-4 col-md-8 col-xs-12 article">
	56	+ <div class="row left">
	57	+ <span class="lorem1">Lorem, ipsum.</span><br>
	58	+ <span class="lorem2">Lorem ipsum dolor sit amet.</span><br><br>
	59	+ <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>
	60	+ <img class="img im2" src="http://web.miri.kr/example/images/image2.jpg">
	61	+ <p class="caption">그림 [2]</p>
70	62	</div>
71	63	</div>
72		- </div>
73		-
74		- <div class="col-xs-4 right">
75		- <div class="row rightTop">
76		- <p class="WalkingArea">
77		- <span class="rightTitle">Walking Exersise</span><br><br>
78		- <span class="lorem5">Lorem ipsum dolor sit amet.</span><br><br>
79		- <span class="lorem5">Lorem ipsum dolor sit amet.</span><br><br>
80		- <span class="lorem5">Lorem ipsum dolor sit amet.</span><br><br>
81		- <span class="lorem5">Lorem ipsum dolor sit amet.</span><br><br>
82		- </p>
	64	+ <div class="col-lg-4 col-md-8 col-xs-12 article">
	65	+ <div class="lolo">
	66	+ <div class="row rightTop">
	67	+ <span class="rightTitle">Walking Exersise</span><br><br>
	68	+ <span class="lorem5">Lorem ipsum dolor sit amet.</span><br><br>
	69	+ <span class="lorem5">Lorem ipsum dolor sit amet.</span><br><br>
	70	+ <span class="lorem5">Lorem ipsum dolor sit amet.</span><br><br>
	71	+ <span class="lorem5">Lorem ipsum dolor sit amet.</span><br><br>
	72	+ </div>
	73	+ <div class="row">
	74	+ <span class="rightTitle">Contact Us</span><br><br>
	75	+ <span>Gwangju Industrial Tools</span><br>
	76	+ <span>Circulating Center,</span><br>
	77	+ <span>Maewol-dong, Seo-gu,</span><br>
	78	+ <span>Gwangju, Korea</span><br>
	79	+ <span>062-000-1111</span>
	80	+ </div>
	81	+ </div>
83	82	</div>
84		- <div class="row">
85		- <p>
86		- <span class="rightTitle">Contact Us</span><br><br>
87		- <span>Gwangju Industrial Tools</span><br>
88		- <span>Circulating Center,</span><br>
89		- <span>Maewol-dong, Seo-gu,</span><br>
90		- <span>Gwangju, Korea</span><br>
91		- <span>062-000-1111</span>
92		- </p>
93		- </div>
94		- </div>
95	83	</div>
	84	+
	85	+
	86	+
	87	+
	88	+
	89	+
	90	+
	91	+
	92	+
	93	+
	94	+
	95	+
96	96	<div class="row topFooter">
97	97	<div class="col-xs-12">
98	98	<span class="copy">Copyright©2019 한국정보통신교육원 All rights reserved.</span>

Delete comment