안효원
2022-01-20
board add
@da7ea4ccb651ef719cd506c2c6e1a3cf3a1ba672
--- vscode/float/index.html
+++ vscode/float/index.html
... | ... | @@ -76,6 +76,77 @@ |
| 76 | 76 |
</section> |
| 77 | 77 |
<!-- SECTION1 --> |
| 78 | 78 |
|
| 79 |
+ <!-- SECTION2 --> |
|
| 80 |
+ <section id="section2"> |
|
| 81 |
+ |
|
| 82 |
+ <div class="wrap"> |
|
| 83 |
+ <div class="left w32p"> |
|
| 84 |
+ <a href="#"> |
|
| 85 |
+ <img src="images/banner.png" alt="banner"> |
|
| 86 |
+ </a> |
|
| 87 |
+ </div> |
|
| 88 |
+ |
|
| 89 |
+ <div class="right w66p ml2p"> |
|
| 90 |
+ <div id="board_notice" class="board_box"> |
|
| 91 |
+ <div class="board_title"> |
|
| 92 |
+ 공지사항 |
|
| 93 |
+ <a href="#">more</a> |
|
| 94 |
+ </div> |
|
| 95 |
+ <div class="board_content"> |
|
| 96 |
+ <ul> |
|
| 97 |
+ <li> |
|
| 98 |
+ <a href="#">2월 교육일정 안내</a> |
|
| 99 |
+ <span>2022-01-20</span> |
|
| 100 |
+ </li> |
|
| 101 |
+ <li> |
|
| 102 |
+ <a href="#">UI/UX 웹퍼블리셔 양성과정...</a> |
|
| 103 |
+ <span>2022-01-20</span> |
|
| 104 |
+ </li> |
|
| 105 |
+ <li> |
|
| 106 |
+ <a href="#">아두이노와 자바를 활용한...</a> |
|
| 107 |
+ <span>2022-01-20</span> |
|
| 108 |
+ </li> |
|
| 109 |
+ <li> |
|
| 110 |
+ <a href="#">일반고 특화 직업능력개발...</a> |
|
| 111 |
+ <span>2022-01-20</span> |
|
| 112 |
+ </li> |
|
| 113 |
+ </ul> |
|
| 114 |
+ </div> |
|
| 115 |
+ </div> |
|
| 116 |
+ <!-- ********************************************************** --> |
|
| 117 |
+ <div id="board_pds" class="board_box"> |
|
| 118 |
+ <div class="board_title"> |
|
| 119 |
+ 자료실 |
|
| 120 |
+ <a href="#">more</a> |
|
| 121 |
+ </div> |
|
| 122 |
+ <div class="board_content"> |
|
| 123 |
+ <ul> |
|
| 124 |
+ <li> |
|
| 125 |
+ <a href="#">원서접수 양식...</a> |
|
| 126 |
+ <span>2022-01-20</span> |
|
| 127 |
+ </li> |
|
| 128 |
+ <li> |
|
| 129 |
+ <a href="#">세무/회계/ERP 교육과정...</a> |
|
| 130 |
+ <span>2022-01-20</span> |
|
| 131 |
+ </li> |
|
| 132 |
+ <li> |
|
| 133 |
+ <a href="#">전기/전자/통신 교육과...</a> |
|
| 134 |
+ <span>2022-01-20</span> |
|
| 135 |
+ </li> |
|
| 136 |
+ <li> |
|
| 137 |
+ <a href="#">디자인/영상 교육과정...</a> |
|
| 138 |
+ <span>2022-01-20</span> |
|
| 139 |
+ </li> |
|
| 140 |
+ </ul> |
|
| 141 |
+ </div> |
|
| 142 |
+ </div> |
|
| 143 |
+ |
|
| 144 |
+ </div> |
|
| 145 |
+ </div> |
|
| 146 |
+ |
|
| 147 |
+ </section> |
|
| 148 |
+ <!-- SECTION2 --> |
|
| 149 |
+ |
|
| 79 | 150 |
</main> |
| 80 | 151 |
<!-- MAIN --> |
| 81 | 152 |
|
--- vscode/float/main.css
+++ vscode/float/main.css
... | ... | @@ -37,6 +37,40 @@ |
| 37 | 37 |
margin: 0 auto; |
| 38 | 38 |
} |
| 39 | 39 |
|
| 40 |
+.bold {font-weight: 600;}
|
|
| 41 |
+.left {float: left;}
|
|
| 42 |
+.right {float: right;}
|
|
| 43 |
+.red {color: red;}
|
|
| 44 |
+.green {color: green;}
|
|
| 45 |
+.blue {color: blue;}
|
|
| 46 |
+.white {color: white;}
|
|
| 47 |
+.black {color: black;}
|
|
| 48 |
+.grey {color: #aaa;}
|
|
| 49 |
+.w50 {width: 50px;}
|
|
| 50 |
+.w100 {width: 100px;}
|
|
| 51 |
+.w200 {width: 200px;}
|
|
| 52 |
+.w32p {width: 32%;}
|
|
| 53 |
+.w66p {width: 66%;}
|
|
| 54 |
+.h50 {height: 50px;}
|
|
| 55 |
+.h100 {height: 100px;}
|
|
| 56 |
+.h200 {height: 200px;}
|
|
| 57 |
+.bg_red {background-color: red;}
|
|
| 58 |
+.bg_black {background-color: black;}
|
|
| 59 |
+.bg_green {background-color: green;}
|
|
| 60 |
+.bg_blue {background-color: blue;}
|
|
| 61 |
+.big {font-size: 2em;}
|
|
| 62 |
+.small {font-size: 0.5em;}
|
|
| 63 |
+.m10 {margin: 10px;}
|
|
| 64 |
+.m50 {margin: 50px;}
|
|
| 65 |
+.m100 {margin: 100px;}
|
|
| 66 |
+.m10 {margin-left: 10px;}
|
|
| 67 |
+.ml2p {margin-left: 2%;}
|
|
| 68 |
+.p10 {padding: 10px;}
|
|
| 69 |
+.p50 {padding: 50px;}
|
|
| 70 |
+.p100 {padding: 100px;}
|
|
| 71 |
+.mt100 {margin-top: 100px;}
|
|
| 72 |
+ |
|
| 73 |
+ |
|
| 40 | 74 |
/* top */ |
| 41 | 75 |
.top {
|
| 42 | 76 |
background-color: #1b4fa0; |
... | ... | @@ -183,8 +217,41 @@ |
| 183 | 217 |
background-color: #ff944c; |
| 184 | 218 |
} |
| 185 | 219 |
|
| 220 |
+.board_box {
|
|
| 221 |
+ width: 46%; |
|
| 222 |
+ margin-right: 4%; |
|
| 223 |
+ display: inline-block; |
|
| 224 |
+ font-size: 0.8rem; |
|
| 225 |
+} |
|
| 226 |
+.board_title {
|
|
| 227 |
+ font-size: 1.5rem; |
|
| 228 |
+ border-bottom: 2px solid #005BAA; |
|
| 229 |
+ margin-bottom: 10px; |
|
| 230 |
+ padding-bottom: 5px; |
|
| 231 |
+} |
|
| 186 | 232 |
|
| 233 |
+.board_title a{
|
|
| 234 |
+ float: right; |
|
| 235 |
+ color: #005BAA; |
|
| 236 |
+ font-size: 13px; |
|
| 237 |
+ position: relative; |
|
| 238 |
+ top: 15px; |
|
| 239 |
+} |
|
| 187 | 240 |
|
| 241 |
+.board_content ul li {
|
|
| 242 |
+ margin-bottom: 6px; |
|
| 243 |
+} |
|
| 188 | 244 |
|
| 245 |
+.board_content ul li a {
|
|
| 246 |
+ font-weight: 600; |
|
| 247 |
+} |
|
| 248 |
+ |
|
| 249 |
+.board_content ul li span {
|
|
| 250 |
+ float: right; |
|
| 251 |
+} |
|
| 252 |
+ |
|
| 253 |
+#board_pds {
|
|
| 254 |
+ margin-right: 0; |
|
| 255 |
+} |
|
| 189 | 256 |
|
| 190 | 257 |
|
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?