roakfwk30 / 2021_단기집중교육_JSP_Bootstrap star
안효원 안효원 2021-08-09
Merge branch 'master' of http://git.cuenet.net/roakfwk30/2021_%EB%8B%A8%EA%B8%B0%EC%A7%91%EC%A4%91%EA%B5%90%EC%9C%A1_JSP_Bootstrap
@67ab3b2b0c1a139619e952d23f52de3461f9903d
 
67ab3b2
20210809/1.html (added)
+++ 20210809/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>Document</title>
+    <!-- 합쳐지고 최소화된 최신 CSS -->
+    <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>
+        .box {
+            background-color: antiquewhite; border: 1px solid black; height: 50px;
+        }
+        div{background-color: antiquewhite; border: 1px solid black; height: 50px;}
+    </style>
+</head>
+<body>
+    <div class="row">
+        <div class="col-xs-6 box text-center">박스 1</div>
+        <div class="col-xs-6 box text-right">박스 2</div>
+    </div>
+    <div class="row">
+        <div class="col-xs-4 box">박스 3</div>
+        <div class="col-xs-4 box">박스 4</div>
+        <div class="col-xs-4 box">박스 5</div>
+    </div>
+    <div class="row">
+        <div class="col-xs-1 box">박스 6</div>
+        <div class="col-xs-1 box">박스 7</div>
+        <div class="col-xs-1 box">박스 8</div>
+        <div class="col-xs-1 box">박스 9</div>
+        <div class="col-xs-1 box">박스10</div>
+        <div class="col-xs-1 box">박스11</div>
+        <div class="col-xs-1 box">박스12</div>
+        <div class="col-xs-1 box">박스13</div>
+        <div class="col-xs-1 box">박스14</div>
+        <div class="col-xs-1 box">박스15</div>
+        <div class="col-xs-1 box">박스16</div>
+        <div class="col-xs-1 box">박스17</div>
+    </div>
+    <div class="row">
+        <div class="col-xs-3 box">박스</div>
+        <div class="col-xs-6 box">박스</div>
+        <div class="col-xs-3 box">박스</div>
+    </div>
+    <div class="row">
+        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+    </div>
+    <div class="row">
+        <div class="col-xs-6 col-md-4">col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">col-xs-6 .col-md-4</div>
+    </div>
+    <div class="row">
+        <div class="col-xs-6">.col-xs-6</div>
+        <div class="col-xs-6">.col-xs-6</div>
+    </div>
+    <table class="table table-striped table-bordered table-hover">
+        <tr>
+            <th>번호</th>
+            <th>학년</th>
+            <th>반</th>
+            <th>이름</th>
+        </tr>
+        <tr>
+            <td class="danger">1</td>
+            <td>2</td>
+            <td>3</td>
+            <td>최희성</td>
+        </tr>
+        <tr>
+            <td>1</td>
+            <td>2</td>
+            <td>3</td>
+            <td>최희성</td>
+        </tr>
+        <tr>
+            <td>1</td>
+            <td>2</td>
+            <td>3</td>
+            <td>최희성</td>
+        </tr>
+        <tr>
+            <td>1</td>
+            <td>2</td>
+            <td>3</td>
+            <td>최희성</td>
+        </tr>
+    </table>
+    <form>
+        <div class="form-group">
+          <label for="exampleInputEmail1">이메일 주소</label>
+          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="이메일을 입력하세요">
+        </div>
+        <div class="form-group">
+          <label for="exampleInputPassword1">암호</label>
+          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="암호">
+        </div>
+        <div class="form-group">
+          <label for="exampleInputFile">파일 업로드</label>
+          <input type="file" id="exampleInputFile">
+          <p class="help-block">여기에 블록레벨 도움말 예제</p>
+        </div>
+        <div class="checkbox">
+          <label>
+            <input type="checkbox"> 입력을 기억합니다
+          </label>
+        </div>
+        <button type="submit" class="btn btn-default">제출</button>
+      </form>
+</body>
+</html>(No newline at end of file)
 
67ab3b2
20210809/2.html (added)
+++ 20210809/2.html
@@ -0,0 +1,50 @@
+<!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>Document</title>
+    <!-- 합쳐지고 최소화된 최신 CSS -->
+    <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>
+        
+    </style>
+</head>
+<body>
+    <div class="container bg-warning">
+        <form>
+            <div class="form-group">
+            <label for="exampleInputEmail1">이메일 주소</label>
+            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="이메일을 입력하세요">
+            </div>
+            <div class="form-group">
+            <label for="exampleInputPassword1">암호</label>
+            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="암호">
+            </div>
+            <div class="form-group">
+            <label for="exampleInputFile">파일 업로드</label>
+            <input type="file" id="exampleInputFile">
+            <p class="help-block">여기에 블록레벨 도움말 예제</p>
+            </div>
+            <div class="checkbox">
+            <label>
+                <input type="checkbox"> 입력을 기억합니다
+            </label>
+            </div>
+            <button type="submit" class="btn btn-default">제출</button><br>
+            <a href="#" class="btn btn-defalut" role="button">Link</a>
+            <button class="btn btn-primary" type="submit">Button</button>
+            <input class="btn btn-danger" type="button" value="Input">
+            <input class="btn btn-success" type="submit" value="Submit">
+            <input class="btn btn-warning" type="submit" value="Submit">
+        </form>
+    </div>
+</body>
+</html>(No newline at end of file)
 
67ab3b2
20210809/3.html (added)
+++ 20210809/3.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: 200px; 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;}
+    </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-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>
+        </div>
+        <div class="row">
+            <div class="col-xs-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>
+                </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>
+                </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>
+                <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>
+            </div>
+        </div>
+    </div>    
+</body>
+</html>(No newline at end of file)
Add a comment
List