roakfwk30 / 2022단기집중_Front star
안효원 안효원 2022-01-21
flex complete
@801d828929a7553e373f841efd221c6dfec43251
c2cdd3d
801d828
vscode/flex/1.html
--- vscode/flex/1.html
+++ vscode/flex/1.html
@@ -14,9 +14,15 @@
 
             height: 500px;
 
             align-items: center;
 
         }
 
-        article {background-color: cadetblue;
 
+        article {
 
+            background-color: cadetblue;
 
             width: 50px;
 
             height: 50px;
 
+            flex: 1;
 
+            border: 1px solid black;
 
+        }
 
+        article:nth-child(2) {
 
+            flex: 2;
 
         }
 
     </style>
 
 </head>
 
801d828
vscode/flex/index.html (added)
+++ vscode/flex/index.html
@@ -0,0 +1,129 @@
+<!doctype html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>융합소프트웨어학과</title>
+    <link rel="stylesheet" href="main.css">
+</head>
+<body>
+    <!-- 헤더 -->
+    <header>
+        <div class="top">
+            <div class="wrap">
+                <a href="#" class="bg">전체메뉴</a>
+                <ul class="gnb">
+                    <li><a href="#">로그인</a></li>
+                    <li><a href="#">회원가입</a></li>
+                </ul>
+            </div>
+        </div>
+        <nav>
+            <div class="wrap">
+                <div class="logo"><a href=""><img src="http://img.cuenet.kr/exam/SWP/2017A/logo.png" alt="로고"></a></div>
+                <ul class="lnb">
+                    <li><a href="#">학교소개</a></li>
+                    <li><a href="#">입학안내</a></li>
+                    <li><a href="#">교육과정</a></li>
+                    <li><a href="#">취업정보</a></li>
+                    <li><a href="#">커뮤니티</a></li>
+                </ul>
+            </div>
+        </nav>
+    </header>
+    <!-- //헤더 -->
+    <!-- 메인 -->
+    <main>
+        <!-- 섹션1 -->
+        <section id="section1">
+            <div class="wrap">
+                <ul>
+                    <li id="box1" class="box"><a href="#"><h3>원서<br>접수</h3><p>자세히보기</p></a></li>
+                    <li id="box2" class="box"><a href="#"><h3>입학<br>상담</h3><p>자세히보기</p></a></li>
+                    <li id="box3" class="box"><a href="#"><h3>입시자료<br>신청</h3><p>자세히보기</p></a></li>
+                    <li id="box4" class="box"><a href="#"><h3>수강<br>후기</h3><p>자세히보기</p></a></li>
+                </ul>
+            </div>
+        </section>
+        <!-- //섹션1 -->
+        <!-- 섹션2 -->
+        <section id="section2">
+            <div class="wrap">
+                <div class="left">
+                    <a href="#"><img src="http://img.cuenet.kr/exam/SWP/2017A/box2_1.jpg" alt="2017 시험일정안내"></a>
+                </div>
+                <div class="right">
+                    <div id="board_notice" class="board_box">
+                        <div class="board_title">공지사항<a href="#">more</a></div>
+                        <div class="board_content">
+                            <ul>
+                                <li><a href="#">4월교육일정 안내..<span>2022-01-05</span></a></li>
+                                <li><a href="#">UI/UX 웹퍼블리셔 양성과정..<span>2022-02-05</span></a></li>
+                                <li><a href="#">아두이노와 자바를 활용한..<span>2022-03-05</span></a></li>
+                                <li><a href="#">일반고 특화 직업능력개발..<span>2022-04-05</span></a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div id="board_pds" class="board_box">
+                        <div class="board_title">자료실<a href="#">more</a></div>
+                        <div class="board_content">
+                            <ul>
+                                <li><a href="#">원서접수 양식..<span>2022-01-05</span></a></li>
+                                <li><a href="#">세무/회계/ERP 교육과정..<span>2022-02-05</span></a></li>
+                                <li><a href="#">전기/전자/통신 교육과..<span>2022-03-05</span></a></li>
+                                <li><a href="#">디자인/영상 교육과정..<span>2022-04-05</span></a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- //섹션2 -->
+        <!-- 섹션3 -->
+        <section id="section3">
+            <div class="wrap">
+                <div class="area_banner">
+                    <div class="box_banner"><a href="#"><img src="http://img.cuenet.kr/exam/SWP/2017A/box3_1_1.jpg"
+                                                             alt="고객센터 070-1234-5678"></a></div>
+                    <div class="box_banner"><a href="#"><img src="http://img.cuenet.kr/exam/SWP/2017A/box3_1_2.jpg"
+                                                             alt="한국정보통신교육원 소개"></a></div>
+                    <div class="box_banner"><a href="#"><img src="http://img.cuenet.kr/exam/SWP/2017A/box3_1_3.jpg"
+                                                             alt="계좌안내 123-56789012-3"></a></div>
+                </div>
+                <div class="area_sitemap">
+                    <h3>커뮤니티</h3>
+                    <ul>
+                        <li><a href="#">공지사항</a></li>
+                        <li><a href="#">수상경력</a></li>
+                        <li><a href="#">동영상</a></li>
+                        <li><a href="#">포토갤러리</a></li>
+                        <li><a href="#">수강후기</a></li>
+                        <li><a href="#">자료실</a></li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+        <!-- //섹션3 -->
+    </main>
+    <!-- //메인 -->
+    <footer>
+        <div class="wrap">
+            <img src="http://img.cuenet.kr/exam/SWP/2017A/logo_copy.png" alt="로고">
+            <div class="right">
+                <ul>
+                    <li><a href="#">이용약관</a></li>
+                    <li><a href="#">이메일 무단수집거부</a></li>
+                    <li><a href="#">개인정보보호정책</a></li>
+                </ul>
+                <p>
+                    (우)98765 서울특별시 중구 세종대로 000 TEL : 070‐1234‐5678 FAX : 070‐2345‐6789<br/>
+                    사업자번호 : 123‐45‐67890 대표자 : 홍길동 E‐Mail : abc1234@wassane.com<br/>
+                    Copyright (c) 2017 한국정보통신교육원 All right reserved.
+                </p>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>(No newline at end of file)
 
801d828
vscode/flex/main.css (added)
+++ vscode/flex/main.css
@@ -0,0 +1,355 @@
+@charset "utf-8";
+
+/* ALL */
+
+:root {
+    --img-box1: url('http://img.cuenet.kr/exam/SWP/2017A/box1_1_bg.png');
+    --img-box2: url('http://img.cuenet.kr/exam/SWP/2017A/box1_2_bg.png');
+    --img-box3: url('http://img.cuenet.kr/exam/SWP/2017A/box1_3_bg.png');
+    --img-box4: url('http://img.cuenet.kr/exam/SWP/2017A/box1_4_bg.png');
+}
+
+* {
+    font-size: 14px;
+    margin: 0;    
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    font-family: '굴림', '돋움', Gullim, Dotum, sans-serif;
+    background-color: #fff;
+}
+
+ul, li {
+    list-style: none;
+}
+
+a, a:hover, a:link, a:active {
+    text-decoration: none;
+    color: #222;
+}
+
+b, strong {
+    font-weight: 600;
+}
+
+.wrap {
+    width: 100%;
+    margin: 0 auto;
+    max-width: 800px;
+}
+
+/* TOP */
+header {
+    display: flex;
+    flex-direction: column;
+}
+
+header .wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+header .top{
+    background-color: #1b4fa0;
+}
+
+header .bg {
+    background-color: #143b78;
+    color: white;
+    padding: 10px 20px;
+    font-size: 0.8rem;
+}
+
+header .gnb {
+    display: flex;
+}
+
+header .gnb li a {
+    display: block;
+    padding: 10px 15px;
+    font-size: 0.8rem;
+    color: white;
+}
+
+header .gnb li a:hover {
+    color: #ccc;
+}
+
+nav {
+    background-color: #eee;
+}
+
+nav .logo {
+    padding: 16px 0;
+}
+
+nav .lnb {
+    width: 70%;
+    display: flex;
+    justify-content: space-around;
+}
+
+nav .lnb li a {
+    display: block;
+    font-size: 1.1rem;
+    font-weight: 600;
+    text-align: center;
+}
+
+nav .lnb li a:hover{
+    color: blue;
+}
+
+/* MAIN */
+main{
+    display: flex;
+    flex-direction: column;
+}
+
+section {
+    margin-top: 25px;
+}
+
+section .wrap {
+    display: flex;
+    align-items: center;
+}
+
+/* SECTION1 */
+#section1 ul {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+#section1 ul li {
+    width: 23%;
+    background-color: #333;
+    min-height: 225px;
+    text-align: center;
+}
+
+#section1 ul li a {
+    color: #fff;
+    display: block;
+    padding: 50px 0;
+}
+
+#section1 ul li h3 {
+    font-size: 2.2rem;
+    font-weight: 600;
+    flex-grow: 1;
+}
+
+#section1 ul li p {
+    font-size: 1.2rem;
+    margin: 15px auto;
+    border: 1px solid white;
+    padding: 5px 15px;
+    width: 70%;
+}
+
+#section1 .box {
+    background-repeat: no-repeat;
+    background-position: right bottom;
+    background-size: contain;
+}
+
+#section1 #box1 {
+    background-color: #00a882;
+    background-image: var(--img-box1);
+}
+
+#section1 #box1:hover {
+    background-color: #00c29a;
+}
+
+#section1 #box2 {
+    background-color: #2263c8;
+    background-image: var(--img-box2);
+}
+
+#section1 #box2:hover {
+    background-color: #2875db;
+}
+
+#section1 #box3 {
+    background-color: #2083cb;
+    background-image: var(--img-box3);
+}
+
+#section1 #box3:hover {
+    background-color: #2592df;
+}
+
+#section1 #box4 {
+    background-color: #ff893e;
+    background-image: var(--img-box4);
+}
+
+#section1 #box4:hover {
+    background-color: #ff944c;
+}
+
+/* SECTION2 */
+#section2 .wrap {
+    align-items: flex-start;
+}
+
+#section2 .right {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 100%;
+    margin-left: 15px;
+}
+
+#section2 .board_title {
+    padding: 7px 0;
+    font-size: 1.3rem;
+    font-weight: 600;
+    border-bottom: 2px solid #005baa;
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+#section2 .board_title a{
+    color: #2083cb;
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+#section2 .board_content {
+    padding-top: 10px;
+}
+
+#section2 .board_content li {
+    line-height: 1.6rem;
+    padding-left: 10px;
+    background: url('http://img.cuenet.kr/exam/SWP/2017A/bullet1.png') no-repeat left center;
+}
+
+#section2 .board_content li a {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    font-size: 0.9rem;
+}
+
+#section2 .board_content li span {
+    font-size: 0.9rem;
+}
+
+/* SECTION3 */
+#section3 {
+    background-color: #eee;
+    padding: 20px 0;
+}
+
+#section3 .wrap {
+    display: flex;
+    flex-direction: column;
+}
+
+#section3 .area_banner {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+}
+
+#section3 .area_sitemap {
+    display: flex;
+    width: 100%;
+    margin-top: 10px;
+    background-color: white;
+}
+
+#section3 .area_sitemap h3 {
+    background-color: #2263c8;
+    color: white;
+    font-weight: 600;
+    padding: 20px 0;
+    text-align: center;
+}
+
+#section3 .area_sitemap ul {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-grow: 6;
+}
+
+#section3 .area_sitemap ul li {
+    padding: 0 15px;
+    background: url('http://img.cuenet.kr/exam/SWP/2017A/box3_4.png') no-repeat left center;
+}
+
+#section3 .area_sitemap ul li:first-child {
+    background: none;
+    padding: 0;
+}
+
+#section3 .area_sitemap ul li a {
+    font-weight: 600;
+
+}
+
+/* FOOTER */
+footer{
+    border-top: 1px solid #ddd;
+    padding: 20px 0;
+}
+
+footer .wrap {
+    display: flex;
+    align-items: center;
+}
+
+footer .right {
+    display: flex;
+    flex-direction: column;
+}
+
+footer .right ul {
+    display: flex;
+    justify-content: flex-start;
+    padding-left: 30px;
+}
+
+footer .right ul li {
+    padding: 0 10px;
+    border-right: 1px solid #888;
+}
+
+footer .right ul li:last-child {
+    border: none;
+}
+
+footer .right p {
+    padding: 10px 40px;
+    font-size: 0.9rem;
+    color: #666;
+    line-height: 1.6rem;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Add a comment
List