[4일차] DO IT 웹사이트 따라 만들기/P227~308/FAQ 페이지 만들기,아코디언 기능, Contact Us 페이지 만들기, 구글 앱스 메일로 가상 서버 만들기

 

form 속성

 

action - 폼을 통해 전송한 정보를 처리하는 웹 페이지의 URL 을 나타냄

 

autocomplete - 폼 안에 있는 요소들의 기본값이 브라우저에 의해 자동으로 완성되게 하는지의 여부를 나타냄

속성 값은  on 또는 off 중 하나를 갖는다

 

method - get 이 기본값  보통 post 방식을 많이 사용함 

 

name - 폼의 이름 폼을 식별하기 위한 이름을 지정

 

target - action 에서 지정한 정보를 처리하는 페이지를 현재 창 또는 다른 위치에 열리도록 지정함 

기본값은 -self 이다.

 

 

 

/*Reset Css */

@charset "utf-8";

@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);

 

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, abbr, acronym, address, code, del, dfn, em, img, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr{margin:0;padding:0;font-size:100%;box-sizing: border-box;}

body{height:100%;min-height:100%;font-family:'Noto Sans Korean','Malgun Gothic','맑은고딕','돋움',dotum, sans-serif;font-size:16px;color:#737373;line-height:1.5;background:url(../images/content_bg4.png) repeat;} h1, h2, h3, h4, h5, h6 {font-weight:normal} ol, ul, li {list-style:none} table {width:100%; border-collapse:collapse;border-spacing:0} form, fieldset, iframe {display:block;border:0} img, button {border:0 none;vertical-align:top;} hr {height:0; display:none} i, em, address{font-style:normal} label, button{cursor:pointer} blockquote, q {quotes:none} caption, legend {overflow:hidden;visibility:hidden;position:absolute;width:0;height:0;padding:0;margin:0;font-size:0;text-indent:-100%;white-space:nowrap;z-index:-1} header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block;box-sizing: border-box;} input, textarea, select, button {font-family:'Noto Sans Korean','Malgun Gothic','맑은고딕','돋움',dotum, sans-serif;font-size:16px;color:#919090;line-height:1.5;letter-spacing:0;vertical-align:middle; border:none;} input, textarea {margin:0;padding:0; background:none; box-sizing:border-box;} textarea {resize:none} a {color:#919090;text-decoration:none} a:link, a:visited {text-decoration:none} a:hover {text-decoration:none} .blind{display: none;overflow: hidden;position: absolute;width: 0;height: 0;padding: 0;margin: 0; font-size: 0;line-height: 0; text-indent: -9999em;visibility:hidden;outline:none;z-index: -1;} html,body{overflow:hidden;height:100%;}

 

/* layout */

 

#wrap{ width:100%; height:100%; padding-right:180px; }

#wrap > h1 { font-size:0; }

header .logo_box{ position:absolute; right:35px; top:75px; cursor:pointer; }

header .logo_box img{ width:100px; }

#wrap header{ width:180px; height:100%; position:fixed; right:0; top:0; background:url(../images/menu_bg1.png) repeat-y;z-index:11; }

#wrap header nav{ width:100%; height:100%; }

#wrap header nav ul{ width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; }

#wrap header nav ul li{ margin:0 0 10px 30px; padding-left:15px; position:relative; }

#wrap header nav ul li a{ font-size:16px; color:#fff; font-weight:600; line-height:30px; }

 

#wrap header nav ul li a:after{ content:""; display:block; width:5px; height:5px; border-radius:50%;

background:#fff; position:absolute; left:0; top:13px; }

#wrap header nav ul li:hover a, #wrap header nav ul li.on a{ color:#ed3140; }

#wrap header nav ul li:hover:after, #wrap header nav ul li.on:after{ background:#ed3140; }

 

 

#container{ width:100%; height:100%; position:relative; max-width:1200px; margin:0 auto; }

#container .content{ width:25%; height:100%; position:absolute; transition:all .5s; }

#container .content.this .conbox{ max-width:1100px; margin:0 auto; }

 

footer{ width:180px; position:fixed; right:0; bottom:0; padding:0 20px 30px 20px; font-size:11px;

color:#7e7e7e; z-index:12; }

footer address{ padding:0 0 15px 0; }

footer > a { display:block; width:16px; height:16px; position:absolute; top:-31px; transition:.4s; }

footer > a.face{background:url(../images/social_b_facebook.png) no-repeat;right:18px;}

footer > a.face:hover{background:url(../images/social_b_facebook_hover.png) no-repeat;}

footer > a.twit{background:url(../images/social_b_twitter.png) no-repeat;right:48px;}

footer > a.twit:hover{background:url(../images/social_b_twitter_hover.png) no-repeat;}

footer > a.instar{background:url(../images/social_b_instar.png) no-repeat;right:80px;}

footer > a.instar:hover{background:url(../images/social_b_instar_hover.png) no-repeat;}

 

 

/* 페이지 이동 */

 

#container .content.this{ width:100%; left:0 !important; overflow:hidden; overflow-y:auto; }

#container .content.prev{width:100%;left:-100% !important;}

#container .content.next{width:100%;left:100% !important;}

#container .content.this:before,

#container .content.this:after,

#container .content.this .conbox:before,

#container .content.prev:before,

#container .content.prev:after,

#container .content.prev .conbox:before,

#container .content.next:before,

#container .content.next:after,

#container .content.next .conbox:before{opacity:0;transition:all .6s;transition-delay:.3s;}

 

#container .content.this .conbox:before{transform:translate3d(300px, 0,0);}

#container .content.this:after{transform:translate3d(-300px,0,0);}

#container #menu1{left:0%;background:url(../images/content_bg1.png) repeat;}

#container #menu2{left:25%;background:url(../images/content_bg2.png) repeat;}

#container #menu3{left:50%;background:url(../images/content_bg3.png) repeat;}

#container #menu4{left:75%;background:url(../images/content_bg4.png) repeat;}

 

 

/* 가상요소 */

 

#container .content:before,

#container .content:after{content:"";display:block;position:absolute;}

#container .content:before{width:1px;height:100%;background:#000;left:0;top:0;z-index:4;}

 

#container .content:after{left:30px;top:180px;font-size:25px;font-weight:700;color:#ed3140;}

#container #menu1:after{content:"회사소개";}

#container #menu2:after{content:"도서소개";}

#container #menu3:after{content:"FAQ";}

#container #menu4:after{content:"Contact Us";}

#container .content .conbox:before{content:"";display:block;position:absolute;}

#container #menu1 .conbox:before{background:url(../images/main_ico1.png) no-repeat; width:350px;height:260px;right:-10px;top:130px;background-size:100%;}

 

#container #menu2 .conbox:before{background:url(../images/main_ico2.png) no-repeat; width:180px;height:470px;right:-30px;top:180px;background-size:100%;}

 

#container #menu3 .conbox:before{background:url(../images/main_ico3.png) no-repeat; width:270px;height:310px;right:-60px;top:30px;background-size:100%;}

 

#container #menu4 .conbox:before{background:url(../images/main_ico4.png) no-repeat; width:350px;height:400px;right:-170px;top:100px;background-size:100%;}

 

/* 영역 전후 구분 */ #container .content h2{opacity:0;}

#container .content.this h2{height:auto;padding:30px 0 20px 50px;color:#000;position:relative; background:#fff;font-size:28px;font-weight:400;opacity:1;transition:all .6s;transition-delay:1.2s;}

 

#container .content.this h2:after{content:"";width:100%;height:8px;background:#ed3140; position:absolute;left:0;bottom:0;}

 

#container .content .conbox .content_wrap{opacity:0;}

 

#container .content.this .conbox .content_wrap{ padding:30px 50px 50px 50px; opacity:1; transition:all 1.7s; transition-delay:.8s; }

 

/* 애니메이션 효과 */

 

#container .content{top:-100%;transition:all .8s;}

#container .content:nth-of-type(2){transition-delay:.3s;}

#container .content:nth-of-type(3){transition-delay:.6s;}

#container .content:nth-of-type(4){transition-delay:.8s;}

#container.start .content{top:0;}

 

/* 회사소개 */

.pargrph_tit{margin-bottom:50px;font-size:24px;color:#fff;position:relative;} .pargrph_tit:after{content:"";display:block;width:30px;height:8px;background:#ed3140; position:absolute;left:0;bottom:-10px;}

.text_box{position:relative;}

.text_box h4{font-size:40px;color:#d6d4d4;font-weight:700;}

.text_box p{margin-bottom:50px;color:#ababab;line-height:20px;}

.text_box:nth-child(odd){text-align:left;}

.text_box:nth-child(even){text-align:right;}

.text_box:nth-child(1):after{content:"";display:block;width:206px;height:100%; position:absolute;right:0;top:0;background:url(../images/content_img1.png) no-repeat right top; background-size:206px auto;}

 

.text_box:nth-child(1) p{width:100%;padding-right:206px;}

 

.text_box:nth-last-child(1):before{content:"";display:block;width:150px;height:250px; position:absolute;left:0;top:70px;background:url(../images/content_img2.png) no-repeat right top; background-size:150px;}

 

.text_box:nth-last-child(1):after{content:"";display:block;width:170px;height:280px; position:absolute;right:0;top:-20px;background:url(../images/content_img3.png) no-repeat right top; background-size:170px;}

 

.text_box:nth-last-child(1) p{padding:0 200px 0 280px;}

.text_box:nth-last-child(1) h4{color:#ed3140;}

 

/* 도서소개 */

 

#menu2.content h3{font-size:0px;}

 

#menu2.content.this .conbox{background:url(../images/bookbg.png) no-repeat -15px 360px; max-width:100%;} .notebook{width:954px;height:650px;margin:100px auto 0 auto; background:url(../images/mackbook.png)

no-repeat;background-size:954px;position:relative;

transform-style:preserve-3d;transform:matrix3d(1,0,0,0,0,0.1,0,0,0,0,1,0,0,0,0,1);

transition:all ease-in-out 0.6s;transition-delay:.8s;opacity:0;}

 

#menu2.this .notebook{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);opacity:1;}

 

 

.detail_content{width:719px;height:453px;position:absolute;left:117px;top:38px; padding:30px 0;}

 

.img_book{width:270px;float:left;}

.img_book img{width:270px;}

.book_description{width:449px;float:left;padding:20px 20px 20px 40px;} .detail_content:after{content:"";display:block;clear:both;} /* float 해제 */

 

 

.book_description h4{font-size:31px;font-weight:700;color:#f92d68;line-height:31px;}

.book_description ul li em{font-weight:700;}

.point_text{padding:10px 30px 0 0;font-size:12px;color:#666;}

.point_text strong{display:block;padding:0 0 10px 46px; background:url(../images/point_bg.png)

no-repeat;background-size:40px; font-size:14px;font-weight:700;color:#3c4147;}

 

 

/* 롤링 슬라이더 효과 나타내기 */

 

.book_rollwrap{width:954px;height:150px;margin:40px auto 0 auto;padding:0 20px;position:relative;}

 

.book_rollwrap > button{display:block;position:absolute;width:20px;height:100%;top:0;}

 

.book_rollwrap > button.roll_left{background:url(../images/btn_left.png) no-repeat center center;

background-size:20px;left:0;}

.book_rollwrap > button.roll_right{background:url(../images/btn_right.png) no-repeat center center; background-size:20px;right:0;}

 

.book_rollwrap .book_roll{width:100%;height:100%;overflow:hidden;}

.book_rollwrap .book_roll ul{width:1000%;}

.book_rollwrap .book_roll ul li{float:left;width:152px;text-align:center;}

.book_rollwrap .book_roll ul li img{width:100px;}

.tit_faq{color:#fff;} .tit_faq strong{font-size:25px;padding-right:10px;}

.tit_faq span{ font-size:14px; font-weight:400; }

.tit_faq:before{ content:"";display:block; position:absolute;width:120px;height:150px; background:url(../images/faq_boy.png) no-repeat; right:0;top:360px; }

 

.accordio_box{ margin-top:170px; }

.accordio_box ol li{ width:100%; background:#fff; border-top:4px solid #ea657b; }

.accordio_box ol li h4{ display:block; padding:0 20px 20px 0; margin:20px 20px 0 30px; cursor:pointer; background:url(../images/select_bullet_up.png) no-repeat right 11px; font-weight:400;color:#3c4147; }

 

.accordio_box ol li.on h4{ background:url(../images/select_bullet_down.png) no-repeat right 11px; }

.accordio_box ol li h4 span{ display:inline-block; margin-right:10px; font-weight:900; }

.accordio_box ol li p{ height:0; visibility: hidden; opacity: 0; }

.accordio_box ol li.on p{ height:auto; padding:30px 100px 70px 200px; background-color:#eee; background-size:100px auto; background-repeat:no-repeat; visibility: visible; opacity: 1; }

 

.accordio_box ol li:nth-of-type(1) p{ background-image:url(../images/board_boy.png); background-position:40px -1px; }

.accordio_box ol li:nth-of-type(2) p{ background-image:url(../images/read_boy.png); background-position:40px 20px; }

 

.accordio_box ol li:nth-of-type(3) p{ background-image:url(../images/shopping_boy.png); background-position:40px 13px; }

.accordio_box ol li:nth-of-type(4) p{ background-image:url(../images/meeting_boy.png); background-position:40px 13px; }

 

#menu4 .content_wrap { width:800px; margin:100px auto 0 auto; padding:30px; background:rgba(255,255,255,0.7); border-radius: 5px; }

 

#menu4 .content_wrap .form_tit{ margin-bottom: 40px; font-size:24px; font-weight: 700; color:#ea657b; }

 

/* CONTACT US */

 

.formList{ padding-bottom: 150px; background:url(../images/contact_bg.png) no-repeat right bottom; background-size: 200px; }

 

.formList ul li{ margin-bottom: 15px; position: relative; padding: 0 0 0 150px; }

 

.formList ul li label{ display: block; width: 150px; position: absolute; left: 0; top: 0; font-size: 14px; color: #555; }

 

.formList ul li label sup{ color: #ea657b; }

 

.formList ul li span{ display: block; }

 

.formList ul li .inputbox{ width:100%; height: 40px; border: solid 1px #ddd; background: #fff; }

 

.formList ul li .textbox{ width: 100%; height: 200px; border:solid 1px #ddd; background: #fff; }

 

.formList ul li input,.formList ul li textarea { width: 100%; height: 100%; }

 

.btn_box { width: 100%; margin-top: 20px; text-align: center; }

 

.thankyou_message { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); z-index: 999; display: none; }

 

.thankyou_message > section > h1 { color: #59c3c3; font-size: 25px; font-weight: 700; margin-bottom: 20px; }

 

.thankyou_message > section { width: 550px; margin: 10% auto; padding: 20px; border-radius: 5px; background: url(../images/contact_pop.jpg) no-repeat #fff right bottom; background-size: 240px; color: #3c4147; }

 

/*.book_roll li:before{content:attr(data-url);}

 

.book_roll li[data-url]{color:#fff;}*/

 

 

.bullet_list{margin-top:20px;}

.bullet_list li{margin-bottom:5px;padding-left:10px;font-size:12px;color:#3c4147; position:relative;}

.bullet_list li:after{content:"";display:block;width:3px;height:3px;border-radius:50%; background:#3c4147;position:absolute;left:0;top:8px;}

.commbtn{width:150px;display:inline-block;height:35px;margin-top:20px;font-size:15px;

line-height:35px;border-radius:5px;text-align:center;}

.commbtn.pink{background:#f92d68;color:#fff;}

.commbtn.gray { background: #3c4147; color: #fff; }

 

 

 

 

$(document).ready(function(){

    $("#container").addClass("start");

$("nav li").click(function(){
        $("#container").css("max-width","100%");
        var id=$(this).attr("data-rol");
        $("nav li").removeClass("on");
        $(this).addClass("on");
        $(".content").removeClass("prev this next");
        //클릭시 가지고 있던 클래스를 모두 지운다.
        $("#" + id).addClass("this").prevAll().addClass("prev");
        //클릭한 메뉴와 매칭되는 id에 this 클래스를 지정하고 그 앞의 모든
        //<section> 태그는 .prev 클래스를 지정한다.
        $("#" + id).nextAll().addClass("next");
        //클릭한 메뉴와 매칭되는 id의 뒤에 오는 <section> 태그는 .next
        //클래스를 지정한다.
        $(".logo_box").click(function(){
            $("nav li").removeClass("on");
            $(".content").removeClass("prev this next");
            $("#container").css("max-width","1200px");
        });

        /*롤링 이벤트*/
        $(".roll_left").click(function(){
            $(".book_roll li").eq(0).insertAfter(".book_roll li:last-child");
        });

        $(".roll_right").click(function(){
            $(".book_roll li").eq(-1).insertBefore(".book_roll li:first-child");
        });

        $(".book_roll li").click(function(){
            var  _this = $(this);

            var  liurl = _this.data("url");

            $(".notebook").html();

            //Ajax 처리
            $.ajax({
                type : 'post',   //http 요청 방식
                url : liurl,     //해당 url
                dataType : 'html',
                success : function(data){
                    $(".notebook").html(data);
                }



            });

        });


        $(".accordio_box ol li").click(function(){
            $(".accordio_box ol li").removeClass("on");
            $(this).addClass("on");  //li태그가 현재 클릭한 요소가 되기 때문에 this 로 변경함 

            // index.html 에 첫번째 li 에 클래스 on 이라고 지정했음 
        });



        $(".close").click(function(){
            $(".thankyou_message").css("display","none");
        });



    });

});