본문 바로가기

TUTORIAL


반응형 사이트 만들기(2019)

36. 반응형 사이트 만들기 : 사이드 이펙트3

(2019/36) 반응형 사이트 만들기 - 사이드 이펙트3

반응형 웹 사이트를 만들기 위한 사이드 이펙트3 예제입니다. 영상을 보면서 같이 따라하세요^^

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="반응형 사이트 따라하기">
    <meta name="keywords" content="반응형사이트, 웹퍼블리셔, 웹접근성, HTML5, webstoryboy, webs">
    <title>반응형 사이트 만들기 : 사이드 이펙트3</title>

    <!-- style -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/slick.css">
    <link rel="stylesheet" href="css/lightgallery.css">

    <!-- Facebook meta tags -->
    <meta property="og:type" content="article" />
    <meta property="og:title" content="반응형 사이트 만들기(title)" />
    <meta property="og:url" content="http://richclub8.dothome.co.kr/responsive/html5/index.html" />
    <meta property="og:image" content="http://richclub8.dothome.co.kr/assets/ico/icon.png" />
    <meta property="og:site_name" content="반응형 사이트 만들기(site_name)" />
    <meta property="og:description" content="반응형 사이트 따라하기(description)" />

    <!-- twitter meta tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@webstoryboy" />
    <meta name="twitter:title" content="반응형 사이트 만들기(title)" />
    <meta name="twitter:description" content="반응형 사이트 만들기(description)." />
    <meta property="twitter:image" content="http://richclub8.dothome.co.kr/assets/ico/icon.png" />

    <!-- 파비콘 -->
    <link rel="shortcut icon" href="icon/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="icon/favicon-152.png">
    <link rel="icon" href="path/to/favicon.png">
    <link rel="icon" href="icon/favicon-16.png" sizes="16x16"> 
    <link rel="icon" href="icon/favicon-32.png" sizes="32x32"> 
    <link rel="icon" href="icon/favicon-48.png" sizes="48x48"> 
    <link rel="icon" href="icon/favicon-64.png" sizes="64x64"> 
    <link rel="icon" href="icon/favicon-128.png" sizes="128x128">

    <!-- 웹 폰트 -->
    <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">

    <!-- HTLM5shiv ie6~8 -->
    <!--[if lt IE 9]> 
        <script src="js/html5shiv.min.js"></script>
        <script type="text/javascript">
            alert("현재 당신이 보는 브라우저는 지원하지 않습니다. 최신 브라우저로 업데이트해주세요!");
        </script>
    <![endif]-->
    <style>
        /* reset */
        /* 여백 초기화 */
        body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,th,td,tr,textarea,button,form,figure,figcaption{margin:0;padding:0;}

        /* a 링크 초기화 */
        a {color: #222; text-decoration: none;}
        a:hover {color: #2698cb;}

        /* 폰트 초기화 */
        body, input, textarea, select, button, table {font-family:  'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.6;}
        
        /* 폰트 스타일 초기화 */
        em,address {font-style: normal;}

        /* 블릿기호 초기화 */
        ul,li,ol {list-style: none;}

        /* 제목 태그 초기화 */
        h1,h2,h3,h4,h5,h6 {font-size: 13px; font-weight: normal;}
        
        /* 버튼 초기화 */
        button {border: 0;}
        
        /* 반응형 */
        img {width: 100%;}
        
        /* clearfix */
        .clearfix{*zoom:1;}
        .clearfix:before, .clearfix:after {display: block; content: '';line-height: 0;}
        .clearfix:after {clear: both;}

        /* IR 효과 */
        .ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
        .ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
        .ir_su {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
        
        /* margin, padding */
        .mt10 {margin-top: 10px !important;}
        .mt15 {margin-top: 15px !important;}
        .mt20 {margin-top: 20px !important;}
        .mt25 {margin-top: 25px !important;}
        .mt30 {margin-top: 30px !important;}
        .mt35 {margin-top: 35px !important;}
        .mt40 {margin-top: 40px !important;}
        .mt45 {margin-top: 45px !important;}
        .mt50 {margin-top: 50px !important;}

        /* style */
        /* 레이아웃 */
        body {background: url(img/header_bg.jpg) repeat-x center top;}
        #header {  }
        #nav {background-color: #f6fdff;}
        #title {background-color: #eaf7fd;}
        #contents .container {border-right: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb;}
        #cont_left {float: left; width: 250px;}
        #cont_center {
            overflow: hidden; 
            margin-right: 250px; 
            min-height: 1300px; 
            border-right: 1px solid #dbdbdb;
            border-left: 1px solid #dbdbdb;
        }
        #cont_right {position: absolute; right: 0; top: 0px; width: 250px;}
        #footer {border-top: 1px solid #dbdbdb;}

        /* 컨테이너 */
        .container {position: relative; width: 1200px; margin: 0 auto; /* background: rgba(0,0,0,0.3) */}

        /* 헤더 */
        .header {height: 327px;}
        .header .header_menu {text-align: right;}
        .header .header_menu a {color: #fff; padding: 8px 0 6px 10px; display: inline-block; transition: color 0.3s ease; font-family: 'Abel', sans-serif;}
        .header .header_menu a:hover {color: #ccc;}
        
        .header .header_tit { text-align: center; text-transform: uppercase; margin-top: 55px; font-family: 'Abel', sans-serif;}
        .header .header_tit h1 {
            font-size: 30px; 
            color: #fff; 
            background: #51b0dc; 
            display: inline-block; 
            padding: 5px 30px 5px 30px; 
            letter-spacing: 2px; 
            font-weight: 900;
            transition: box-shadow 0.25s ease-in-out;
        }
        .header .header_tit h1:hover {
            box-shadow: 
                inset -9em 0 0 0 #257FAC, 
                inset 9em 0 0 0 #257FAC;
        }
        .header .header_tit a {
            font-size: 16px; 
            color: #fff; 
            background: #4a9abf;  
            display: inline-block; 
            padding: 10px 20px 10px 20px; 
            margin-top: -7px; 
            transition: box-shadow 0.3s ease-in-out;
        }
        .header .header_tit a:hover {
            box-shadow: 
                0 0 0 5px rgba(75,154,191,0.9) inset,
                0 0 0 100px rgba(0,0,0,0.1) inset;
        }
        
        .header .header_icon {text-align: center; margin-top: 40px; padding-bottom: 45px;}
        .header .header_icon li {display: inline; margin: 0 2px;}
        .header .header_icon li a {
            position: relative;
            background-color: #3192bf;
            border-radius: 50%;
            width: 60px; 
            height: 60px;  
            color: #fff;
            display: inline-block;
            font-size: 35px;
            line-height: 60px;
            transition: all 0.3s ease;
        }
        .header .header_icon li a span {
            position: absolute; 
            opacity: 0;
            left: 50%; top: -40px;
            transform: translateX(-50%);
            font-size: 12px;
            line-height: 1.6;
            background: #3192bf; 
            padding: 3px 9px;
            border-radius: 6px 0;
            transition: all 0.3s ease;
        }
        .header .header_icon li a span:before {
            content: '';
            position: absolute;
            left: 50%; bottom: -5px;
            margin-left: -5px;
            border-top: 5px solid #3192bf;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
        .header .header_icon li a:hover span {
            opacity: 1;
            top: -33px;
        }
        .header .header_icon li a:hover {
            box-shadow: 
                0 0 0 3px rgba(75,154,191,0.9) inset,
                0 0 0 100px rgba(0,0,0,0.1) inset;
        }
        
        /* 전체 메뉴 */
        .nav {overflow: hidden; padding: 25px 0; display: none;}
        .nav > div {float: left; width: 40%;}
        .nav > div:last-child {width: 20%;}
        .nav > div ol {overflow: hidden;}
        .nav > div li {float: left; width: 50%; position: relative; padding-left: 8px; box-sizing: border-box;}
        .nav > div:last-child li {width: 100%;}
        .nav > div li a {position: relative;}
        .nav > div li:before {
            content: '';
            width: 3px; height: 3px;
            background-color: #25a2d0;
            border-radius: 50%;
            position: absolute; left: 0; top: 8px;
        }
        .nav > div h3 {
            font-size: 18px; 
            color: #25a2d0; 
            font-weight: bold; 
            margin-bottom: 4px;
        }
        .nav > div li a:after {
            content: '';
            display: inline-block;
            width: 0;
            height: 1px;
            position: absolute;
            bottom: 0;
            left: 0;
            background: #25a2d0;
            transition: all .2s ease-out;
        }
        .nav > div li:hover a:after {width: 100%;}
        
        /* 타이틀 */
        .title {position: relative; text-align: center; }
        .title h2 {font-family: 'Nanum Brush Script', cursive; font-size: 39px; color: #0093bd; padding: 5px 0;}
        .title .btn {
            position: absolute; right: 0; top: 5px;
            width: 60px; 
            height: 60px; 
            line-height: 60px; 
            background: #3192bf; 
            color: #fff;
            font-size: 35px; 
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        .title .btn:hover {
            box-shadow: 
                0 0 0 3px rgba(75,154,191,0.9) inset,
                0 0 0 100px rgba(0,0,0,0.1) inset;
        }
        
        /* 컨텐츠 영역 */
        .column {padding: 15px; border-bottom: 1px solid #dbdbdb;}
        .column .col_tit {font-size: 20px; color: #2f7fa6; padding-bottom: 5px;}
        .column .col_desc {
            border-bottom: 1px dashed #dbdbdb; 
            padding-bottom: 15px; margin-bottom: 15px;  
            color: #878787;
            line-height: 18px;
        }
        .column.col1 {} 
        .column.col2 {} 
        .column.col3 {border-bottom: 0;} 
        .column.col4 {} 
        .column.col5 {} 
        .column.col6 {border-bottom: 0;} 
        .column.col7 {} 
        .column.col8 {} 
        .column.col9 {border-bottom: 0;} 
        
        /* 메뉴 */
        .menu li {position: relative;}
        .menu li a {
            font-size: 16px; text-transform: uppercase; 
            color: #878787; border-bottom: 1px solid #dbdbdb; 
            padding: 10px; 
            display: block;  
            transition: box-shadow 0.34s ease, background 0.34s ease;
        }
        .menu li a i {position: absolute; right: 10px; top: 15px;}
        .menu li a:hover {
            box-shadow: inset 180px 0 0 0 rgba(36,130,174,0.7); 
            color: #fff; 
            background: rgba(36,130,174,0.9);
        }
        
        /* 게시판1 */
        .notice1 {position: relative;  }
        .notice1 h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 5px;}
        .notice1 li {position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px;}
        .notice1 li:before {
	        content: ''; width: 3px; height: 3px; 
            border-radius: 50%;
            background: #449ce2; 
            position: absolute; left: 0; top: 6px;
        }
        .notice1 .more {
            position: absolute; 
            right: 0; top: 3px; 
            color: #878787; 
            text-transform: uppercase;
            font-size: 10px;
        }
        
        /* 게시판2 */
        .notice2 {position: relative;  }
        .notice2 h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 5px;}
        .notice2 li {
            position: relative; 
            overflow: hidden; 
            text-overflow: ellipsis; 
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp : 2;
            padding-left: 8px;
            padding-bottom: 5px;
            max-height: 40px; /* ie */
        }
        .notice2 li:before {
            content: ''; width: 3px; height: 3px; 
            border-radius: 50%;
            background: #449ce2; 
            position: absolute; left: 0; top: 6px;
        }
        .notice2 .more {
            position: absolute; 
            right: 0; top: 3px; 
            color: #878787; 
            text-transform: uppercase;
            font-size: 10px;
        }
        
        /* 블로그1 */
        .blog1 img {width: 100%;}
        .blog1 .img-retina {display: none;}
        
        @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
               only screen and (min-device-pixel-ratio: 1.5),
               only screen and (min-resolution: 1.5dppx) {
                .blog1 .img-retina {display: initial;}
                .blog1 .img-normal {display: none;}
        }

        /* 블로그2 */
        .blog2 h5 {color: #fff; text-align: center; padding: 30px 30px; text-transform: uppercase;}
        .blog2 p {padding-top: 5px;}
        .blog2 .img-retina {
            background-image: url(img/blog3_@1.jpg);
            background-size: cover;
        }
        @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
               only screen and (min-device-pixel-ratio: 1.5),
               only screen and (min-resolution: 1.5dppx) {
                .blog2 .img-retina {background-image: url(img/blog3_@2.jpg);}
        }
        
        /* 이미지 슬라이드 */
        .slider figure {position: relative;}
        .slider figcaption {position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px;
            box-sizing: border-box;
            background-color: rgba(0,0,0,0.5);
            color: #fff;
            font-size: 18px;
        }
        .slider figcaption em {
            display: block; 
            font-weight: bold; font-size: 28px; text-transform: uppercase; font-family: 'Abel', sans-serif;
            opacity: 0;
            transform: translateX(50px);
            transition: all .84s ease;
        }
        .slider figcaption span {
            display: block;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            opacity: 0;
            transform: translateX(50px);
            transition: all .84s 0.2s ease;
        }
        .slider .slick-active figcaption em {opacity: 1; transform: translateX(0)}
        .slider .slick-active figcaption span {opacity: 1; transform: translateX(0)}
        
        .slider .slick-dots {display: block; width: 100%; text-align: center;}
        .slider .slick-dots li {display: inline-block; width: 15px; height: 15px; margin: 5px;}
        .slider .slick-dots li button {
            font-size: 0; 
            line-height: 0; 
            display: block; 
            width: 15px; height: 15px;
            cursor: pointer; 
            background: #5dbfeb; 
            border-radius: 50%;
        }
        .slider .slick-dots li.slick-active button {background: #2b91c8;}
        .slider .slick-prev {
            position: absolute; left: 0; bottom: 0; 
            z-index: 1000;
            width: 30px; height: 30px; 
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            text-indent: -9999px;
        }
        .slider .slick-prev::before {
            content: "\f053";
            color: #5dbfeb;
            text-indent: 0;
            position: absolute; left: 9px; top: 8px;
        }
        .slider .slick-next {
            position: absolute; right: 0; bottom: 0; 
            z-index: 1000;
            width: 30px; height: 30px; 
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            text-indent: -9999px;
        }
        .slider .slick-next::before {
            content: "\f054";
            color: #5dbfeb;
            text-indent: 0;
            position: absolute; left: 11px; top: 8px;
        }
        
        /* 라이트 박스 */
        .square a {float: left; width: 19%; margin: 0.5%; position: relative; overflow: hidden;  }
        .square a img {width: 100%; display: block;}
        .square a em {background: rgba(0,0,0,0.77); color: #fff; width: 100%; text-align: center; position: absolute; left:0; bottom: -30px; opacity: 1; transition: all .3s ease;}
        .square a:hover em {bottom: 0; background: rgba(0,0,0,0.57); }
        .square a:nth-child(1):hover img {filter: blur(2px);}
        .square a:nth-child(2):hover img {filter: brightness(50%);}
        .square a:nth-child(3):hover img {filter: contrast(10%);}
        .square a:nth-child(4):hover img {filter: grayscale(100%);}
        .square a:nth-child(5):hover img {filter: hue-rotate(120deg);}
        .square a:nth-child(6):hover img {filter: invert(100%);}
        .square a:nth-child(7):hover img {filter: opacity(10%);}
        .square a:nth-child(8):hover img {filter: saturate(10%);}
        .square a:nth-child(9):hover img {filter: sepia(120%);}
        .square a:nth-child(10):hover img {filter: sepia(120%) hue-rotate(120deg);}
        
        /* 비디오 */
        .video {position: relative; width: 100%; padding-bottom: 56.25%;}
        .video iframe {position: absolute; width: 100%; height: 100%;}
        
        /* 푸터 */
        .footer {text-align: center; padding: 30px 50px; }
        .footer li {position: relative; display: inline; padding: 0 7px 0 10px; white-space: nowrap;}
        .footer li:before {content: ''; width: 1px; height: 12px; background-color: #dbdbdb; position: absolute; left: 0; top: 2px;}
        .footer li:first-child:before {width: 0;}
        .footer address {padding-top: 15px;}
        
        /* 사이드 이펙트1 */
        .side1 {position: relative; display: block; perspective: 600px;}
        .side1 .front {
            transform-style: preserve-3d;
            transform: rotateY(0deg);
            transition: all 0.5s ease-in-out;
            backface-visibility: hidden;
        }
        .side1 .back {
            position: absolute; top: 0; left: 0; 
            width: 100%; height: 100%; z-index: -1;
            transform-style: preserve-3d;
            color: #fff;
            background: #4038DC;
            text-align: center;
            transform: rotateY(-180deg);
            transition: all 0.5s ease-in-out;
            backface-visibility: hidden;
        }
        .side1 .back i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
        .side1:hover .front {transform: rotateY(180deg);}
        .side1:hover .back {transform: rotateY(0deg); z-index: 1;}
        
        /* 사이드 이펙트2 */
        .side2 {position: relative; display: block; perspective: 600px;}
        .side2 .front {
            transform-style: preserve-3d;
            transform: rotateY(0deg);
            transition: all 0.5s ease-in-out;
            backface-visibility: hidden;
        }
        .side2 .back {
            position: absolute; top: 0; left: 0; 
            width: 100%; height: 100%; z-index: -1;
            transform-style: preserve-3d;
            transform: rotateY(-180deg);
            transition: all 0.5s ease-in-out;
            backface-visibility: hidden;
        }
        .side2 .front figcaption {
            position: absolute; left: 50%; top: 50%;
            transform: translate(-50%,-50%) translateZ(100px);
            display: block;
            text-align: center;
        }
        .side2 .back figcaption {
            position: absolute; left: 50%; top: 50%;
            transform: translate(-50%,-50%) translateZ(100px);
            color: #fff;
            font-size: 20px;
            display: block;
            text-align: center;
        }
        .side2 figcaption {width: 60%;}
        .side2 figcaption h3 {color: #fff; font-size: 20px; font-family: 'Abel', sans-serif; font-weight: bold; background: rgba(0,0,0,0.4); padding: 3px 10px;}
        .side2 figcaption p {font-size: 14px;}
        .side2:hover .front {transform: rotateY(180deg);}
        .side2:hover .back {transform: rotateY(0deg); z-index: 1;}
        
        /* 사이드 이펙트3 */
        .side3 {position: relative; overflow: hidden; background: #000;}
        .side3 figcaption {
            position: absolute;
	        top: 50%; left: 50%;
            color: #fff;
            text-align: center;
            opacity: 0;
            text-transform: uppercase;
            transition: all 0.3s ease;
	        transform: translate(350%, -50%) rotate(180deg);
        }
        .side3 figcaption:after {
            content: '';
            width: 100px; height: 100px; 
            background: #000; 
            border-radius: 50%;
            position: absolute; left: 50%; top: 50%; z-index: -1;
            transform: translate(-50%, -50%);
        }
        .side3 figcaption h3 {font-size: 16px;}
        .side3 figcaption em {display: block; font-weight: bold;}
        .side3 img {display: block; transition: all 0.3s ease;}
        .side3:hover img {opacity: 0.4;}
        .side3:hover figcaption {transform: translate(-50%, -50%) rotate(0deg); opacity: 1;}
        
        
        /* mediaquery */
        /* 화면 너비 0~1220px */
        @media (max-width: 1220px){
            .container {width: 100%;}
            .row {padding: 0 15px;}
            #cont_center {min-height: 1350px;}
	        #contents .container {border: 0;}
            
            .title .btn {right: 15px;}
            .square a {width: 24%}
	        .square a:nth-child(5n) {display: none;}
        }
        
        /* 화면 너비 0~1024px */
        @media (max-width: 1024px){
            .square a {width: 32.33333%}
	        .square a:nth-child(5) {display: block;}
        }
        
        /* 화면 너비 0~960px */
        @media (max-width: 960px){
            #cont_right {position: static; width: 100%; border-top: 1px solid #dbdbdb;}
	        #cont_center {margin-right: 0; border-right: 0;}
            
            .nav > div {float: none; width: 100%;}
            .nav > div:last-child {width: 100%;}
            .nav > div li {width: 33.333%;}
            .nav > div:last-child li {width: 33.333%;}
            .nav > div ol {margin-bottom: 10px;}
            
            #cont_right {overflow: hidden;}
            #cont_right .column {float: left; width: 33.333%; box-sizing: border-box;}
            #cont_right .column.col7 {border-right: 1px solid #dbdbdb; border-bottom: 0;}
            #cont_right .column.col8 {border-right: 1px solid #dbdbdb; border-bottom: 0;}
        }
        
        /* 화면 너비 0~768px */
        @media (max-width: 768px){
            #cont_left {float: none; width: 100%;}
	        #cont_center {border-left: 0;}
        }
        
        /* 화면 너비 0~600px */
        @media (max-width: 600px){
            .header {height: auto;}
            .nav > div li {width: 50%;}
	        .nav > div:last-child li {width: 50%;}
            
            .header .header_tit {display: none;}
            .header .header_icon {display: none;}
            .title .btn {display: none;}
            .column.col1 .col_tit {display: none;}
            .column.col1 .col_desc {display: none;}
            .column.col1 .menu li a i {display: none;}
            .column.col1 {padding: 0; border-bottom: 0;}
            .column.col1 .menu ul {overflow: hidden;}
            .column.col1 .menu li {float: left; width: 33.33333%; text-align: center; border-right: 1px solid #dbdbdb; box-sizing: border-box;}
            .column.col1 .menu li:nth-child(3n) {border-right: 0;}
            .column.col1 .menu li a {color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.7);}
            .column.col1 .menu li a:hover {box-shadow: none; background: rgba(36,130,174,0.3);}
            .column.col2 {background: #fff;}
	        .column.col4 {border-top: 1px solid #dbdbdb;}
            
            #cont_right .column {width:50%;}
            #cont_right .column.col8 {border-right: 0;}
            #cont_right .column.col9 {display: none;}
            
            .slider figcaption {padding: 10px;}
            .slider figcaption em {font-size: 18px;}
            .slider figcaption span {font-size: 14px;}
            
            .square a {width: 49%}
	        .square a:nth-child(5) {display: none;}
        }
        
        /* 화면 너비 0~480px */
        @media (max-width: 480px){

        }

        /* 화면 너비 0~320px */
        @media (max-width: 320px){
            #cont_right .column {width:100%;}
	        #cont_right .column.col7 {border-right: 0; border-bottom: 1px solid #dbdbdb;}
            .square a {width: 100%; margin-left:0; margin-right: 0;}
        }
    </style>
</head>
<body>
    
    <header id="header">
        <div class="container">
            <div class="row">
                <div class="header">
                    <div class="header_menu">
                        <a href="http://websedu.tistory.com/">Blog</a>
                        <a href="https://www.facebook.com/webstoryboys">facebook</a>
                        <a href="http://richclub8.dothome.co.kr/webstandard/web/index.html">Webstandard</a>
                    </div>
                    <!-- //header_menu -->
                    <div class="header_tit">
                        <h1>Professional Web Publisher</h1><br>
                        <a href="http://webstoryboy.co.kr">webstoryboy.co.kr</a>
                    </div>
                    <!-- //header_tit -->
                    <div class="header_icon">
                        <ul>
                            <li><a href="#"><i class="fa fa-html5" aria-hidden="true"></i><span>HTML5</span></a></li>
                            <li><a href="#"><i class="fa fa-github" aria-hidden="true"></i><span>GitHub</span></a></li>
                            <li><a href="#" class="facebook"><i class="fa fa-facebook-square" aria-hidden="true"></i><span>Fackbook</span></a></li>
                            <li><a href="#" class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i><span>twitter</span></a></li>
                        </ul>
                    </div>
                    <!-- //header_icon -->
                </div>
            </div>
        </div>
    </header>
    <!-- //nav -->
    
    <nav id="nav">
		<div class="container">
			<div class="row">
				<div class="nav">
					<h2 class="ir_su">전체 메뉴</h2>
					<div>
			            <h3>HTML Reference</h3>
			            <ol>
			                <li><a href="#">HTML 태그(Tag)</a></li>
			                <li><a href="#">블록 요소/인라인 요소</a></li>
			                <li><a href="#">DTD 선언</a></li>
			                <li><a href="#">언어 속성 설정</a></li>
			                <li><a href="#">HTML <title></a></li>
			                <li><a href="#">HTML <meta></a></li>
			                <li><a href="#">특수문자</a></li>
			                <li><a href="#">하이퍼 링크</a></li>
			                <li><a href="#">HTML <style></a></li>
			                <li><a href="#">HTML <html></a></li>
			                <li><a href="#">HTML <head></a></li>
			                <li><a href="#">HTML <div></a></li>
			                <li><a href="#">HTML <colgroup></a></li>
			                <li><a href="#">HTML <caption></a></li>
			            </ol>
			        </div>
			        <div>
			            <h3>CSS Reference</h3>
			            <ol>
			                <li><a href="#">CSS 선택자</a></li>
			                <li><a href="#">CSS 단위</a></li>
			                <li><a href="#">CSS 색상</a></li>
			                <li><a href="#">CSS 선언 방법</a></li>
			                <li><a href="#">상대주소와 절대주소</a></li>
			                <li><a href="#">CSS float</a></li>
			                <li><a href="#">이미지 표현 방법</a></li>
			                <li><a href="#">이미지 스프라이트</a></li>
			                <li><a href="#">IR 효과</a></li>
			                <li><a href="#">이미지 최적화</a></li>
			                <li><a href="#">background-color</a></li>
			                <li><a href="#">border-style</a></li>
			                <li><a href="#">font-size</a></li>
			                <li><a href="#">text-align</a></li>
			            </ol>
			        </div>
			        <div>
			            <h3>Responsive</h3>
			            <ol>
			                <li><a href="#">반응형사이트</a></li>
			                <li><a href="#">미디어쿼리</a></li>
			                <li><a href="#">CSS3</a></li>
			                <li><a href="#">웹 접근성 연구소</a></li>
			                <li><a href="#">네이버 널리</a></li>
			                <li><a href="#">다음 다룸</a></li>
			                <li><a href="#">Webstandard</a></li>
			            </ol>
			        </div>
				</div>
			</div>
		</div>
	</nav>
	<!-- //nav -->
   
    <article id="title">
		<div class="container">
			<div class="title">
				<h2>"나는 퍼블리셔다."</h2>
				<a href="#" class="btn"><i class="fa fa-angle-down" aria-hidden="true"></i><span class="ir_su">전체메뉴 보기</span></a>
			</div>
		</div>
	</article>
	<!-- //title -->
   
    <main>
        <section id="contents">
            <div class="container">
				<h2 class="ir_su">반응형 사이트 컨텐츠</h2>
                <section id="cont_left">
                    <h3 class="ir_su">메뉴 및 게시판 컨텐츠 영역</h3>
                    <article class="column col1">
                        <h4 class="col_tit">Menu</h4>
						<p class="col_desc">Box-shadow를 이용한 마우스 오버 효과 메뉴입니다.</p>
						<!-- 메뉴 -->
						<div class="menu">
							<ul>
								<li><a href="#">Cafe <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
								<li><a href="#">Tutorial <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
								<li><a href="#">WebSite <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
								<li><a href="#">Reference <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
								<li><a href="#">CSS3 <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
								<li><a href="#">HTML5 <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
							</ul>
						</div>
						<!--//메뉴 -->
                    </article>
                    <!-- //col1 -->
                    
                    <article class="column col2">
						<h4 class="col_tit">Notice</h4>
						<p class="col_desc">게시판 영역의 한줄 효과와 두줄 효과 게시판입니다.</p>
						<!-- 게시판 -->
						<div class="notice1">
							<h5>Notice1</h5>
							<ul>
								<li><a href="#">이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
								<li><a href="#">이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
								<li><a href="#">이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
								<li><a href="#">이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
							</ul>
							<a href="#" class="more" title="더 보기">More <i class="fa fa-plus-circle" aria-hidden="true"></i></a>
						</div>
						<!--//게시판 -->
						<!-- 게시판2 -->
						<div class="notice2 mt15">
							<h5>Notice2</h5>
							<ul>
								<li><a href="#">이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
								<li><a href="#">이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
								<li><a href="#">이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
								<li><a href="#">이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
							</ul>
							<a href="#" class="more" title="더 보기">More <i class="fa fa-plus-circle" aria-hidden="true"></i></a>
						</div>
						<!--//게시판2 -->
					</article>
					<!-- //col2 -->
                    
                    <article class="column col3">
						<h4 class="col_tit">Blog</h4>
						<p class="col_desc">해상도에 따라 이미지를 다르게 표현하는 방법입니다.</p>
						<!-- blog -->
						<div class="blog1">
							<h5 class="ir_su">Image1</h5>
							<figure>
                                <img src="img/blog4_@1.jpg" class="img-normal" alt="normal image">
                                <img src="img/blog4_@2.jpg" class="img-retina" alt="retina image">
                                <figcaption>반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다.</figcaption>
							</figure>
						</div>
						<!--//blog -->
						<!-- blog2 -->
						<div class="blog2 mt15">
							<div class="img-retina">
							    <h5>Image2</h5>
							</div>
                            <p>반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다.</p>
						</div>
						<!--//blog2 -->
					</article>
					<!-- //col3 -->
                </section>
                <!-- //cont_left -->
                
                <section id="cont_center">
                    <h3 class="ir_su">반응형 사이트 가운데 컨텐츠</h3>
                    <article class="column col4">
                        <h4 class="col_tit">Slick Slider</h4>
						<p class="col_desc">slick.js를 이용한 이미지 슬라이드 효과입니다.</p>
						<!-- 이미지 슬라이드 -->
						<div class="slider">
							<div>
                                <figure>
                                    <img src="img/slider001.jpg" alt="이미지1">
                                    <figcaption><em>Responsive Site</em><span>슬라이드 플러그인을 이용한 반응형 이미지 슬라이드 입니다.</span></figcaption>
                                </figure>
				            </div>
							<div>
                                <figure>
                                    <img src="img/slider001.jpg" alt="이미지2">
                                    <figcaption><em>Responsive Site</em><span>슬라이드 플러그인을 이용한 반응형 이미지 슬라이드 입니다.</span></figcaption>
                                </figure>
				            </div>
				            <div>
                                <figure>
                                    <img src="img/slider001.jpg" alt="이미지3">
                                    <figcaption><em>Responsive Site</em><span>슬라이드 플러그인을 이용한 반응형 이미지 슬라이드 입니다.</span></figcaption>
                                </figure>
				            </div>
						</div>
						<!--//이미지 슬라이드 -->
                    </article>
                    <!-- //col4 -->
                    
                    <article class="column col5">
                        <h4 class="col_tit">Filter Effect</h4>
						<p class="col_desc">CSS3에서는 Background-blend-mode, mix-blend-mode, filter와 같이 포토샵에 다루는 효과들이 있습니다.</p>
						<!-- lightbox -->
						<div class="lightbox square clearfix">
							<a href="img/light01_s.jpg"><img src="img/light01.jpg" alt="이미지"><em>blur</em></a>
							<a href="img/light02_s.jpg"><img src="img/light02.jpg" alt="이미지"><em>brightness</em></a>
							<a href="img/light03_s.jpg"><img src="img/light03.jpg" alt="이미지"><em>contrast</em></a>
							<a href="img/light04_s.jpg"><img src="img/light04.jpg" alt="이미지"><em>grayscale</em></a>
							<a href="img/light05_s.jpg"><img src="img/light05.jpg" alt="이미지"><em>hue-rotate</em></a>
							<a href="img/light06_s.jpg"><img src="img/light06.jpg" alt="이미지"><em>invert</em></a>
							<a href="img/light07_s.jpg"><img src="img/light07.jpg" alt="이미지"><em>opacity</em></a>
							<a href="img/light08_s.jpg"><img src="img/light08.jpg" alt="이미지"><em>saturate</em></a>
							<a href="img/light09_s.jpg"><img src="img/light09.jpg" alt="이미지"><em>sepia</em></a>
							<a href="img/light10_s.jpg"><img src="img/light10.jpg" alt="이미지"><em>Mix</em></a>
						</div>
						<!--//lightbox -->
                    </article>
                    <!-- //col5 -->
                    
                    <article class="column col6">
						<h4 class="col_tit">Video</h4>
						<p class="col_desc">영상을 보여주는 영역입니다.</p>
						<!-- video -->
						<!-- <video autoplay="autoplay" controls="controls" loop="loop">
							<source src="img/video.mp4" type="video/mp4">
						</video> -->
						<div class="video">
							<iframe src="https://www.youtube.com/embed/tHy498wdPaA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
						</div>
						<!--//video -->
					</article>
					<!-- //col6 -->
                </section>
                <!-- //cont_center -->
                <section id="cont_right">
                    <h3 class="ir_su">반응형 사이트 오른쪽 컨텐츠</h3>
                    <article class="column col7">
                        <h4 class="col_tit">Effect1</h4>
						<p class="col_desc">CSS3의 transform을 이용한 마우스 오버효과입니다.</p>
						<!-- side1 -->
						<div class="side1">
                            <figure class="front">
                                <img src="img/side1.jpg" alt="이미지2">
                            </figure>
                            <div class="back">
                                <i class="fa fa-heart fa-4x" aria-hidden="true"></i>
                            </div>
                        </div>
                        <!-- side1//-->
                    </article>
                    <!-- //col7 -->
                    
                    <article class="column col8">
                        <h4 class="col_tit">Effect2</h4>
						<p class="col_desc">CSS3의 transform을 이용한 마우스 오버효과입니다.</p>
						<!-- side2 -->
						<div class="side2">
                            <figure class="front">
                                <img src="img/side2.jpg" alt="이미지2">
                                <figcaption>
                                    <h3>Hover Effect</h3>
                                </figcaption>
                            </figure >
                            <figure class="back">
                                <img src="img/side4.jpg" alt="이미지2">
                                <figcaption>
                                    <h3>Hover Effect</h3>
                                </figcaption>
                            </figure>
                        </div>
                        <!-- side2//-->
                    </article>
                    <!-- //col8 -->
                    
                    <article class="column col9">
                        <h4 class="col_tit">Effect3</h4>
						<p class="col_desc">CSS3의 transform을 이용한 마우스 오버효과입니다.</p>
						<!-- side3 -->
						<div class="side3">
                            <figure>
                                <img src="img/side3.jpg" alt="이미지3">
                                <figcaption>
                                    <h3>Hover<em>Effect</em></h3>
                                </figcaption>
                            </figure>
                        </div>
                        <!-- side3//-->
                    </article>
                    <!-- //col9 -->
                </section>
                <!-- //cont_right -->
            </div>
        </section>
        <!-- //contents -->
    </main>
    
    <footer id="footer">
        <div class="container">
            <div class="row">
                <div class="footer">
                    <ul>
                        <li><a href="#">사이트 도움말</a></li>
                        <li><a href="#">사이트 이용약관</a></li>
                        <li><a href="#">사이트 운영원칙</a></li>
                        <li><a href="#"><strong>개인정보취급방침</strong></a></li>
                        <li><a href="#">책임의 한계와 법적고지</a></li>
                        <li><a href="#">게시중단요청서비스</a></li>
                        <li><a href="#">고객센터</a></li>
                    </ul>
                    <address>
                        Copyright ©
                        <a href="http://webstoryboy.co.kr"><strong>webstoryboy</strong></a>
                        All Rights Reserved.
                    </address>
                </div>
            </div>
        </div>
    </footer>
    <!-- //footer -->
    
    <!-- JavaScript Libraries -->
    <script src="js/jquery.min_1.12.4.js"></script>
    <script src="js/modernizr-custom.js"></script>
    <script src="js/slick.min.js"></script>
    <script src="js/lightgallery.min.js"></script>
    <script>
        //접기/펼치기
        $(".btn").click(function(e){
            e.preventDefault();
            $(".nav").slideToggle();
            $(".btn").toggleClass("open");
            //var btn = $(".btn").find(">i").attr("class");
            //alert(btn);

            if($(".btn").hasClass("open")){
                //open이 있을 때
                $(".btn").find(">i").attr("class","fa fa-angle-up");
            } else {
                //open이 없을 때
                $(".btn").find(">i").attr("class","fa fa-angle-down");
            }
        });
        
        $(window).resize(function(){
            var wWidth = $(window).width();
            if(wWidth > 600){
                $(".nav").removeAttr("style");
            }
        });
        
        //라이트 박스
        $(".lightbox").lightGallery({
            thumbnail: true,
            autoplay: true,
            pause: 3000,
            progressBar: true
        }); 

        //이미지 슬라이더
        $(".slider").slick({
			dots: true,
			autoplay: true,
			autoplaySpeed: 3000,
			arrows: true,
			responsive: [
			    {
				    breakpoint: 768,
				    settings: {
				        autoplay: false,
			      	}
			    }
			]
		});
        
        //sns 공유하기
        $(".facebook").click(function(e){
            e.preventDefault();
            window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600'); 
        });
        $(".twitter").click(function(e){
            e.preventDefault();
            window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20' +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600');
        });
    </script>
</body>
</html>

























































<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="반응형 사이트 따라하기">
    <meta name="keywords" content="반응형사이트, 웹퍼블리셔, 웹접근성, HTML5, webstoryboy, webs">
    <title>반응형 사이트 만들기 : 사이드 이펙트3</title>

    <!-- style -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/slick.css">
    <link rel="stylesheet" href="css/lightgallery.css">

    <!-- Facebook meta tags -->
    <meta property="og:type" content="article" />
    <meta property="og:title" content="반응형 사이트 만들기(title)" />
    <meta property="og:url" content="http://richclub8.dothome.co.kr/responsive/html5/index.html" />
    <meta property="og:image" content="http://richclub8.dothome.co.kr/assets/ico/icon.png" />
    <meta property="og:site_name" content="반응형 사이트 만들기(site_name)" />
    <meta property="og:description" content="반응형 사이트 따라하기(description)" />

    <!-- twitter meta tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@webstoryboy" />
    <meta name="twitter:title" content="반응형 사이트 만들기(title)" />
    <meta name="twitter:description" content="반응형 사이트 만들기(description)." />
    <meta property="twitter:image" content="http://richclub8.dothome.co.kr/assets/ico/icon.png" />

    <!-- 파비콘 -->
    <link rel="shortcut icon" href="icon/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="icon/favicon-152.png">
    <link rel="icon" href="path/to/favicon.png">
    <link rel="icon" href="icon/favicon-16.png" sizes="16x16"> 
    <link rel="icon" href="icon/favicon-32.png" sizes="32x32"> 
    <link rel="icon" href="icon/favicon-48.png" sizes="48x48"> 
    <link rel="icon" href="icon/favicon-64.png" sizes="64x64"> 
    <link rel="icon" href="icon/favicon-128.png" sizes="128x128">

    <!-- 웹 폰트 -->
    <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">

    <!-- HTLM5shiv ie6~8 -->
    <!--[if lt IE 9]> 
        <script src="js/html5shiv.min.js"></script>
        <script type="text/javascript">
            alert("현재 당신이 보는 브라우저는 지원하지 않습니다. 최신 브라우저로 업데이트해주세요!");
        </script>
    <![endif]-->
</head>
<body>
    
    <header id="header">
        <div class="container">
            <div class="row">
                <div class="header">
                    <div class="header_menu">
                        <a href="http://websedu.tistory.com/">Blog</a>
                        <a href="https://www.facebook.com/webstoryboys">facebook</a>
                        <a href="http://richclub8.dothome.co.kr/webstandard/web/index.html">Webstandard</a>
                    </div>
                    <!-- //header_menu -->
                    <div class="header_tit">
                        <h1>Professional Web Publisher</h1><br>
                        <a href="http://webstoryboy.co.kr">webstoryboy.co.kr</a>
                    </div>
                    <!-- //header_tit -->
                    <div class="header_icon">
                        <ul>
                            <li><a href="#"><i class="fa fa-html5" aria-hidden="true"></i><span>HTML5</span></a></li>
                            <li><a href="#"><i class="fa fa-github" aria-hidden="true"></i><span>GitHub</span></a></li>
                            <li><a href="#" class="facebook"><i class="fa fa-facebook-square" aria-hidden="true"></i><span>Fackbook</span></a></li>
                            <li><a href="#" class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i><span>twitter</span></a></li>
                        </ul>
                    </div>
                    <!-- //header_icon -->
                </div>
            </div>
        </div>
    </header>
    <!-- //nav -->
    
    <nav id="nav">
		<div class="container">
			<div class="row">
				<div class="nav">
					<h2 class="ir_su">전체 메뉴</h2>
					<div>
			            <h3>HTML Reference</h3>
			            <ol>
			                <li><a href="#">HTML 태그(Tag)</a></li>
			                <li><a href="#">블록 요소/인라인 요소</a></li>
			                <li><a href="#">DTD 선언</a></li>
			                <li><a href="#">언어 속성 설정</a></li>
			                <li><a href="#">HTML <title></a></li>
			                <li><a href="#">HTML <meta></a></li>
			                <li><a href="#">특수문자</a></li>
			                <li><a href="#">하이퍼 링크</a></li>
			                <li><a href="#">HTML <style></a></li>
			                <li><a href="#">HTML <html></a></li>
			                <li><a href="#">HTML <head></a></li>
			                <li><a href="#">HTML <div></a></li>
			                <li><a href="#">HTML <colgroup></a></li>
			                <li><a href="#">HTML <caption></a></li>
			            </ol>
			        </div>
			        <div>
			            <h3>CSS Reference</h3>
			            <ol>
			                <li><a href="#">CSS 선택자</a></li>
			                <li><a href="#">CSS 단위</a></li>
			                <li><a href="#">CSS 색상</a></li>
			                <li><a href="#">CSS 선언 방법</a></li>
			                <li><a href="#">상대주소와 절대주소</a></li>
			                <li><a href="#">CSS float</a></li>
			                <li><a href="#">이미지 표현 방법</a></li>
			                <li><a href="#">이미지 스프라이트</a></li>
			                <li><a href="#">IR 효과</a></li>
			                <li><a href="#">이미지 최적화</a></li>
			                <li><a href="#">background-color</a></li>
			                <li><a href="#">border-style</a></li>
			                <li><a href="#">font-size</a></li>
			                <li><a href="#">text-align</a></li>
			            </ol>
			        </div>
			        <div>
			            <h3>Responsive</h3>
			            <ol>
			                <li><a href="#">반응형사이트</a></li>
			                <li><a href="#">미디어쿼리</a></li>
			                <li><a href="#">CSS3</a></li>
			                <li><a href="#">웹 접근성 연구소</a></li>
			                <li><a href="#">네이버 널리</a></li>
			                <li><a href="#">다음 다룸</a></li>
			                <li><a href="#">Webstandard</a></li>
			            </ol>
			        </div>
				</div>
			</div>
		</div>
	</nav>
	<!-- //nav -->
   
    <article id="title">
		<div class="container">
			<div class="title">
				<h2>"나는 퍼블리셔다."</h2>
				<a href="#" class="btn"><i class="fa fa-angle-down" aria-hidden="true"></i><span class="ir_su">전체메뉴 보기</span></a>
			</div>
		</div>
	</article>
	<!-- //title -->
   
    <main>
        <section id="contents">
            <div class="container">
				<h2 class="ir_su">반응형 사이트 컨텐츠</h2>
                <section id="cont_left">
                    <h3 class="ir_su">메뉴 및 게시판 컨텐츠 영역</h3>
                    <article class="column col1">
                        <h4 class="col_tit">Menu</h4>
						<p class="col_desc">Box-shadow를 이용한 마우스 오버 효과 메뉴입니다.</p>
						<!-- 메뉴 -->
						<div class="menu">
							<ul>
								<li><a href="#">Cafe <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
								<li><a href="#">Tutorial <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
								<li><a href="#">WebSite <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
								<li><a href="#">Reference <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
								<li><a href="#">CSS3 <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
								<li><a href="#">HTML5 <i class="fa fa-angle-double-right" aria-hidden="true"></i></a></li>
							</ul>
						</div>
						<!--//메뉴 -->
                    </article>
                    <!-- //col1 -->
                    
                    <article class="column col2">
						<h4 class="col_tit">Notice</h4>
						<p class="col_desc">게시판 영역의 한줄 효과와 두줄 효과 게시판입니다.</p>
						<!-- 게시판 -->
						<div class="notice1">
							<h5>Notice1</h5>
							<ul>
								<li><a href="#">이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
								<li><a href="#">이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
								<li><a href="#">이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
								<li><a href="#">이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
							</ul>
							<a href="#" class="more" title="더 보기">More <i class="fa fa-plus-circle" aria-hidden="true"></i></a>
						</div>
						<!--//게시판 -->
						<!-- 게시판2 -->
						<div class="notice2 mt15">
							<h5>Notice2</h5>
							<ul>
								<li><a href="#">이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
								<li><a href="#">이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
								<li><a href="#">이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
								<li><a href="#">이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 두줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다. 이 줄은 한줄 효과입니다.</a></li>
							</ul>
							<a href="#" class="more" title="더 보기">More <i class="fa fa-plus-circle" aria-hidden="true"></i></a>
						</div>
						<!--//게시판2 -->
					</article>
					<!-- //col2 -->
                    
                    <article class="column col3">
						<h4 class="col_tit">Blog</h4>
						<p class="col_desc">해상도에 따라 이미지를 다르게 표현하는 방법입니다.</p>
						<!-- blog -->
						<div class="blog1">
							<h5 class="ir_su">Image1</h5>
							<figure>
                                <img src="img/blog4_@1.jpg" class="img-normal" alt="normal image">
                                <img src="img/blog4_@2.jpg" class="img-retina" alt="retina image">
                                <figcaption>반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다.</figcaption>
							</figure>
						</div>
						<!--//blog -->
						<!-- blog2 -->
						<div class="blog2 mt15">
							<div class="img-retina">
							    <h5>Image2</h5>
							</div>
                            <p>반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다.</p>
						</div>
						<!--//blog2 -->
					</article>
					<!-- //col3 -->
                </section>
                <!-- //cont_left -->
                
                <section id="cont_center">
                    <h3 class="ir_su">반응형 사이트 가운데 컨텐츠</h3>
                    <article class="column col4">
                        <h4 class="col_tit">Slick Slider</h4>
						<p class="col_desc">slick.js를 이용한 이미지 슬라이드 효과입니다.</p>
						<!-- 이미지 슬라이드 -->
						<div class="slider">
							<div>
                                <figure>
                                    <img src="img/slider001.jpg" alt="이미지1">
                                    <figcaption><em>Responsive Site</em><span>슬라이드 플러그인을 이용한 반응형 이미지 슬라이드 입니다.</span></figcaption>
                                </figure>
				            </div>
							<div>
                                <figure>
                                    <img src="img/slider001.jpg" alt="이미지2">
                                    <figcaption><em>Responsive Site</em><span>슬라이드 플러그인을 이용한 반응형 이미지 슬라이드 입니다.</span></figcaption>
                                </figure>
				            </div>
				            <div>
                                <figure>
                                    <img src="img/slider001.jpg" alt="이미지3">
                                    <figcaption><em>Responsive Site</em><span>슬라이드 플러그인을 이용한 반응형 이미지 슬라이드 입니다.</span></figcaption>
                                </figure>
				            </div>
						</div>
						<!--//이미지 슬라이드 -->
                    </article>
                    <!-- //col4 -->
                    
                    <article class="column col5">
                        <h4 class="col_tit">Filter Effect</h4>
						<p class="col_desc">CSS3에서는 Background-blend-mode, mix-blend-mode, filter와 같이 포토샵에 다루는 효과들이 있습니다.</p>
						<!-- lightbox -->
						<div class="lightbox square clearfix">
							<a href="img/light01_s.jpg"><img src="img/light01.jpg" alt="이미지"><em>blur</em></a>
							<a href="img/light02_s.jpg"><img src="img/light02.jpg" alt="이미지"><em>brightness</em></a>
							<a href="img/light03_s.jpg"><img src="img/light03.jpg" alt="이미지"><em>contrast</em></a>
							<a href="img/light04_s.jpg"><img src="img/light04.jpg" alt="이미지"><em>grayscale</em></a>
							<a href="img/light05_s.jpg"><img src="img/light05.jpg" alt="이미지"><em>hue-rotate</em></a>
							<a href="img/light06_s.jpg"><img src="img/light06.jpg" alt="이미지"><em>invert</em></a>
							<a href="img/light07_s.jpg"><img src="img/light07.jpg" alt="이미지"><em>opacity</em></a>
							<a href="img/light08_s.jpg"><img src="img/light08.jpg" alt="이미지"><em>saturate</em></a>
							<a href="img/light09_s.jpg"><img src="img/light09.jpg" alt="이미지"><em>sepia</em></a>
							<a href="img/light10_s.jpg"><img src="img/light10.jpg" alt="이미지"><em>Mix</em></a>
						</div>
						<!--//lightbox -->
                    </article>
                    <!-- //col5 -->
                    
                    <article class="column col6">
						<h4 class="col_tit">Video</h4>
						<p class="col_desc">영상을 보여주는 영역입니다.</p>
						<!-- video -->
						<!-- <video autoplay="autoplay" controls="controls" loop="loop">
							<source src="img/video.mp4" type="video/mp4">
						</video> -->
						<div class="video">
							<iframe src="https://www.youtube.com/embed/tHy498wdPaA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
						</div>
						<!--//video -->
					</article>
					<!-- //col6 -->
                </section>
                <!-- //cont_center -->
                <section id="cont_right">
                    <h3 class="ir_su">반응형 사이트 오른쪽 컨텐츠</h3>
                    <article class="column col7">
                        <h4 class="col_tit">Effect1</h4>
						<p class="col_desc">CSS3의 transform을 이용한 마우스 오버효과입니다.</p>
						<!-- side1 -->
						<div class="side1">
                            <figure class="front">
                                <img src="img/side1.jpg" alt="이미지2">
                            </figure>
                            <div class="back">
                                <i class="fa fa-heart fa-4x" aria-hidden="true"></i>
                            </div>
                        </div>
                        <!-- side1//-->
                    </article>
                    <!-- //col7 -->
                    
                    <article class="column col8">
                        <h4 class="col_tit">Effect2</h4>
						<p class="col_desc">CSS3의 transform을 이용한 마우스 오버효과입니다.</p>
						<!-- side2 -->
						<div class="side2">
                            <figure class="front">
                                <img src="img/side2.jpg" alt="이미지2">
                                <figcaption>
                                    <h3>Hover Effect</h3>
                                </figcaption>
                            </figure >
                            <figure class="back">
                                <img src="img/side4.jpg" alt="이미지2">
                                <figcaption>
                                    <h3>Hover Effect</h3>
                                </figcaption>
                            </figure>
                        </div>
                        <!-- side2//-->
                    </article>
                    <!-- //col8 -->
                    
                    <article class="column col9">
                        <h4 class="col_tit">Effect3</h4>
						<p class="col_desc">CSS3의 transform을 이용한 마우스 오버효과입니다.</p>
						<!-- side3 -->
						<div class="side3">
                            <figure>
                                <img src="img/side3.jpg" alt="이미지3">
                                <figcaption>
                                    <h3>Hover<em>Effect</em></h3>
                                </figcaption>
                            </figure>
                        </div>
                        <!-- side3//-->
                    </article>
                    <!-- //col9 -->
                </section>
                <!-- //cont_right -->
            </div>
        </section>
        <!-- //contents -->
    </main>
    
    <footer id="footer">
        <div class="container">
            <div class="row">
                <div class="footer">
                    <ul>
                        <li><a href="#">사이트 도움말</a></li>
                        <li><a href="#">사이트 이용약관</a></li>
                        <li><a href="#">사이트 운영원칙</a></li>
                        <li><a href="#"><strong>개인정보취급방침</strong></a></li>
                        <li><a href="#">책임의 한계와 법적고지</a></li>
                        <li><a href="#">게시중단요청서비스</a></li>
                        <li><a href="#">고객센터</a></li>
                    </ul>
                    <address>
                        Copyright ©
                        <a href="http://webstoryboy.co.kr"><strong>webstoryboy</strong></a>
                        All Rights Reserved.
                    </address>
                </div>
            </div>
        </div>
    </footer>
    <!-- //footer -->
    
    <!-- JavaScript Libraries -->
    <script src="js/jquery.min_1.12.4.js"></script>
    <script src="js/modernizr-custom.js"></script>
    <script src="js/slick.min.js"></script>
    <script src="js/lightgallery.min.js"></script>
    <script>
        //접기/펼치기
        $(".btn").click(function(e){
            e.preventDefault();
            $(".nav").slideToggle();
            $(".btn").toggleClass("open");
            //var btn = $(".btn").find(">i").attr("class");
            //alert(btn);

            if($(".btn").hasClass("open")){
                //open이 있을 때
                $(".btn").find(">i").attr("class","fa fa-angle-up");
            } else {
                //open이 없을 때
                $(".btn").find(">i").attr("class","fa fa-angle-down");
            }
        });
        
        $(window).resize(function(){
            var wWidth = $(window).width();
            if(wWidth > 600){
                $(".nav").removeAttr("style");
            }
        });
        
        //라이트 박스
        $(".lightbox").lightGallery({
            thumbnail: true,
            autoplay: true,
            pause: 3000,
            progressBar: true
        }); 

        //이미지 슬라이더
        $(".slider").slick({
			dots: true,
			autoplay: true,
			autoplaySpeed: 3000,
			arrows: true,
			responsive: [
			    {
				    breakpoint: 768,
				    settings: {
				        autoplay: false,
			      	}
			    }
			]
		});
        
        //sns 공유하기
        $(".facebook").click(function(e){
            e.preventDefault();
            window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600'); 
        });
        $(".twitter").click(function(e){
            e.preventDefault();
            window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20' +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600');
        });
    </script>
</body>
</html>























































































/* 레이아웃 */
body {background: url(img/header_bg.jpg) repeat-x center top;}
#header {  }
#nav {background-color: #f6fdff;}
#title {background-color: #eaf7fd;}
#contents .container {border-right: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb;}
#cont_left {float: left; width: 250px;}
#cont_center {
    overflow: hidden; 
    margin-right: 250px; 
    min-height: 1300px; 
    border-right: 1px solid #dbdbdb;
    border-left: 1px solid #dbdbdb;
}
#cont_right {position: absolute; right: 0; top: 0px; width: 250px;}
#footer {border-top: 1px solid #dbdbdb;}

/* 컨테이너 */
.container {position: relative; width: 1200px; margin: 0 auto; /* background: rgba(0,0,0,0.3) */}

/* 헤더 */
.header {height: 327px;}
.header .header_menu {text-align: right;}
.header .header_menu a {color: #fff; padding: 8px 0 6px 10px; display: inline-block; transition: color 0.3s ease; font-family: 'Abel', sans-serif;}
.header .header_menu a:hover {color: #ccc;}

.header .header_tit { text-align: center; text-transform: uppercase; margin-top: 55px; font-family: 'Abel', sans-serif;}
.header .header_tit h1 {
    font-size: 30px; 
    color: #fff; 
    background: #51b0dc; 
    display: inline-block; 
    padding: 5px 30px 5px 30px; 
    letter-spacing: 2px; 
    font-weight: 900;
    transition: box-shadow 0.25s ease-in-out;
}
.header .header_tit h1:hover {
    box-shadow: 
        inset -9em 0 0 0 #257FAC, 
        inset 9em 0 0 0 #257FAC;
}
.header .header_tit a {
    font-size: 16px; 
    color: #fff; 
    background: #4a9abf;  
    display: inline-block; 
    padding: 10px 20px 10px 20px; 
    margin-top: -7px; 
    transition: box-shadow 0.3s ease-in-out;
}
.header .header_tit a:hover {
    box-shadow: 
        0 0 0 5px rgba(75,154,191,0.9) inset,
        0 0 0 100px rgba(0,0,0,0.1) inset;
}

.header .header_icon {text-align: center; margin-top: 40px; padding-bottom: 45px;}
.header .header_icon li {display: inline; margin: 0 2px;}
.header .header_icon li a {
    position: relative;
    background-color: #3192bf;
    border-radius: 50%;
    width: 60px; 
    height: 60px;  
    color: #fff;
    display: inline-block;
    font-size: 35px;
    line-height: 60px;
    transition: all 0.3s ease;
}
.header .header_icon li a span {
    position: absolute; 
    opacity: 0;
    left: 50%; top: -40px;
    transform: translateX(-50%);
    font-size: 12px;
    line-height: 1.6;
    background: #3192bf; 
    padding: 3px 9px;
    border-radius: 6px 0;
    transition: all 0.3s ease;
}
.header .header_icon li a span:before {
    content: '';
    position: absolute;
    left: 50%; bottom: -5px;
    margin-left: -5px;
    border-top: 5px solid #3192bf;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.header .header_icon li a:hover span {
    opacity: 1;
    top: -33px;
}
.header .header_icon li a:hover {
    box-shadow: 
        0 0 0 3px rgba(75,154,191,0.9) inset,
        0 0 0 100px rgba(0,0,0,0.1) inset;
}

/* 전체 메뉴 */
.nav {overflow: hidden; padding: 25px 0; display: none;}
.nav > div {float: left; width: 40%;}
.nav > div:last-child {width: 20%;}
.nav > div ol {overflow: hidden;}
.nav > div li {float: left; width: 50%; position: relative; padding-left: 8px; box-sizing: border-box;}
.nav > div:last-child li {width: 100%;}
.nav > div li a {position: relative;}
.nav > div li:before {
    content: '';
    width: 3px; height: 3px;
    background-color: #25a2d0;
    border-radius: 50%;
    position: absolute; left: 0; top: 8px;
}
.nav > div h3 {
    font-size: 18px; 
    color: #25a2d0; 
    font-weight: bold; 
    margin-bottom: 4px;
}
.nav > div li a:after {
    content: '';
    display: inline-block;
    width: 0;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #25a2d0;
    transition: all .2s ease-out;
}
.nav > div li:hover a:after {width: 100%;}

/* 타이틀 */
.title {position: relative; text-align: center; }
.title h2 {font-family: 'Nanum Brush Script', cursive; font-size: 39px; color: #0093bd; padding: 5px 0;}
.title .btn {
    position: absolute; right: 0; top: 5px;
    width: 60px; 
    height: 60px; 
    line-height: 60px; 
    background: #3192bf; 
    color: #fff;
    font-size: 35px; 
    border-radius: 50%;
    transition: all 0.3s ease;
}
.title .btn:hover {
    box-shadow: 
        0 0 0 3px rgba(75,154,191,0.9) inset,
        0 0 0 100px rgba(0,0,0,0.1) inset;
}

/* 컨텐츠 영역 */
.column {padding: 15px; border-bottom: 1px solid #dbdbdb;}
.column .col_tit {font-size: 20px; color: #2f7fa6; padding-bottom: 5px;}
.column .col_desc {
    border-bottom: 1px dashed #dbdbdb; 
    padding-bottom: 15px; margin-bottom: 15px;  
    color: #878787;
    line-height: 18px;
}
.column.col1 {} 
.column.col2 {} 
.column.col3 {border-bottom: 0;} 
.column.col4 {} 
.column.col5 {} 
.column.col6 {border-bottom: 0;} 
.column.col7 {} 
.column.col8 {} 
.column.col9 {border-bottom: 0;} 

/* 메뉴 */
.menu li {position: relative;}
.menu li a {
    font-size: 16px; text-transform: uppercase; 
    color: #878787; border-bottom: 1px solid #dbdbdb; 
    padding: 10px; 
    display: block;  
    transition: box-shadow 0.34s ease, background 0.34s ease;
}
.menu li a i {position: absolute; right: 10px; top: 15px;}
.menu li a:hover {
    box-shadow: inset 180px 0 0 0 rgba(36,130,174,0.7); 
    color: #fff; 
    background: rgba(36,130,174,0.9);
}

/* 게시판1 */
.notice1 {position: relative;  }
.notice1 h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 5px;}
.notice1 li {position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px;}
.notice1 li:before {
    content: ''; width: 3px; height: 3px; 
    border-radius: 50%;
    background: #449ce2; 
    position: absolute; left: 0; top: 6px;
}
.notice1 .more {
    position: absolute; 
    right: 0; top: 3px; 
    color: #878787; 
    text-transform: uppercase;
    font-size: 10px;
}

/* 게시판2 */
.notice2 {position: relative;  }
.notice2 h5 {font-size: 14px; color: #2f7fa6; padding-bottom: 5px;}
.notice2 li {
    position: relative; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp : 2;
    padding-left: 8px;
    padding-bottom: 5px;
    max-height: 40px; /* ie */
}
.notice2 li:before {
    content: ''; width: 3px; height: 3px; 
    border-radius: 50%;
    background: #449ce2; 
    position: absolute; left: 0; top: 6px;
}
.notice2 .more {
    position: absolute; 
    right: 0; top: 3px; 
    color: #878787; 
    text-transform: uppercase;
    font-size: 10px;
}

/* 블로그1 */
.blog1 img {width: 100%;}
.blog1 .img-retina {display: none;}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 1.5dppx) {
        .blog1 .img-retina {display: initial;}
        .blog1 .img-normal {display: none;}
}

/* 블로그2 */
.blog2 h5 {color: #fff; text-align: center; padding: 30px 30px; text-transform: uppercase;}
.blog2 p {padding-top: 5px;}
.blog2 .img-retina {
    background-image: url(img/blog3_@1.jpg);
    background-size: cover;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 1.5dppx) {
        .blog2 .img-retina {background-image: url(img/blog3_@2.jpg);}
}

/* 이미지 슬라이드 */
.slider figure {position: relative;}
.slider figcaption {position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 18px;
}
.slider figcaption em {
    display: block; 
    font-weight: bold; font-size: 28px; text-transform: uppercase; font-family: 'Abel', sans-serif;
    opacity: 0;
    transform: translateX(50px);
    transition: all .84s ease;
}
.slider figcaption span {
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    opacity: 0;
    transform: translateX(50px);
    transition: all .84s 0.2s ease;
}
.slider .slick-active figcaption em {opacity: 1; transform: translateX(0)}
.slider .slick-active figcaption span {opacity: 1; transform: translateX(0)}

.slider .slick-dots {display: block; width: 100%; text-align: center;}
.slider .slick-dots li {display: inline-block; width: 15px; height: 15px; margin: 5px;}
.slider .slick-dots li button {
    font-size: 0; 
    line-height: 0; 
    display: block; 
    width: 15px; height: 15px;
    cursor: pointer; 
    background: #5dbfeb; 
    border-radius: 50%;
}
.slider .slick-dots li.slick-active button {background: #2b91c8;}
.slider .slick-prev {
    position: absolute; left: 0; bottom: 0; 
    z-index: 1000;
    width: 30px; height: 30px; 
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    text-indent: -9999px;
}
.slider .slick-prev::before {
    content: "\f053";
    color: #5dbfeb;
    text-indent: 0;
    position: absolute; left: 9px; top: 8px;
}
.slider .slick-next {
    position: absolute; right: 0; bottom: 0; 
    z-index: 1000;
    width: 30px; height: 30px; 
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    text-indent: -9999px;
}
.slider .slick-next::before {
    content: "\f054";
    color: #5dbfeb;
    text-indent: 0;
    position: absolute; left: 11px; top: 8px;
}

/* 라이트 박스 */
.square a {float: left; width: 19%; margin: 0.5%; position: relative; overflow: hidden;  }
.square a img {width: 100%; display: block;}
.square a em {background: rgba(0,0,0,0.77); color: #fff; width: 100%; text-align: center; position: absolute; left:0; bottom: -30px; opacity: 1; transition: all .3s ease;}
.square a:hover em {bottom: 0; background: rgba(0,0,0,0.57); }
.square a:nth-child(1):hover img {filter: blur(2px);}
.square a:nth-child(2):hover img {filter: brightness(50%);}
.square a:nth-child(3):hover img {filter: contrast(10%);}
.square a:nth-child(4):hover img {filter: grayscale(100%);}
.square a:nth-child(5):hover img {filter: hue-rotate(120deg);}
.square a:nth-child(6):hover img {filter: invert(100%);}
.square a:nth-child(7):hover img {filter: opacity(10%);}
.square a:nth-child(8):hover img {filter: saturate(10%);}
.square a:nth-child(9):hover img {filter: sepia(120%);}
.square a:nth-child(10):hover img {filter: sepia(120%) hue-rotate(120deg);}

/* 비디오 */
.video {position: relative; width: 100%; padding-bottom: 56.25%;}
.video iframe {position: absolute; width: 100%; height: 100%;}

/* 푸터 */
.footer {text-align: center; padding: 30px 50px; }
.footer li {position: relative; display: inline; padding: 0 7px 0 10px; white-space: nowrap;}
.footer li:before {content: ''; width: 1px; height: 12px; background-color: #dbdbdb; position: absolute; left: 0; top: 2px;}
.footer li:first-child:before {width: 0;}
.footer address {padding-top: 15px;}

/* 사이드 이펙트1 */
.side1 {position: relative; display: block; perspective: 600px;}
.side1 .front {
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: all 0.5s ease-in-out;
    backface-visibility: hidden;
}
.side1 .back {
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%; z-index: -1;
    transform-style: preserve-3d;
    color: #fff;
    background: #4038DC;
    text-align: center;
    transform: rotateY(-180deg);
    transition: all 0.5s ease-in-out;
    backface-visibility: hidden;
}
.side1 .back i {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.side1:hover .front {transform: rotateY(180deg);}
.side1:hover .back {transform: rotateY(0deg); z-index: 1;}

/* 사이드 이펙트2 */
.side2 {position: relative; display: block; perspective: 600px;}
.side2 .front {
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: all 0.5s ease-in-out;
    backface-visibility: hidden;
}
.side2 .back {
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%; z-index: -1;
    transform-style: preserve-3d;
    transform: rotateY(-180deg);
    transition: all 0.5s ease-in-out;
    backface-visibility: hidden;
}
.side2 .front figcaption {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%,-50%) translateZ(100px);
    display: block;
    text-align: center;
}
.side2 .back figcaption {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%,-50%) translateZ(100px);
    color: #fff;
    font-size: 20px;
    display: block;
    text-align: center;
}
.side2 figcaption {width: 60%;}
.side2 figcaption h3 {color: #fff; font-size: 20px; font-family: 'Abel', sans-serif; font-weight: bold; background: rgba(0,0,0,0.4); padding: 3px 10px;}
.side2 figcaption p {font-size: 14px;}
.side2:hover .front {transform: rotateY(180deg);}
.side2:hover .back {transform: rotateY(0deg); z-index: 1;}

/* 사이드 이펙트3 */
.side3 {position: relative; overflow: hidden; background: #000;}
.side3 figcaption {
    position: absolute;
    top: 50%; left: 50%;
    color: #fff;
    text-align: center;
    opacity: 0;
    text-transform: uppercase;
    transition: all 0.3s ease;
    transform: translate(350%, -50%) rotate(180deg);
}
.side3 figcaption:after {
    content: '';
    width: 100px; height: 100px; 
    background: #000; 
    border-radius: 50%;
    position: absolute; left: 50%; top: 50%; z-index: -1;
    transform: translate(-50%, -50%);
}
.side3 figcaption h3 {font-size: 16px;}
.side3 figcaption em {display: block; font-weight: bold;}
.side3 img {display: block; transition: all 0.3s ease;}
.side3:hover img {opacity: 0.4;}
.side3:hover figcaption {transform: translate(-50%, -50%) rotate(0deg); opacity: 1;}


/* mediaquery */
/* 화면 너비 0~1220px */
@media (max-width: 1220px){
    .container {width: 100%;}
    .row {padding: 0 15px;}
    #cont_center {min-height: 1350px;}
    #contents .container {border: 0;}

    .title .btn {right: 15px;}
    .square a {width: 24%}
    .square a:nth-child(5n) {display: none;}
}

/* 화면 너비 0~1024px */
@media (max-width: 1024px){
    .square a {width: 32.33333%}
    .square a:nth-child(5) {display: block;}
}

/* 화면 너비 0~960px */
@media (max-width: 960px){
    #cont_right {position: static; width: 100%; border-top: 1px solid #dbdbdb;}
    #cont_center {margin-right: 0; border-right: 0;}

    .nav > div {float: none; width: 100%;}
    .nav > div:last-child {width: 100%;}
    .nav > div li {width: 33.333%;}
    .nav > div:last-child li {width: 33.333%;}
    .nav > div ol {margin-bottom: 10px;}

    #cont_right {overflow: hidden;}
    #cont_right .column {float: left; width: 33.333%; box-sizing: border-box;}
    #cont_right .column.col7 {border-right: 1px solid #dbdbdb; border-bottom: 0;}
    #cont_right .column.col8 {border-right: 1px solid #dbdbdb; border-bottom: 0;}
}

/* 화면 너비 0~768px */
@media (max-width: 768px){
    #cont_left {float: none; width: 100%;}
    #cont_center {border-left: 0;}
}

/* 화면 너비 0~600px */
@media (max-width: 600px){
    .header {height: auto;}
    .nav > div li {width: 50%;}
    .nav > div:last-child li {width: 50%;}

    .header .header_tit {display: none;}
    .header .header_icon {display: none;}
    .title .btn {display: none;}
    .column.col1 .col_tit {display: none;}
    .column.col1 .col_desc {display: none;}
    .column.col1 .menu li a i {display: none;}
    .column.col1 {padding: 0; border-bottom: 0;}
    .column.col1 .menu ul {overflow: hidden;}
    .column.col1 .menu li {float: left; width: 33.33333%; text-align: center; border-right: 1px solid #dbdbdb; box-sizing: border-box;}
    .column.col1 .menu li:nth-child(3n) {border-right: 0;}
    .column.col1 .menu li a {color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.7);}
    .column.col1 .menu li a:hover {box-shadow: none; background: rgba(36,130,174,0.3);}
    .column.col2 {background: #fff;}
    .column.col4 {border-top: 1px solid #dbdbdb;}

    #cont_right .column {width:50%;}
    #cont_right .column.col8 {border-right: 0;}
    #cont_right .column.col9 {display: none;}

    .slider figcaption {padding: 10px;}
    .slider figcaption em {font-size: 18px;}
    .slider figcaption span {font-size: 14px;}

    .square a {width: 49%}
    .square a:nth-child(5) {display: none;}
}

/* 화면 너비 0~480px */
@media (max-width: 480px){

}

/* 화면 너비 0~320px */
@media (max-width: 320px){
    #cont_right .column {width:100%;}
    #cont_right .column.col7 {border-right: 0; border-bottom: 1px solid #dbdbdb;}
    .square a {width: 100%; margin-left:0; margin-right: 0;}
}







/* 여백 초기화 */
body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,th,td,tr,textarea,button,form,figure,figcaption{margin:0;padding:0;}

/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #2698cb;}

/* 폰트 초기화 */
body, input, textarea, select, button, table {font-family:  'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.6;}

/* 폰트 스타일 초기화 */
em,address {font-style: normal;}

/* 블릿기호 초기화 */
ul,li,ol {list-style: none;}

/* 제목 태그 초기화 */
h1,h2,h3,h4,h5,h6 {font-size: 13px; font-weight: normal;}

/* 버튼 초기화 */
button {border: 0;}

/* 반응형 */
img {width: 100%;}

/* clearfix */
.clearfix{*zoom:1;}
.clearfix:before, .clearfix:after {display: block; content: '';line-height: 0;}
.clearfix:after {clear: both;}

/* IR 효과 */
.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
.ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
.ir_su {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */

/* margin, padding */
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}




































//접기/펼치기
$(".btn").click(function(e){
    e.preventDefault();
    $(".nav").slideToggle();
    $(".btn").toggleClass("open");
    //var btn = $(".btn").find(">i").attr("class");
    //alert(btn);

    if($(".btn").hasClass("open")){
        //open이 있을 때
        $(".btn").find(">i").attr("class","fa fa-angle-up");
    } else {
        //open이 없을 때
        $(".btn").find(">i").attr("class","fa fa-angle-down");
    }
});

$(window).resize(function(){
    var wWidth = $(window).width();
    if(wWidth > 600){
        $(".nav").removeAttr("style");
    }
});

//라이트박스
$(".lightbox").lightGallery({
    thumbnail: true,
    autoplay: true,
    pause: 3000,
    progressBar: true
}); 

//이미지 슬라이더
$(".slider").slick({
    dots: true,
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: false,
    responsive: [
        {
            breakpoint: 768,
            settings: {
                arrows: true,
                dots: false
            }
        }
    ]
});
//http://www.facebook.com/sharer.php?u={페이지 제목}&t={페이지링크}
//http://twitter.com/intent/tweet?text={페이지 제목}&url={페이지링크}
//https://share.naver.com/web/shareView.nhn?url={페이지링크}&title={페이지 제목}
//https://plus.google.com/share?url={페이지링크}&t={페이지 제목}
$(".facebook").click(function(e){
    e.preventDefault();
    window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600'); 
});
$(".twitter").click(function(e){
    e.preventDefault();
    window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20' +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600');
});



































tags

  • KKS 2019.02.22 21:05 댓글주소 수정/삭제 댓글쓰기

    http://practice001.dothome.co.kr/responsive/html5/index.html#
    완강하였습니다^^ 항상 좋은 강의영상 감사합니다~~

  • 유토피아 2019.02.27 15:30 댓글주소 수정/삭제 댓글쓰기

    시작한지 초반인데 처음부터 막히네요. 질문드립니다.
    http://utopiaonline.dothome.co.kr/responsive/html5_3/index.html
    위에 홈페이지는 index.html 하고 style.css 만 만들어서 적용시킨거구요.
    안에 a태그만 넣고 css로 마우스 오버 효과만 주어서 transition을 넣은겁니다.(그거밖엔 아무것도 적용시키지 않았습니다.)
    물론 transition은 잘 작동합니다.
    헌데 문제는 크롬에서 새로고침(혹은 강력새로고침)을 하게돼면 a태그의 크롬 기본셋팅내용부터 css파일로 제가 적용해 놓은 a태그의 설정까지가 transiton이 자동으로 실행된다는 겁니다.
    예를 들어서 제가 css파일에 다음처럼
    a{color : red; transition: all 1s ease-in-out;}
    a:hover{color:yellow;}
    라고 해놨다면 마우스 오버했을때의 노란색은 잘 작동하는데
    문제는 새로고침 할시 자동으로 브라우저 기본셋팅색인 a태그의 파랑색에서 제가 설정해 놓은 빨강색으로 의 변화가 자동 실행 됀다는 겁니다.
    아마 transition을 걸어 놨더니 기본셋팅색인 파랑색에서 제가 설정해놓은 빨강색으로의 변화에까지 transition이 적용돼서 자동실행돼는거 같습니다.
    여러 방법을 시도해놨는데 index.html 의 head 영역 안에 <script></script> 경로 아무거나 하나만 넣어줘도 저런 현상이 안일어 나는거 같던데..
    이게 원래 이런건지 제가 무언가 안한게 있는지 알고 싶어서 질문드립니다.
    꼭 답변좀 부탁드립니다.

    아. 그리고 정말 강좌 잘 보고 있습니다. 항상 감사드립니다.

    • 안녕하세요^^
      유추하신게 맞습니다. 기본 값에서 설정한 값으로 변경되서 그런 현상이 생깁니다.
      그래서 실제 사이트를 만들때는 reset.css를 만들어서 처음부터 폰트 사이즈나 기본 색을 셋팅해 놓고 시작합니다. 그런 부분이 안되어 있어서 그런거 같습니다. 다시 한번 확인 바랍니다.

  • 유토피아 2019.03.04 16:51 댓글주소 수정/삭제 댓글쓰기

    2번째 만들어 보는 거네요. 완성했습니다.
    http://utopiaonline.dothome.co.kr/responsive/html5/index.html
    항상 좋은 강의 잘 보고 있습니다.

  • 유토피아 2019.03.12 16:18 댓글주소 수정/삭제 댓글쓰기

    질문있습니다.
    이거 완성하고 주소복사해서 카카오톡에 채팅으로 공유를 했는데 밑에 이미지같은게 뜨면서 그 아래에 "반응형 사이트 따라하기" 라는 글자가 뜨네요.
    제가 저런건 입력한데가 없거든요. 저게 어디서 출력돼고 있는건지를 모르겠는데 혹시 아시면 답변좀 부탁드립니다.
    도저히 찾을수가 없네요.

    • ㅋㅏ톡에서 메세지와 그림이 뜨는건 카톡 메신저에 그렇게 프로그램 되어 있기 때문에 그렇습니다. 우리가 만든 사이트의 대표 이미지와 타이틀을 가지고 와서 표현하는 것입니다.

  • 마지막 동영상이 사라졌습니다.
    정말 잘따라하고 있었는데...아쉽네요 ㅠㅠ
    http://homely-store.co.kr/ 반응형 따라했는데 마지막 빼고 다했고

    웹표준으로 만든 것은 제가 취미로 활동하는 운동 협회 홈페이지를 만들어 봤는데 친구의 도움을 받아서 서버를 입혔더라구 하더라구요 이제 배운지 1달 되어가는데 정말 재미있는 것 같습니다. 좋은 강의 만들어주셔서 감사합니다. 궁금하실까봐 주소 올려볼게요
    http://www.daejeonfloorball.com/

    • ㅎㅎ 응용력이 좋으시네요~ 첨 보고 이렇게 까지 하긴 힘든데.. 이제 하나씩 더 배우시면 더 실제같은 사이트를 만들 수 있을거 같습니다.

  • 완강했습니다. 혹시 실제로도 강의 하시나요?

  • 비밀댓글입니다

  • 비밀댓글입니다

    • 웹퍼블리셔 강의를 생각중이라면 사실 커리큘럼은 거의 다 똑같습니다. 차이가 없어요~
      https://cafe.naver.com/crossbrowsing
      이 사이트에서 학원의 브랜드보다는 어떤 선생한테 배우는게 중요합니다. 저기서 한번 참고해보세요~

  • rodi 2019.06.25 01:42 댓글주소 수정/삭제 댓글쓰기

    덕분에 반응형에 대한 이해가 높아졌습니다. 좋은 강의 감사합니다.