반응형 웹 사이트를 만들기 강의 입니다.
이번 강의는 접기/펼치기 스크립트 예제입니다.
영상을 보시면서 하나하나씩 따라하면서 익혀주세요.
틀린 부분은 직접 찾아서 고쳐보도록 노력해 보셨으면 합니다. 이것 또한 본인에게 큰 도움이 될 것입니다.
정말 정말 안될시에는 저에게 댓글을~
마지막 영상까지 화이팅입니다!!!
Code Youtube
사용 프로그램
∗ filezilla - CLICK
∗ brackets - CLICK
∗ sublime - CLICK
∗ visualstudio - CLICK
- 에디터는 본인이 편한것으로 사용하시면 되고, 저는 이번 강의에서 sublime을 사용하였습니다. -
Code example
<!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>반응형 사이트 만들기</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-152.png">
<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&display=swap" rel="stylesheet">
<!-- HTLM5shiv ie6~8 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script type="text/javascript">
alert("현재 당신이 보는 브라우저는 지원하지 않습니다. 최신 브라우저로 업데이트해주세요!");
</script>
<![endif]-->
<style>
/* 여백 초기화 */
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.5;}
/* 폰트 스타일 초기화 */
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, video {width: 100%;}
/*반응형 이미지 */
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>
<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; min-height: 1300px; 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 {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.25s 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;
left: 50%; top: -40px;
transform: translateX(-50%);
font-size: 12px;
line-height: 1.6;
background: #3192bf;
padding: 3px 9px;
border-radius: 6px 0;
opacity: 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:before {
content: '';
width: 3px; height: 3px;
background-color: #25a2d0;
border-radius: 50%;
position: absolute; left: 0; top: 6px;
}
.nav > div h3 {font-size: 18px; color: #25a2d0; font-weight: bold; margin-bottom: 4px;}
.nav > div li a {position: relative;}
.nav > div li a:after {
content: '';
display: inline-block;
width: 0; height: 1px;
background: #25aad0;
transition: all .2s ease-out;
position: absolute; bottom: 0; left: 0;
}
.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(71,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 {}
.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/blog4_@1.jpg);
background-size: cover;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
.blog2 .img-retina {background-image: url(../img/blog4_@2.jpg);}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3),
only screen and (min-resolution: 3dppx) {
.blog2 .img-retina {background-image: url(../img/blog4_@3.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;
transition: all .84s ease;
transform: translateX(50px);
}
.slider figcaption span {
display: block;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
opacity: 0;
transition: all .84s .2s ease;
transform: translateX(50px);
}
.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;
text-indent: -9999px;
font: normal normal normal 14px/1 FontAwesome;
}
.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;
text-indent: -9999px;
font: normal normal normal 14px/1 FontAwesome;
}
.slider .slick-next::before {
content:"\f054";
color: #5dbfeb;
text-indent: 0;
position: absolute; left: 11px; top: 8px;
}
/* 라이트 박스 */
.square a {position: relative; overflow: hidden; float: left; width: 19%; margin: 0.5%;}
.square a img {width: 100%; display: block;}
.square a em {background: rgba(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,.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;}
/* media query*/
/* 화면 너비 0 ~ 1220px */
@media (max-width: 1220px){
.container {width: 100%;}
.row {padding: 0 15px;}
#contents .container {border: 0;}
.title .btn {right: 5px;}
.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;}
#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.33333%;}
.nav > div:last-child li {width: 33.33333%;}
.nav > div ol {margin-bottom: 10px;}
#cont_right {overflow: hidden;}
#cont_right .column {float: left; width: 33.3333%; 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;}
.header .header_tit {display: none;}
.header .header_icon {display: none;}
.title .btn {display: none;}
.nav > div li {width: 50%;}
.nav > div:last-child li {width: 50%;}
.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.3333%; border-right: 1px solid #dbdbdb; text-align: center; 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){
.nav > div li {width: 100%;}
.nav > div:last-child li {width: 100%;}
#cont_right .column {width: 100%;}
#cont_right .column.col7 {border-right: 0; border-bottom: 1px solid #dbdbdb;}
.square a {width: 100%; margin-right: 0; margin-left: 0;}
}
</style>
</head>
<body>
<header id="header">
<div class="container">
<div class="row">
<div class="header">
<div class="header_menu">
<a href="#">Blog</a>
<a href="#">Github</a>
<a href="#">Webstandard</a>
</div>
<!-- //header_menu -->
<div class="header_tit">
<h1>Professional Web Publishser</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>Facebook</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 -->
<!--
https://developers.facebook.com/tools/debug/
https://cards-dev.twitter.com/validator
-->
</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 <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 class="last">
<h3>Webstandard</h3>
<ol>
<li><a href="#">웹 표준</a></li>
<li><a href="#">웹 접근성</a></li>
<li><a href="#">W3C</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>
<!-- //col -->
<article class="column col3">
<h4 class="col_tit">Blog</h4>
<p class="col_desc">해상도에 따라 이미지를 다르게 표현하는 방법입니다.</p>
<!-- blog1-->
<div class="blog1">
<h5 class="ir_su">image1</h5>
<figure>
<!-- <img src="img/blog1_@1.jpg" class="img-normal" alt="normal image">
<img src="img/blog1_@2.jpg" class="img-retina" alt="retina image" width="100%"> -->
<img src="img/blog3_@1.jpg" srcset="img/blog3_@1.jpg 1x, img/blog3_@2.jpg 2x, img/blog3_@3.jpg 3x" alt="이미지">
<figcaption>반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다.</figcaption>
</figure>
</div>
<!-- //blog1 -->
<!-- blog2-->
<div class="blog2 mt15">
<div class="img-retina">
<h5>image2</h5>
</div>
<p>반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다.</p>
</div>
<!-- //blog2 -->
</article>
<!-- //col3 -->
</section>
<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 Site1</em><span>슬라이드 플러그인을 이용한 반응형 이미지 슬라이드 입니다.</span></figcaption>
</figure>
</div>
<div>
<figure>
<img src="img/slider001.jpg" alt="이미지2">
<figcaption><em>Responsive Site2</em><span>슬라이드 플러그인을 이용한 반응형 이미지 슬라이드 입니다.</span></figcaption>
</figure>
</div>
<div>
<figure>
<img src="img/slider001.jpg" alt="이미지3">
<figcaption><em>Responsive Site3</em><span>슬라이드 플러그인을 이용한 반응형 이미지 슬라이드 입니다.</span></figcaption>
</figure>
</div>
</div>
<!-- //이미지 슬라이드 -->
</article>
<!-- //col4 -->
<article class="column col5">
<h4 class="col_tit">Blend Effect</h4>
<p class="col_desc">Background-blend-mode와 mix-blend-mode</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>hur-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>
<section id="cont_right">
<h3 class="ir_su">반응형 사이트 오른쪽 컨텐츠</h3>
<article class="column col7">
<h4 class="col_tit">Effect1</h4>
<p class="col_desc">CSS의 transform을 이용한 마우스 오버효과입니다.</p>
<!-- side1 -->
<div class="side1">
<figure>
<img src="img/side1.jpg" alt="이미지1">
</figure>
</div>
<!-- //side1 -->
</article>
<!-- //col7 -->
<article class="column col8">
<h4 class="col_tit">Effect2</h4>
<p class="col_desc">CSS의 transform을 이용한 마우스 오버효과입니다.</p>
<!-- side2 -->
<div class="side2">
<figure>
<img src="img/side2.jpg" alt="이미지2">
</figure>
</div>
<!-- //side2 -->
</article>
<!-- //col8 -->
<article class="column col9">
<h4 class="col_tit">Effect3</h4>
<p class="col_desc">CSS의 transform을 이용한 마우스 오버효과입니다.</p>
<!-- side3 -->
<div class="side3">
<figure>
<img src="img/side3.jpg" alt="이미지3">
</figure>
</div>
<!-- //side3 -->
</article>
<!-- //col9 -->
</section>
</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");
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({
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>반응형 사이트 만들기</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-152.png">
<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&display=swap" 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="#">Blog</a>
<a href="#">Github</a>
<a href="#">Webstandard</a>
</div>
<!-- //header_menu -->
<div class="header_tit">
<h1>Professional Web Publishser</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>Facebook</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 -->
<!--
https://developers.facebook.com/tools/debug/
https://cards-dev.twitter.com/validator
-->
</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 <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 class="last">
<h3>Webstandard</h3>
<ol>
<li><a href="#">웹 표준</a></li>
<li><a href="#">웹 접근성</a></li>
<li><a href="#">W3C</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>
<!-- //col -->
<article class="column col3">
<h4 class="col_tit">Blog</h4>
<p class="col_desc">해상도에 따라 이미지를 다르게 표현하는 방법입니다.</p>
<!-- blog1-->
<div class="blog1">
<h5 class="ir_su">image1</h5>
<figure>
<!-- <img src="img/blog1_@1.jpg" class="img-normal" alt="normal image">
<img src="img/blog1_@2.jpg" class="img-retina" alt="retina image" width="100%"> -->
<img src="img/blog3_@1.jpg" srcset="img/blog3_@1.jpg 1x, img/blog3_@2.jpg 2x, img/blog3_@3.jpg 3x" alt="이미지">
<figcaption>반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다.</figcaption>
</figure>
</div>
<!-- //blog1 -->
<!-- blog2-->
<div class="blog2 mt15">
<div class="img-retina">
<h5>image2</h5>
</div>
<p>반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다.</p>
</div>
<!-- //blog2 -->
</article>
<!-- //col3 -->
</section>
<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 Site1</em><span>슬라이드 플러그인을 이용한 반응형 이미지 슬라이드 입니다.</span></figcaption>
</figure>
</div>
<div>
<figure>
<img src="img/slider001.jpg" alt="이미지2">
<figcaption><em>Responsive Site2</em><span>슬라이드 플러그인을 이용한 반응형 이미지 슬라이드 입니다.</span></figcaption>
</figure>
</div>
<div>
<figure>
<img src="img/slider001.jpg" alt="이미지3">
<figcaption><em>Responsive Site3</em><span>슬라이드 플러그인을 이용한 반응형 이미지 슬라이드 입니다.</span></figcaption>
</figure>
</div>
</div>
<!-- //이미지 슬라이드 -->
</article>
<!-- //col4 -->
<article class="column col5">
<h4 class="col_tit">Blend Effect</h4>
<p class="col_desc">Background-blend-mode와 mix-blend-mode</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>hur-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>
<section id="cont_right">
<h3 class="ir_su">반응형 사이트 오른쪽 컨텐츠</h3>
<article class="column col7">
<h4 class="col_tit">Effect1</h4>
<p class="col_desc">CSS의 transform을 이용한 마우스 오버효과입니다.</p>
<!-- side1 -->
<div class="side1">
<figure>
<img src="img/side1.jpg" alt="이미지1">
</figure>
</div>
<!-- //side1 -->
</article>
<!-- //col7 -->
<article class="column col8">
<h4 class="col_tit">Effect2</h4>
<p class="col_desc">CSS의 transform을 이용한 마우스 오버효과입니다.</p>
<!-- side2 -->
<div class="side2">
<figure>
<img src="img/side2.jpg" alt="이미지2">
</figure>
</div>
<!-- //side2 -->
</article>
<!-- //col8 -->
<article class="column col9">
<h4 class="col_tit">Effect3</h4>
<p class="col_desc">CSS의 transform을 이용한 마우스 오버효과입니다.</p>
<!-- side3 -->
<div class="side3">
<figure>
<img src="img/side3.jpg" alt="이미지3">
</figure>
</div>
<!-- //side3 -->
</article>
<!-- //col9 -->
</section>
</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");
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({
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; min-height: 1300px; 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 {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.25s 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;
left: 50%; top: -40px;
transform: translateX(-50%);
font-size: 12px;
line-height: 1.6;
background: #3192bf;
padding: 3px 9px;
border-radius: 6px 0;
opacity: 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:before {
content: '';
width: 3px; height: 3px;
background-color: #25a2d0;
border-radius: 50%;
position: absolute; left: 0; top: 6px;
}
.nav > div h3 {font-size: 18px; color: #25a2d0; font-weight: bold; margin-bottom: 4px;}
.nav > div li a {position: relative;}
.nav > div li a:after {
content: '';
display: inline-block;
width: 0; height: 1px;
background: #25aad0;
transition: all .2s ease-out;
position: absolute; bottom: 0; left: 0;
}
.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(71,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 {}
.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/blog4_@1.jpg);
background-size: cover;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
.blog2 .img-retina {background-image: url(../img/blog4_@2.jpg);}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3),
only screen and (min-resolution: 3dppx) {
.blog2 .img-retina {background-image: url(../img/blog4_@3.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;
transition: all .84s ease;
transform: translateX(50px);
}
.slider figcaption span {
display: block;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
opacity: 0;
transition: all .84s .2s ease;
transform: translateX(50px);
}
.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;
text-indent: -9999px;
font: normal normal normal 14px/1 FontAwesome;
}
.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;
text-indent: -9999px;
font: normal normal normal 14px/1 FontAwesome;
}
.slider .slick-next::before {
content:"\f054";
color: #5dbfeb;
text-indent: 0;
position: absolute; left: 11px; top: 8px;
}
/* 라이트 박스 */
.square a {position: relative; overflow: hidden; float: left; width: 19%; margin: 0.5%;}
.square a img {width: 100%; display: block;}
.square a em {background: rgba(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,.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;}
/* media query*/
/* 화면 너비 0 ~ 1220px */
@media (max-width: 1220px){
.container {width: 100%;}
.row {padding: 0 15px;}
#contents .container {border: 0;}
.title .btn {right: 5px;}
.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;}
#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.33333%;}
.nav > div:last-child li {width: 33.33333%;}
.nav > div ol {margin-bottom: 10px;}
#cont_right {overflow: hidden;}
#cont_right .column {float: left; width: 33.3333%; 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;}
.header .header_tit {display: none;}
.header .header_icon {display: none;}
.title .btn {display: none;}
.nav > div li {width: 50%;}
.nav > div:last-child li {width: 50%;}
.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.3333%; border-right: 1px solid #dbdbdb; text-align: center; 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){
.nav > div li {width: 100%;}
.nav > div:last-child li {width: 100%;}
#cont_right .column {width: 100%;}
#cont_right .column.col7 {border-right: 0; border-bottom: 1px solid #dbdbdb;}
.square a {width: 100%; margin-right: 0; margin-left: 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.5;}
/* 폰트 스타일 초기화 */
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, video {width: 100%;}
/*반응형 이미지 */
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");
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({
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');
});
도움이 되셨다면 구독과 좋아요 버튼을 꾸욱~~!!
여러분의 댓글은 영상을 제작하는데 많은 힘이 됩니다.
모르시거나 궁금한 사항은 언제든지 댓글로 남겨주세요.
최대한 힘이 되어 드리겠습니다.
오늘도 수고하셨습니다.
728x90
