Clone Coding/Responsive Site (30) 썸네일형 리스트형 [ RESPONSIVE ] 25 사이드 이펙트 [ RESPONSIVE ] 25 사이드 이펙트 See the Pen [ RESPONSIVE ] 25 사이드 이펙트 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 이펙트 1 ( transform: rotateY ) .side1 { position: relative; perspective: 600px; display: block; } .side1 .front { transform-style: preserve-3d; transform: rotateY(0deg); transition: all .5s ease-in-out; backface-visibility: hidden; } .side1 .back { position: absolute; top: 0; left.. [ RESPONSIVE ] 24 전체메뉴 (스크립트) [ RESPONSIVE ] 24 전체메뉴 (스크립트) See the Pen [ RESPONSIVE ] 24 전체메뉴 (스크립트) by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 메뉴 접고, 펼치기 + 아이콘 변경 + 반응형일때 펼쳐져 있지 않게 처리 // 전체 메뉴 (접기, 펼치기) $(".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 {.. [ RESPONSIVE ] 24 푸터 [ RESPONSIVE ] See the Pen [ RESPONSIVE ] 24 푸터 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 푸터 가상 요소 ( | ) .footer li::before { content: ''; width: 1px; height: 12px; background: #dbdbdb; position: absolute; left: 0; top: 2px; } .footer li:first-child::before { width: 0; } * 반응형 사이트 강의 보는곳(WEBSTORYBOY) click! [ RESPONSIVE ] 23 사이드 컨텐츠 [ RESPONSIVE ] See the Pen [ RESPONSIVE ] 23 사이드 컨텐츠 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 반응형 사이트 강의 보는곳(WEBSTORYBOY) click! [ RESPONSIVE ] 22 비디오 [ RESPONSIVE ] 22 비디오 See the Pen [ RESPONSIVE ] 22 비디오 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 비디오 관련 속성들 ㄴ 영상 파일이 있을 때 ㄴ 유튜브 영상 퍼오기 ( 퍼온 소스에서 크기 값 삭제하고, 반응형으로 만들어주기 ) /* 비디오 */ .video { position: relative; width: 100%; padding-bottom: 56.25%; } .video iframe { position: absolute; width: 100%; height: 100%; } * 반응형 사이트 강의 보는곳(WEBSTORYBOY) click! [ RESPONSIVE ] 21 라이트 박스 [ RESPONSIVE ] 21 라이트 박스 See the Pen [ RESPONSIVE ] 21 라이트 박스 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 반응형 사이트 강의 보는곳(WEBSTORYBOY) click! * 블랜드모드 더 보기 click! [ RESPONSIVE ] 20 이미지 슬라이드 [ RESPONSIVE ] 20 이미지 슬라이드 See the Pen [ RESPONSIVE ] 20 이미지 슬라이드 by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 슬라이드 안에 글씨 안보이다가 슬라이드가 작동하면서 active되면 보이는 효과 (첫번째 줄, 두번째 줄 시간 차로 오른쪽에서 왼쪽으로 보이게 함) .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: .. [ RESPONSIVE ] 19 블로그 영역 (고해상도 이미지) [ RESPONSIVE ] 19 블로그 영역 (고해상도 이미지) See the Pen [ RESPONSIVE ] 19 블로그 영역 (고해상도 이미지) by larmong (@larmong) on CodePen. GitHub에서 보기 Click! * 해상도에 따라 이미지 보여주기 반응형 웹 사이트 이미지 글입니다. 반응형 웹 사이트 이미지 글입니다. ㄴ 첫번째 방법 (호환성 최고) .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 scre.. 이전 1 2 3 4 다음
