HTML
CSS
JS
RESET
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="YangAReum">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<meta name="description" content="반응형 사이트 따라하기">
<meta name="keywords" content="반응형사이트, 웹퍼블리셔, 웹접근성, HTML5">
<title>반응형 사이트 만들기</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" type="text/css" href="css/lightgallery.css">
<!-- Facebook meta tags -->
<meta property="og:type" content="HTML5">
<meta property="og:title" content="반응형 사이트 만들기">
<meta property="og:url" content="mm2800.dothome.co.kr">
<meta property="og:image" content="mm2800.dothome.co.kr">
<meta property="og:site_name" content="반응형 사이트 만들기">
<meta property="og:description" content="반응형 사이트 따라하기">
<!-- twitter meta tags -->
<meta property="twitter:card" content="HTML5">
<meta property="twitter:site" content="@1xx_ar">
<meta property="twitter:title" content="반응형 사이트">
<meta property="twitter:description" content="반응형 사이트 만들기">
<!-- 파비콘 -->
<link rel="shortcut icon" href="icon/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="favicon-152.png">
<link rel="shortcut icon" href="icon/favicon.ico">
<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=Patua+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Viga" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.css">
<link href="https://fonts.googleapis.com/css?family=Do+Hyeon" rel="stylesheet">
<!-- HTML5shiv ie8, ie7, ie6 -->
<!--[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="https://yangareum.tistory.com/">Blog</a>
<a href="https://instagram.com/1xx_ar?utm_source=ig_profile_share&igshid=1l5z5epv87aiu">instagram</a>
<a href="http://mm2800.dothome.co.kr/">webstandard</a>
</div>
<!-- header_menu -->
<div class="header_tit">
<h1>Professional Web Publisher</h1><br>
<a href="http://mm2800.dothome.co.kr/">mm2800.co.kr</a>
</div>
<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-facebook" aria-hidden="true"></i><span>Facebook</span></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i><span>Instagram</span></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i><span>twitter</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<!-- //header -->
<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 <title></a></li>
<li><a href="#">HTML <div></a></li>
<li><a href="#">HTML <colgroup></a></li>
<li><a href="#">HTML <caption></a></li>
<li><a href="#">HTML</a><head></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</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">border-style</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="#">파스타 먹자</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-bars" aria-hidden="true"></i>
<span class="ir_su">전체 메뉴 보기</span></a>
</div>
</div>
</article>
<!-- //article -->
<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-chevron-circle-right" aria-hidden="true"></i></a></li>
<li><a href="#">Tutorial<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></li>
<li><a href="#">WebSite<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></li>
<li><a href="#">Reference<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></li>
<li><a href="#">CSS3<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></li>
<li><a href="#">HTML5<i class="fa fa-chevron-circle-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">
<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">Title</h4>
<p class="col_desc">웹 반응형 사이트 영역의 제목 설명 부분입니다.</p>
<!-- blog1 -->
<div class="blog1">
<h5>반응형 웹 페이지1</h5>
<figure>
<a href="#"><img src="img/blog1_@2.jpg" alt=""></a>
<figcaption>
반응형 페이지 웹사이트 글입니다. 반응형 페이지 웹사이트 글입니다.반응형 페이지 웹사이트 글입니다.반응형 페이지 웹사이트 글입니다.
</figcaption>
</figure>
</div>
<!-- //blog1 -->
<!-- blog2 -->
<div class="blog2">
<h5>반응형 웹 페이지2</h5>
<figure>
<a href="#"><img src="img/blog1_@2.jpg"></a>
<figcaption>반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다.</figcaption>
</figure>
</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 Plugin</h4>
<p class="col_desc">슬릭 플러그인을 이용한 이미지 슬라이더 예제입니다.</p>
<!-- 이미지 슬라이드 -->
<div class="slider">
<div><img src="img/slider01.jpg" alt="이미지1"></div>
<div><img src="img/slider02.png" alt="이미지2"></div>
<div><img src="img/slider03.jpg" alt="이미지3"></div>
<div><img src="img/slider04.png" alt="이미지4"></div>
<div><img src="img/slider05.png" alt="이미지5"></div>
</div>
<!-- //이미지 슬라이드 -->
</article>
<!-- //col4 -->
<article class="column col5">
<h4 class="col_tit">Title</h4>
<p class="col_desc">웹 반응형 사이트 영역의 제목 설명 부분입니다.</p>
<!-- lightBox -->
<div class="lightbox square clearfix">
<a href="img/img01.jpg"><img src="img/img01@.jpg" alt="이미지"></a>
<a href="img/img02.jpg"><img src="img/img02@.jpg" alt="이미지"></a>
<a href="img/img03.jpg"><img src="img/img03@.jpg" alt="이미지"></a>
<a href="img/img04.jpg"><img src="img/img04@.jpg" alt="이미지"></a>
<a href="img/img05.jpg"><img src="img/img05@.jpg" alt="이미지"></a>
<a href="img/img06.jpg"><img src="img/img06@.jpg" alt="이미지"></a>
<a href="img/img07.jpg"><img src="img/img07@.jpg" alt="이미지"></a>
<a href="img/img08.jpg"><img src="img/img08@.jpg" alt="이미지"></a>
<a href="img/img09.jpg"><img src="img/img09@.jpg" alt="이미지"></a>
<a href="img/img10.jpg"><img src="img/img10@.jpg" alt="이미지"></a>
</div>
<!-- //lightBox -->
</article>
<!-- //col5 -->
<article class="column col6">
<h4 class="col_tit">Title</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/sfgMWyqzpQc" 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">Effect 1</h4>
<p class="col_desc">웹 반응형 사이트 영역의 제목 설명 부분입니다.</p>
<!-- side1 -->
<div class="side1">
<a href="#">
<div class="front">
<img src="img/side01.jpg" alt="이미지1">
</div>
<div class="back">
<i class="fa fa-heart fa-4x" aria-hidden="true"></i>
</div>
</a>
</div>
<!-- //side1 -->
</article>
<!-- //col7 -->
<article class="column col8">
<h4 class="col_tit">Effect 2</h4>
<p class="col_desc">웹 반응형 사이트 영역의 제목 설명 부분입니다.</p>
<!-- side2 -->
<div class="side2">
<fugure class="effect2">
<img src="img/side02.jpg" alt="이미지2">
<figcaption>
<h3>sunflower<em>aemo, longing, worship, Waiting</em></h3>
</figcaption>
</fugure>
</div>
<!-- //side2 -->
</article>
<!-- //col8 -->
<article class="column col9">
<h4 class="col_tit">Title</h4>
<p class="col_desc">웹 반응형 사이트 영역의 제목 설명 부분입니다.</p>
<!-- side3 -->
<div class="side3">
<img src="img/side03.jpg" alt="이미지3">
</div>
<!-- //side3 -->
</article>
<!-- //col8 -->
</section>
<!-- //cont_right -->
</div>
</section>
<!-- //section -->
</main>
<footer id="footer">
<div class="container">
<div class="row">
<h2 class="ir_su">반응형 사이트 푸터</h2>
<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://mm2800.dothome.co.kr/">mm2800</a>
ALL Right Reserved
</address>
</div>
</div>
</div>
</footer>
@charset "utf-8";
/*레이아웃*/
#header{
background: url(../img/header_bg.jpg) repeat-x center top;
}
#nav {
background: #f6fdff;
}
#title {
background: #eaf7fd;
}
#contents .container{
border-right: 1px solid #dbdbdb;
border-left: 1px solid #dbdbdb;
}
#cont_left{
float:left;
width: 250px;
}
#cont_center{
overflow:hidden;
min-height: 1200px;
margin-right: 250px;
border-right: 1px solid #dbdbdb;
border-left: 1px solid #dbdbdb;
}
#cont_right{
position:absolute;
right: 0;
top: 0;
width: 250px;
}
#footer{
border-top: 1px solid #dbdbdb;
}
/*컨테이너*/
.container {
position: relative;
width: 1200px;
margin: 0 auto;
/*background: rgba(0,0,0,0.3);*/
}
/*헤더*/
.header{}
.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;
}
.header .header_menu a:hover{
color: #ccc;
}
.header .header_tit{
text-align: center;
margin-top: 50px;
}
.header .header_tit h1{
display:inline-block;
padding: 10px 15px;
color:#fff;
font-size: 24px;
background: #51b0dc;
text-transform: uppercase;
font-family: 'Viga', sans-serif;
transition: all 0.6s ease;
}
.header .header_tit h1:hover, h1:focus {
box-shadow: inset 0 0 0 2em #003f95;
}
.header .header_tit a{
display:inline-block;
color:#fff;
font-size: 14px;
padding: 10px 20px;
background: #4a9abf;
margin-top: -10px;
font-family: 'Viga', sans-serif;
transition: all 0.3s ease;
}
.header .header_tit a:hover, a:focus{
box-shadow: 0 0.5em 0.5em -0.4em #666;
transform: translate(-0.45em);
}
.header .header_icon{
text-align: center;
margin-top: 40px;
padding-bottom: 40px;
}
.header .header_icon li{
display: inline;
margin: 0 2px;
}
.header .header_icon li a{
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
background: #3192bf;
display: inline-block;
color: #fff;
font-size: 35px;
line-height: 60px;
}
.header .header_icon li a span{
position: absolute;
left: 50%;
top: -40px;
opacity: 0;
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;
bottom: -5px; left: 50%;
margin-left: -5px;
border-top: 5px solid #3192bf;
border-right: 5px solid transparent;
border-left: 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:before{
content: '';
width: 3px;
height: 3px;
background: #25a2d0;
border-radius: 50%;
position: absolute;
left: 0;
top: 8px;
}
.nav > div h3 {
font-size: 18px;
color: #25a2d0;
font-weight: 800;
margin-bottom: 4px;
}
.title {
position: relative;
text-align: center;
}
.title h2 {
font-family: 'Do Hyeon', sans-serif;
font-size: 40px;
color: #2c94c4;
padding: 7px 0;
}
.title .btn {
width: 60px;
height: 60px;
position: absolute;
right: 0;
top: 7px;
font-size: 30px;
color: #fff;
background: #3192bf;
border-radius: 50%;
line-height: 61px;
}
/* 컨텐츠 영역*/
.column{
padding: 15px;
border-bottom: 1px solid #dbdbdb;
}
.column .col_tit{
font-size: 20px;
color: #2f7fa6;
text-transform: uppercase;
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{}
.menu li{
position: relative;
}
.menu li a{
padding: 10px;
font-size: 18px;
text-transform: uppercase;
color: #878787;
border-bottom: 1px solid #dbdbdb;
display: block;
transition: box-shadow 0.34s ease, background 0.34s ease;
}
.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);
}
.menu li a .fa{
position: absolute;
right: 8px;
top: 16px;
color: #3192bf;
}
/*게시판*/
.notice1{
position: relative;
}
.notice1 h5{
font-size: 16px;
color: #0093bd;
padding-bottom: 4px;
}
.notice1 li{
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 8px;
}
.notice1 li:before{
content: '';
width: 3px;
height: 3px;
background: #3192bf;
border-radius: 50%;
position: absolute;
top: 7px;
left: 0;
}
.notice1 li a{
}
.notice1 .more{
position: absolute;
top: 3px;
right: 5px;
font-size: 12px;
text-transform: uppercase;
color: #333;
}
/*#cont_left article:last-child{border:0;}
#cont_center article:last-child{border:0;}
#cont_right article:last-child{border:0;}
#cont_left article:nth-child(4){border:none;}
.column:nth-child(4n){border:0;}*/
/*게시판2*/
.notice2{
position: relative;
overflow: hidden;
}
.notice2 h5{
font-size: 16px;
color: #2f7fa6;
padding: 7px 0 4px 0;
}
.notice2 li{
position: relative;
overflow: hidden;
display: -ms-box;
-ms-box-orient: vertical;
-ms-line-clamp: 2;
text-overflow: ellipsis;
padding: 0 8px;
height: 40px; /*ie 때문에*/
}
.notice2 li:before{
content: '';
width: 3px;
height: 3px;
background: #449ce2;
position: absolute;
top: 7px;
left: 0;
border-radius: 50%;
}
.notice2 .more{
position: absolute;
top: 10px;
right: 5px;
font-size: 12px;
text-transform: uppercase;
color: #333;
}
/*블로그*/
.blog1{
}
.blog1 h5{
font-size: 14px;
color: #2f7fa6;
padding-bottom: 5px;
}
.blog1 img{
width: 100%;
}
.blog2{
}
.blog2 h5{
font-size: 14px;
color: #2f7fa6;
padding-bottom: 5px;
}
.blog2 img{
width: 100%;
}
/* 슬라이드 */
.slider {
position: relative;
}
.slider .slick-slide {
max-height: 407px;
}
.slider img {
width: 100%;
}
.slider .slick-prev {
position: absolute; left: -12px; top: 50%;
z-index: 1000;
width: 30px; height: 30px;
margin-top: -15px;
background: #5dbfeb;
border-radius: 50%;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
text-indent: -9999px;
}
.slider .slick-prev::before {
content: "\f053";
color: #fff;
text-indent: 0;
position: absolute; left: 9px; top: 8px;
}
.slider .slick-next {
position: absolute; right: -12px; top: 50%;
z-index: 1000;
width: 30px; height: 30px;
margin-top: -15px;
background: #5dbfeb;
border-radius: 50%;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
text-indent: -9999px;
}
.slider .slick-next::before {
content: "\f054";
color: #fff;
text-indent: 0;
position: absolute; left: 11px; top: 8px;
}
.slick-dots {
position: absolute; bottom: 15px;
display: block; width: 100%; text-align: center;
}
.slick-dots li {
display: inline-block; width: 15px; height: 15px; margin: 5px;
}
.slick-dots li button {
font-size: 0; line-height: 0; display: block; width: 15px; height: 15px;
cursor: pointer; background: #5dbfeb; border-radius: 50%;
}
.slick-dots li.slick-active button {
background: #2b91c8;
}
/* 라이트 박스 */
.square{}
.square a {float: left; width: 19%; margin: 0.5%;}
.square a img{width: 100%; display: block;}
/* 비디오 */
.video {position: relative; padding-bottom: 56.25%; width: 100%;}
.video iframe {position: absolute; width: 100%; height: 100%;}
/* 왼쪽 사이드 */
/* 사이드1 */
.side1 {}
.side1 a {
position: relative;
display: block;
perspective: 600px;
}
.side1 a .front {
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: all 0.5s ease-in-out;
backface-visibility: hidden;
}
.side1 a .back{
z-index: -1;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
transform-style: preserve-3d;
color: #fff;
background: #417fa9;
text-align: center;
transform: rotateY(-180deg);
transition: all 0.5s ease-in-out;
backface-visibility: hidden;
}
.side1 a .back i {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
.side1 a:hover .front {
transform: rotateY(180deg);
}
.side1 a:hover .back {
transform: rotateY(0deg);
z-index: 1;
}
/* 사이드 2 */
.side2 {position: relative;}
.effect2:before, .effect2:after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,0.3);
border-top: 100px solid rgba(0,0,0,0.7);
border-bottom: 100px solid rgba(0,0,0,0.4);
transition: all 1s ease;
opacity: 0;
z-index: 1;
}
.effect2:hover:before, .effect2:hover:after {
opacity: 1;
transform: scale(1);
}
.effect2 img{
display: block;
}
.effect2:hover > img {
opacity: 0.8;
}
.effect2:hover figcaption {
opacity: 1;
transition-delay: 0.1s;
}
.side2 figcaption {
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
text-transform: uppercase;
flex-direction: column;
color: #fff;
font-size: 20px;
line-height: 1.5em;
z-index: 1;
transition: all 0.3 ease;
opacity: 0;
}
figcaption:before{transform: scaleY(2);}
figcaption:after{transform: scaleY(2);}
.side2 figcaption h3 {
font-size: 1em;
font-weight: bold;
}
.side2 figcaption em {
display: block;
font-weight: 200;
font-size: 0.5em;
}
/* 푸터 */
.footer {
text-align: center;
padding: 30px;
}
.footer li {
position: relative;
display: inline;
padding: 0 8px;
white-space: nowrap;
/*한 단어씩 끝어서 떨어지게 하기 위해*/
}
.footer li:before {
content: '';
width: 1px; height: 10px;
background: #dbdbdb;
position: absolute;
left: 0;
top: 2px;
}
.footer li:first-child:before {
width: 0; height: 0;
}
.footer address {
padding-top: 15px;
}
/* 미디어쿼리 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.3333%;
}
.square a:nth-child(5){
display: block;
}
}
/* 화면너비 0 ~ 960px */
@media (max-width: 960px) {
#cont_right {
position: static;
width: 100%;
border-top: 1px solid #dbdbdb;
}
.nav > div {
float: none;
width: 100%;
}
.nav > div:last-child{
width: 100%;
}
.nav > div ol{
margin-bottom: 10px;
}
.nav > div li{
width: 33.3333%;
}
.nav > div:last-child li{
width: 33.3333%;
}
#cont_right{
overflow: hidden;
}
#cont_right .column {
width: 33.3333%;
float: left;
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;
}
#cont_center{
margin-right: 0;
border-right: 0;
}
}
/* 화면너비 0 ~ 768px */
@media (max-width: 768px) {
#cont_left{
float: none;
width: 100%;
}
#cont_center{
border-left: 0;
}
}
/* 화면너비 0 ~ 600px */
@media (max-width: 600px) {
.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.5);
}
.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;
}
.square a{
width: 49%;
}
.square a:nth-child(5){
display: none;
}
}
/* 화면너비 0 ~ 480px */
@media (max-width: 480px) {
.column.col1 .menu li a {
font-size: 1em;
}
}
/* 화면너비 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;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/lightgallery.min.js"></script>
<script type="text/javascript" src="js/lightgallery-all.min.js"></script>
<script src="js/slick.min.js"></script>
<script>
//라이트 박스
$(".lightbox").lightGallery();
$(".slider").slick({
dots: true,
autoplay: true,
autoplaySpeed: 3000,
arrows: false,
responsive: [
{
breakpoint: 768,
settings: {
arrows: true,
dots: false
}
}
]
});
</script>
</body>
</html>
@charset "utf-8";
/*여백 초기화*/
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: #390;}
/* 폰트 초기화 */
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.5;
}
/* 폰트 스타일 초기화 */
em, address {
font-style: normal;
}
/* 블릿기호 초기화 */
ul, li, ol {
list-style: none;
}
/* 제목 태그 초기화 */
h1, h2, h3, h4, h5, h6{
font-size: 13px;
font-weight: normal;
}
/* 테두리 초기화 */
img, fieldset {
border: 0 none;
}
/* 버튼 초기화 */
button {border: 0;}
/*ㅂ 반응형 초기화 */
video, img {width: 100%;}
/* clearfix */
.clearfix{*zoom:1;}
.clearfix:before, .clearfix:after {display: block; content: '';line-height: 0;}
.clearfix:after {clear: both;}
/*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;}
/*IR 효과*/
.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} /* 의미있는 이미지의 대체 텍스트를 제공하는 경우*/
.ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height:100%;} /*의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때*/
.ir_su {overflow:hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공 할 때*/
