html5 shiv
html5 shiv : ie6~8에서 새로운 태그 인식 시켜주기 위함
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<script type="text/javascript">
alert("지원되지 않는 브라우저입니다. 최신 브라우저로 업데이트해주세요!")
</script>
<![endif]-->modernizr
modernizr -> 현재 브라우저에서 뭘 사용할 수 있는지 확인 가능
:before 사용해서 툴팁 만들기
/* 둥근 사각형 모양으로 만들기 */
.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; /* 천천히 나오도록 애니메이션 */
}
/* before, content로 추가 후 border값으로 삼각형 -> 말풍선 모양 만들어주기 */
.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;
}
/* 0이었던 opacity를 1로 줘서 툴팁이 나타나게 만들어줌 */
.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;
}SNS 공유하기 링크 추가
-
메타태그 추가해주기
<!-- 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" />-> https://developers.facebook.com/tools/debug/, https://cards-dev.twitter.com/validator 에서 미리보기 확인 가능
-
주소 포맷은 아래처럼
encodeURIComponent()를 사용해서 url 만들어주기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');
});고해상도 이미지 다루기
-
img 태그로 일반 해상도 / 고해상도 이미지를 1개씩 추가해놓고 화면 비율이 1.5 이상일 때 retina 이미지를 활성화 !
min-device-pixel-ratio: 최소 화면 비율min-resolution: 최소 해상도
-
혹은
srcset속성을 사용해서 태그 1개에 src를 여러 개 지정해주기 -> 호환성이 떨어질 수 있음 ...<!-- <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="이미지"> .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;} } -
background로 이미지 박아놓고 min-device-pixel-ratio에 따라서 url 바꿔주기
.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);} }
슬라이더, 라이트박스 갤러리 lib
slick 혹은 swiper 라이브러리 사용 -> 모바일 환경은 swiper가 더 !
필터 이펙트 ( 블렌더 효과 )
.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);}메뉴 접기 / 펼치기 스크립트
//접기/펼치기
$(".btn").click(function(e){
e.preventDefault();
// jquery method들
// .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다.
$(".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");
}
});
// width 가 600 미만일때 없애줌
$(window).resize(function(){
var wWidth = $(window).width();
if(wWidth > 600){
$(".nav").removeAttr("style");
}
});사이드 호버 이펙트 1~3
노는 게 제일 좋은데 공부는 하고 싶어요 😗