본문 바로가기
Code

3.26

유명_h 2021. 3. 26. 17:45 
<!DOCTYPE html>
<html lang="en">
<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>이거야</title>
    <link rel="stylesheet" href="./pt.css">
</head>
<body>
    <div id="wrap">
        
        <div id="header">
            <h1 id="logo">
                <a href="#"><img src="./images/logo.png"></a>
            </h1>
            <div class="gnb" onmouseover="mouseOver();" onmouseout="mouseOut()">
                <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>
                </ul>
            </div>
        </div>
            <div class="snb_area" >
                <div class="area">
                    <div class="area_ul" onmouseover="mouseOver();" onmouseout="mouseOut()">
                        <h2><img src="./images/snb_img.png"></h2>
                        <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>
                        </ul>
                        <ul>
                            <li><a href="#">과정안내</a></li>
                        </ul>
                        <ul>
                            <li><a href="#">취업자인터뷰</a></li>
                            <li><a href="#">취업현황</a></li>
                            <li><a href="#">포트폴리오</a></li>
                        </ul>
                        <ul>
                            <li><a href="#">공지사항</a></li>
                            <li><a href="#">수강후기</a></li>
                            <li><a href="#">KI이야기</a></li>
                            <li><a href="#">KI기자단</a></li>
                            <li><a href="#">교수칼럼</a></li>
                        </ul>
                        <ul>
                            <li><a href="#">상담게시판</a></li>
                            <li><a href="#">지원하기</a></li>
                            <li><a href="#">자주묻는질문</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        
        
        <div id ="visual">
            <div class="visualUl">
                <a class="anim" href="#"><img src="./images/visual.png"></a>
                <a class="anim" href="#"><img src="./images/visual2.png"></a>
                <a class="anim" href="#"><img src="./images/visual3.png"></a>
                <a class="anim" href="#"><img src="./images/visual4.png"></a>
                <a class="anim" href="#"><img src="./images/visual5.png"></a>
            </div>
        </div>
        <div id="visual_menu">
            <div id="menu_wrap">
                <ul>
                    <li class="hide" onclick="btnEvent(0);">AR/VR특화과정</li>
                    <li class="hide" onclick="btnEvent(1);">너도 될 수 있어!</li>
                    <li class="hide" onclick="btnEvent(2);">KDT혁신교육기관</li>
                    <li class="hide" onclick="btnEvent(3);">취업률 1위</li>
                    <li class="hide" onclick="btnEvent(4);">3년우수훈련기관</li>
                </ul>
            </div>
        </div>



        <section>
            <div id="container">
                <div class="content">
                    <div class="s_box">
                        <ul>
                            <li class="con_notice1 con_notice">
                                <h2>
                                    <span>Game Architecture</span>
                                    게임 기획
                                </h2>
                                <p>게임기획자를 위한 Class</p>
                                <a href="#">바로가기</a>
                            </li>
                            <li class="con_notice2 con_notice">
                                <h2>
                                    <span>Game Programming</span>
                                    게임 프로그래밍
                                </h2>
                                <p>게임프로그래밍을 위한 Class</p>
                                <a href="#">바로가기</a>
                            </li>
                            <li class="con_notice3 con_notice">
                                <h2>
                                    <span>Game Artwords</span>
                                    게임 원화
                                </h2>
                                <p>게임 원화를 위한 정석 Class</p>
                                <a href="#">바로가기</a>
                            </li>
                            <li class="con_notice4 con_notice">
                                <h2>
                                    <span>Programer Coaching</span>
                                    프로게이머 코칭
                                </h2>
                                <p>프로게이머 데뷔 Class</p>
                                <a href="#">바로가기</a>
                            </li>
                            <li class="con_notice5 con_notice">
                                <h2>
                                    <span>AR/VR</span>
                                    AR/VR
                                </h2>
                                <p>증강현실/가상현실 Class</p>
                                <a href="#">바로가기</a>
                            </li>
                            <li class="con_notice6 con_notice">
                                <h2>
                                    <span>Block Chain</span>
                                    블록체인
                                </h2>
                                <p>블록체인 Class</p>
                                <a href="#">바로가기</a>
                            </li>
                            <li class="con_notice7 con_notice">
                                <h2>
                                    공지사항
                                </h2>
                                <dl id="notice">
                                    <dt>
                                        <a href="#">3월 블록체인반 모집 임박</a>
                                        <dd>03-03</dd>
                                    </dt>

                                    <dt>
                                        <a href="#">4월 VR/AR반 모집 안내</a>
                                        <dd>03-03</dd>
                                    </dt>

                                    <dt>
                                        <a href="#">4월 게임 프로그래밍반 모집</a>
                                        <dd>03-03</dd>
                                    </dt>

                                    <dt>
                                        <a href="#">2월 기획반 모집 마감 안내!</a>
                                        <dd>03-02</dd>
                                    </dt>
                                </dl>
                            </li>
                            <li class="con_notice8 con_notice">
                                <h2>
                                    상담/문의
                                </h2>
                                <ul class="icons">
                                    <li><img src="./images/tell.png"></li>
                                    <li><img src="./images/kakao.png"></li>
                                    <li class="plus"><img src="./images/plus.png"></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    
                    <!--오른쪽-->

                    <div id="community">
                        <ul>
                            <li class="interview">
                                <h2>취업자 인터뷰</h2>
                                <ul class="int_ul">
                                    <li class="int_content">
                                        <img src="./images/interview.png">
                                        <p class="real_int">
                                            <a href="#">대충 나도 해냈으니 당신들도 할 수 있다는 내용</a>
                                        </p>
                                        <p class="real_int2">
                                            취업했ㄷㅏ  ~~
                                        </p>
                                    </li>
                                    <li class="int_content">
                                        <img src="./images/interview2.jpg">
                                        <p class="real_int">
                                            <a href="#">대충 나도 해냈으니 당신들도 할 수 있다는 내용</a>
                                        </p>
                                        <p class="real_int2">
                                            취업했ㄷㅏ  ~~
                                        </p>
                                    </li>
                                    <li class="int_content">
                                        <img src="./images/interview3.png">
                                        <p class="real_int">
                                            <a href="#">대충 나도 해냈으니 당신들도 할 수 있다는 내용</a>
                                        </p>
                                        <p class="real_int2">
                                            취업했ㄷㅏ  ~~
                                        </p>
                                    </li>
                                    <li class="int_content">
                                        <img src="./images/interview4.png">
                                        <p class="real_int">
                                            <a href="#">대충 나도 해냈으니 당신들도 할 수 있다는 내용</a>
                                        </p>
                                        <p class="real_int2">
                                            취업했ㄷㅏ  ~~
                                        </p>
                                    </li>
                                </ul>
                            </li>

                            <li class="review">
                                <h2>수강후기</h2>
                                <ul>
                                    <li><a href="#">슬기로운 경일생활</a>
                                        <p>[기획_정송기] 2021-03-13</p>
                                    </li>
                                    <li><a href="#">비전공</a>
                                        <p>[플밍_000] 2021-03-13</p>
                                    </li>
                                    <li><a href="#">간단 후기</a>
                                        <p>[기획_정송기] 2021-03-13</p>
                                    </li>
                                    <li><a href="#">if~~~~</a>
                                        <p>[기획_정송기] 2021-03-13</p>
                                    </li>
                                    <li><a href="#">게임프로그래머가 꿈이라면</a>
                                        <p>[기획_정송기] 2021-03-13</p>
                                    </li>
                                    <li><a href="#">3D 디자이너가 플밍교육 수료한 후기</a>
                                        <p>[기획_정송기] 2021-03-13</p>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        
                        <!--포트폴리오-->

                        <div id="portfolio">
                            <h2>포트폴리오</h2>
                            <div id="video">
                                <iframe src="https://www.youtube.com/embed/TzLsPrkRKt4"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

            
        <footer id="footer">
            <div class="footer_container">
                <div class="gnb_footer">
                    <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>
                    </ul>
                </div>
                <h1 class="logo_footer">
                    <img src="./images/logo2.png">
                </h1>
                <div class ="address">
                    <ul>
                        <li>서울특별시 강동구 천호대로 995 금복빌딩 3,4층 경일게임아카데미(지하철 5,8호선 1번출구 10m이내)</li>
                        <li>TEL : 02-479-4050 FAX : 02-479-4056 대표자 : 박병준 개인정보관리책임자 : 서혁준</li>
                        <li>사업자번호 : 212-81-89247 통신판매허가번호 : 제2020-서울강동-1360호</li>
                        <li class="copyright">Copyright © 2016. Kyungil Technical College. All rights reserved.</li>
                    </ul>
                </div>
            </div>
        </footer>

    </div>

    <script type="text/javascript">
    var num = 0;
    var changing;
    visual(0);

    function visual(n){
        visualLi = document.querySelectorAll('.visualUl > a');
        menuWrap = document.querySelectorAll('#menu_wrap > ul > li');

        if(num >= visualLi.length){
            num=0;
        }

        if(n != undefined){
            num = n;
        }

        for(i=0; i<visualLi.length; i++){
            if(i == num){
                visualLi.item(i).setAttribute('class','anim show');
                menuWrap.item(i).setAttribute('class','show hide');
            } else{
                visualLi.item(i).setAttribute('class','anim');
                menuWrap.item(i).setAttribute('class','hide');
            }
        }

        num++
    }

    function btnEvent(n){
        clearInterval(changing);
        visual(n);
        changing = setInterval(visual,5000);
        console.log(n);
    }


    var subArea = document.querySelector('.snb_area');
        function mouseOver(){
            subArea.setAttribute('class','snb_area navi');
        }
        function mouseOut(){
            subArea.setAttribute('class','snb_area');
        }

    changing = setInterval(visual,5000);

    </script>

</body>
</html>
 
*{/*whole element*/
    margin:0; padding:0;
}

html{
    overflow-y: auto;
    overflow-x: auto;
}

ul,li{
    list-style:none;
}

a{
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

#wrap{
    width: 100%;
}

#header{
    width: 1200px;
    height: 110px;
    margin: 0 auto;
}

#logo{
    margin: 20px;
    width: 200px;
    display: inline-block;
    float: left;
}

.gnb{
    width: 950px;
    height: 110px;
    float: right;
}

.gnb > ul{
    float: right;
}

.gnb > ul > li{
    width: 180px;
    padding: 40px 0 ;
    text-align: center;
    float: left;
}

.gnb > ul > li > a{
    font-size: 19px;
    font-weight: bold;
    color: #004285;
}

/*snb_area*/
.snb_area{
    width: 100%;
    position: absolute;
    z-index: 1;
    clear: both;
    height: 0px;
    overflow: hidden;
    background-color: rgba(24, 17, 17, 0.5);
}

.snb_area.navi{
    animation: slider 0.5s;
    animation-fill-mode: forwards;
}

@keyframes slider{
    from{
        height: 0px;
    }
    to{
        height: 220px;
    }
}

.area_ul > h2{
    float: left;
    width: 200px;
}

.area{
    width: 1200px;
    height: 200px;
    margin: 0 auto;
}

.area_ul > ul{
    float: left;
    width: 180px;
}

.area_ul > h2{
    display: inline-block;
    margin: 50px 100px 0 0;
}

.area_ul > ul > li{
    padding: 10px 0;
    text-align: center;
}

.area_ul > ul > li >a{
    color: #fff;
}

.area_ul{
    width: 1200px;
    float: right;
}

#visual{
    width: 1920px;
    height: 500px;
    margin: 0 auto;
    position: relative;
}

.visualUl > a >img{
    display: block;
    line-height: 0px;
    position:absolute;
}

.visualUl > a{
    display: none;
}

.visualUl > a.anim{
    animation: fadein 3s;
}

@keyframes fadein{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.visualUl> a.show{
    display: block;
}

#visual_menu{
    width: 100%;
    height: 60px;
    background-color: rgba(0, 1, 1, 0.5);
    text-align: center;
    position: absolute;
    top: 550px;
}

#menu_wrap {
    width: 1200px;
    margin: 0 auto;
    height: 60px;
}
#menu_wrap > ul{
    width: 1920px;
    margin: 0 auto;
}

#menu_wrap > ul > li{
    float: left;
    width: 180px;
    padding: 20px;
    cursor: pointer;
    color: #fff;
}


#menu_wrap > ul >li.show:hover{
    background:none;
}

#menu_wrap > ul >li.show{
    height: 60px;
    width: 220px;
    box-sizing: border-box;
    background-color: rgba(24, 17, 17, 0.5);
}

#menu_wrap > ul > li.hide{
    background-color: none;
}



#container{
    width:100%;
    margin: 30px 0 0 0;
}


/*작업공간 가운데에 정렬 시키기*/
.content{
    width: 1200px;
    height: 920px;
    margin: 0 auto;
}

.s_box{
    float: left;
    width: 600px;
    height: 920px;
}

.con_notice{
    width: 50%;
    height: 230px;
    float: left;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #ececec;
}

.con_notice > h2{
    font-size: 22px;
    color: #2d2d2d;
}

.con_notice > h2 > span{
    display: block;
    font-size: 14px;
    color: #4689e1;
}

.con_notice > p{
    display: block;
    width: 50%;
    height: 50px;
    margin-top: 30px;
    line-height: 20px;
}

.con_notice > a{
    margin-top: 25px;
    display: block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 15px;
    background: #81b4f2;
    font-size: 15px;
    color: #fff;
}

.con_notice1{
    background: url("./images/main_con_ic_01.png") no-repeat bottom right;
    background-position: 180px 110px;
}
.con_notice2{
    background: url("./images/main_con_ic_02.png") no-repeat bottom right;
    background-position: 180px 110px;
}
.con_notice3{
    background: url("./images/main_con_ic_04.png") no-repeat bottom right;
    background-position: 180px 110px;
}
.con_notice4{
    background: url("./images/main_con_ic_05.png") no-repeat bottom right;
    background-position: 180px 110px;
}
.con_notice5{
    background: url("./images/main_con_ic_06.jpg") no-repeat bottom right;
    background-position: 180px 110px;
}
.con_notice6{
    background: url("./images/main_con_ic_07.jpg") no-repeat bottom right;
    background-position: 180px 110px;
}


/*공지사항*/

#notice{
    margin-top: 30px;
}


/*dt에 display 바꿔줘서 block요소인 dt안에 요소들이 한줄로 만날 수 있게 해준다*/
#notice > dt{
    display: inline-block;
}

.con_notice > dl > dt > a{
    font-size: 12px;
    color: #666;
    line-height: 30px;
}

.con_notice > dl > dt > a::before{
    content:"-";
    margin-right: 5px;
}

.con_notice > dl > dd{
    float: right;
    text-align: right;
    line-height: 30px;
    width: 77px;
    font-size: 12px;
    color: #666;
}


/*상담/문의*/
.icons > li{
    margin: 20px 0 0 0;
}

.icons .plus{
    margin: 5px 0 0 60px;
}


#community{
    float: right;
    width: 600px;
    height: 920px;
}


/*interview 하고 review를 묶은 ul에게 높이를 준다*/
#community > ul{
    width: 100%;
    height: 460px;
}

#community > ul > li > h2{
    font-size: 22px;
    color:#2d2d2d;
}

/*interview*/

.interview{
    float: left;
    width: 300px;
    height: 460px;
    padding: 20px;
    border: 1px solid #ececec;
    box-sizing: border-box;
}

.int_ul{
    
}

.int_ul > li {
    width: 100%;
    height: 350px;
    margin: 20px auto 0 auto;
}

.int_content{

}

.int_content > img{
    display: inline-block;
    width: 100%;
    height: 160px;
    box-sizing: border-box;
    border: 1px solid #ececec;
}

.int_content > p{
    text-align: center;
    font-size: 13px;
    color: #666;
}

.int_content > p > a{
    color: #666;
}

.real_int{
    width: 100%;
    height: 60px;
    margin-top: 20px;
}

.int_ul{

}

/*review*/

.review{
    float: right;
    width: 300px;
    height: 460px;
    padding: 20px;
    border: 1px solid #ececec;
    box-sizing: border-box;
    background: #fafafa;
}

.review > ul{
    width: 100%;
    height: 350px;
    margin: 20px auto 0 auto;
}

.review > ul > li{
    width: 100%;
    height: 15%;
    padding: 5px 10px;
    border: 1px solid #ececec;
    margin: 7px 0 0 0;
    box-sizing: border-box;
    background: #fff;
}

.review > ul > li > a{
    display: block;
    font-size: 12px;
    color: #666;
}

.review > ul > li >p{
    display: inline-block;
    text-align: right;
    width: 100%;
    height: 20px;
    font-size: 12px;
    color: #666;
}

/*portfolio*/

#portfolio{
    width: 100%;
    height: 460px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #ececec;
}

#portfolio > h2{
    font-size: 22px;
    color: #2d2d2d;
}

#video{
    margin: 20px 0 0 0;
    width: 100%;
    height: 370px;
}

iframe{
    width: 100%;
    height: 100%;
}

#footer{
    width: 100%;
    height: 137px;
    padding: 20px 0;
    margin: 50px 0 0 0;
    background: #323232;
}

.footer_container{
   width: 1200px;
   height: 100%;
   margin: 0 auto;
}

/*
.gnb_footer{
   float: left;
}
이것도 필요없음*/

.gnb_footer > ul{
   float: left;
   width: 1200px;
   height: 20px;
   margin: 0 auto;
}

.gnb_footer > ul > li{
   float: left;
   padding: 0 20px;
}

.gnb_footer > ul > li > a{
   font-size: 12px;
   color: #aeaeae;
}

.logo_footer{
   display: inline-block;
   float: left;
   margin: 20px 0 0 10px;
}

.address{
   display: inline-block;
   width: 600px;
   height: 80px;
   margin: 20px 0 0 50px;
}

.address > ul > li{
   font-size: 12px;
   color: #aeaeae;
   line-height: 20px;
}

.copyright{
   margin: 3px 0 0 0;
}
저작자표시

'Code' 카테고리의 다른 글

0330.기초C  (0) 2021.03.30
03.29 - dividing  (0) 2021.03.29
CODE  (0) 2021.03.24
3.23 - Delete Btn(Code)  (0) 2021.03.23
3.22 - To do list(Code)  (0) 2021.03.22

'Code' Related Articles

티스토리툴바