+++ 20210809/1.html
... | ... | @@ -0,0 +1,119 @@ |
1 | +<!DOCTYPE html> | |
2 | +<html lang="ko"> | |
3 | +<head> | |
4 | + <meta charset="UTF-8"> | |
5 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
6 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
7 | + <title>Document</title> | |
8 | + <!-- 합쳐지고 최소화된 최신 CSS --> | |
9 | + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> | |
10 | + | |
11 | + <!-- 부가적인 테마 --> | |
12 | + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> | |
13 | + | |
14 | + <!-- 합쳐지고 최소화된 최신 자바스크립트 --> | |
15 | + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> | |
16 | + <style> | |
17 | + .box { | |
18 | + background-color: antiquewhite; border: 1px solid black; height: 50px; | |
19 | + } | |
20 | + div{background-color: antiquewhite; border: 1px solid black; height: 50px;} | |
21 | + </style> | |
22 | +</head> | |
23 | +<body> | |
24 | + <div class="row"> | |
25 | + <div class="col-xs-6 box text-center">박스 1</div> | |
26 | + <div class="col-xs-6 box text-right">박스 2</div> | |
27 | + </div> | |
28 | + <div class="row"> | |
29 | + <div class="col-xs-4 box">박스 3</div> | |
30 | + <div class="col-xs-4 box">박스 4</div> | |
31 | + <div class="col-xs-4 box">박스 5</div> | |
32 | + </div> | |
33 | + <div class="row"> | |
34 | + <div class="col-xs-1 box">박스 6</div> | |
35 | + <div class="col-xs-1 box">박스 7</div> | |
36 | + <div class="col-xs-1 box">박스 8</div> | |
37 | + <div class="col-xs-1 box">박스 9</div> | |
38 | + <div class="col-xs-1 box">박스10</div> | |
39 | + <div class="col-xs-1 box">박스11</div> | |
40 | + <div class="col-xs-1 box">박스12</div> | |
41 | + <div class="col-xs-1 box">박스13</div> | |
42 | + <div class="col-xs-1 box">박스14</div> | |
43 | + <div class="col-xs-1 box">박스15</div> | |
44 | + <div class="col-xs-1 box">박스16</div> | |
45 | + <div class="col-xs-1 box">박스17</div> | |
46 | + </div> | |
47 | + <div class="row"> | |
48 | + <div class="col-xs-3 box">박스</div> | |
49 | + <div class="col-xs-6 box">박스</div> | |
50 | + <div class="col-xs-3 box">박스</div> | |
51 | + </div> | |
52 | + <div class="row"> | |
53 | + <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> | |
54 | + <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> | |
55 | + </div> | |
56 | + <div class="row"> | |
57 | + <div class="col-xs-6 col-md-4">col-xs-6 .col-md-4</div> | |
58 | + <div class="col-xs-6 col-md-4">col-xs-6 .col-md-4</div> | |
59 | + <div class="col-xs-6 col-md-4">col-xs-6 .col-md-4</div> | |
60 | + </div> | |
61 | + <div class="row"> | |
62 | + <div class="col-xs-6">.col-xs-6</div> | |
63 | + <div class="col-xs-6">.col-xs-6</div> | |
64 | + </div> | |
65 | + <table class="table table-striped table-bordered table-hover"> | |
66 | + <tr> | |
67 | + <th>번호</th> | |
68 | + <th>학년</th> | |
69 | + <th>반</th> | |
70 | + <th>이름</th> | |
71 | + </tr> | |
72 | + <tr> | |
73 | + <td class="danger">1</td> | |
74 | + <td>2</td> | |
75 | + <td>3</td> | |
76 | + <td>최희성</td> | |
77 | + </tr> | |
78 | + <tr> | |
79 | + <td>1</td> | |
80 | + <td>2</td> | |
81 | + <td>3</td> | |
82 | + <td>최희성</td> | |
83 | + </tr> | |
84 | + <tr> | |
85 | + <td>1</td> | |
86 | + <td>2</td> | |
87 | + <td>3</td> | |
88 | + <td>최희성</td> | |
89 | + </tr> | |
90 | + <tr> | |
91 | + <td>1</td> | |
92 | + <td>2</td> | |
93 | + <td>3</td> | |
94 | + <td>최희성</td> | |
95 | + </tr> | |
96 | + </table> | |
97 | + <form> | |
98 | + <div class="form-group"> | |
99 | + <label for="exampleInputEmail1">이메일 주소</label> | |
100 | + <input type="email" class="form-control" id="exampleInputEmail1" placeholder="이메일을 입력하세요"> | |
101 | + </div> | |
102 | + <div class="form-group"> | |
103 | + <label for="exampleInputPassword1">암호</label> | |
104 | + <input type="password" class="form-control" id="exampleInputPassword1" placeholder="암호"> | |
105 | + </div> | |
106 | + <div class="form-group"> | |
107 | + <label for="exampleInputFile">파일 업로드</label> | |
108 | + <input type="file" id="exampleInputFile"> | |
109 | + <p class="help-block">여기에 블록레벨 도움말 예제</p> | |
110 | + </div> | |
111 | + <div class="checkbox"> | |
112 | + <label> | |
113 | + <input type="checkbox"> 입력을 기억합니다 | |
114 | + </label> | |
115 | + </div> | |
116 | + <button type="submit" class="btn btn-default">제출</button> | |
117 | + </form> | |
118 | +</body> | |
119 | +</html>(No newline at end of file) |
+++ 20210809/2.html
... | ... | @@ -0,0 +1,50 @@ |
1 | +<!DOCTYPE html> | |
2 | +<html lang="ko"> | |
3 | +<head> | |
4 | + <meta charset="UTF-8"> | |
5 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
6 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
7 | + <title>Document</title> | |
8 | + <!-- 합쳐지고 최소화된 최신 CSS --> | |
9 | + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> | |
10 | + | |
11 | + <!-- 부가적인 테마 --> | |
12 | + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> | |
13 | + | |
14 | + <!-- 합쳐지고 최소화된 최신 자바스크립트 --> | |
15 | + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> | |
16 | + <style> | |
17 | + | |
18 | + </style> | |
19 | +</head> | |
20 | +<body> | |
21 | + <div class="container bg-warning"> | |
22 | + <form> | |
23 | + <div class="form-group"> | |
24 | + <label for="exampleInputEmail1">이메일 주소</label> | |
25 | + <input type="email" class="form-control" id="exampleInputEmail1" placeholder="이메일을 입력하세요"> | |
26 | + </div> | |
27 | + <div class="form-group"> | |
28 | + <label for="exampleInputPassword1">암호</label> | |
29 | + <input type="password" class="form-control" id="exampleInputPassword1" placeholder="암호"> | |
30 | + </div> | |
31 | + <div class="form-group"> | |
32 | + <label for="exampleInputFile">파일 업로드</label> | |
33 | + <input type="file" id="exampleInputFile"> | |
34 | + <p class="help-block">여기에 블록레벨 도움말 예제</p> | |
35 | + </div> | |
36 | + <div class="checkbox"> | |
37 | + <label> | |
38 | + <input type="checkbox"> 입력을 기억합니다 | |
39 | + </label> | |
40 | + </div> | |
41 | + <button type="submit" class="btn btn-default">제출</button><br> | |
42 | + <a href="#" class="btn btn-defalut" role="button">Link</a> | |
43 | + <button class="btn btn-primary" type="submit">Button</button> | |
44 | + <input class="btn btn-danger" type="button" value="Input"> | |
45 | + <input class="btn btn-success" type="submit" value="Submit"> | |
46 | + <input class="btn btn-warning" type="submit" value="Submit"> | |
47 | + </form> | |
48 | + </div> | |
49 | +</body> | |
50 | +</html>(No newline at end of file) |
+++ 20210809/3.html
... | ... | @@ -0,0 +1,103 @@ |
1 | +<!DOCTYPE html> | |
2 | +<html lang="ko"> | |
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 | + <style> | |
9 | + * {color: #666666;} | |
10 | + body {background: no-repeat url("http://web.miri.kr/example/images/bg.jpg") fixed; background-size: cover;} | |
11 | + .container {background-color: #ffffff; width: 1030px;} | |
12 | + .topFooter {background-color: #aeaca8;} | |
13 | + .nav {font-size: 20px; display: flex; align-items: center; color: #ffffff; padding-top: 15px;} | |
14 | + .nav:hover {color: black;} | |
15 | + .copy {color: #ffffff;} | |
16 | + .lorem1 {font-size: 25px;} | |
17 | + .lorem2 {font-size: 20px; color: palevioletred;} | |
18 | + .img {width: 80%; height: 200px; margin-top: 10px;} | |
19 | + .rightTitle {font-size: 20px; color: palevioletred;} | |
20 | + .rightTop {margin-bottom: 15px; margin-top: 15px;} | |
21 | + .lorem5 {color: palevioletred; border-bottom: #aeaca8 1px solid; padding-bottom: 10px;} | |
22 | + .lorem5:hover {background-color: #aeaca8;} | |
23 | + .mainImg {position: relative; right: 15px;} | |
24 | + .loremArea {margin-top: 15px; position: relative; right: 20px;} | |
25 | + .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;} | |
29 | + </style> | |
30 | +</head> | |
31 | +<body> | |
32 | + <div class="container"> | |
33 | + <div class="row topFooter"> | |
34 | + <div class="col-xs-3"><img src="http://www.aiit.or.kr/images/logo.png"></div> | |
35 | + <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> | |
41 | + </div> | |
42 | + </div> | |
43 | + <div class="row"> | |
44 | + <div class="col-xs-12"> | |
45 | + <img class="mainImg" src="http://web.miri.kr/example/images/main1.jpg"> | |
46 | + </div> | |
47 | + </div> | |
48 | + <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> | |
59 | + </div> | |
60 | + </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> | |
70 | + </div> | |
71 | + </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> | |
83 | + </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 | + </div> | |
96 | + <div class="row topFooter"> | |
97 | + <div class="col-xs-12"> | |
98 | + <span class="copy">Copyright©2019 한국정보통신교육원 All rights reserved.</span> | |
99 | + </div> | |
100 | + </div> | |
101 | + </div> | |
102 | +</body> | |
103 | +</html>(No newline at end of file) |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?