본문 바로가기

IT공부/HTML & CSS

 (36)
36. 웹 표준 사이트 만들기(2019) - 마무리 36. 웹 표준 사이트 만들기(2019) - 마무리 소스를 정리한다. HTML, CSS 소스검사를 한다. 웹 표준에서 문법 검사를 한다. slick.css 38라인 지우기 -> cursor: hand; ->.slick-slide.dragging img ->{ -> pointer-events: none; ->} lightgallery.css 주석 표시 -> pointer-events: none; 3개지우기 브라우저 간 호환성검사를 한다. JS파일을 정리한다. js파일에 custom.js 파일을 만든다. index.html에 아래와 같이 추가한다. custom.js파일 안에는 기존에 작성한 제이쿼리 스크립트를 복사하여 붙여넣는다. 태그는 없어도 된다. 로그인 시 아이디, 비밀번호 태그에 placeholder..
35. 웹 표준 사이트 만들기(2019) - 라이트 박스 35. 웹 표준 사이트 만들기(2019) - 라이트 박스 라이트 박스는 레이어 팝업이랑 이미지 슬라이드랑 합쳐진 것이라고 생각하면 된다. https://sachinchoolur.github.io/lightGallery/ 에 접속한다. css와 script를 연동시킨다. 소스 index.html ... ... Advertisement ... //라이트 박스 $(".lightgallery").lightGallery({ //thumnail 보내주기 thumnail: true, autoplay: true, //멈춰있는 시간 pause: 3000, //멈춰있는 시간 프로그래스바 progressBar: true });
34. 웹 표준 사이트 만들기(2019) - 윈도우 팝업 34. 웹 표준 사이트 만들기(2019) - 윈도우 팝업 소스 index.html ... Advertisement ... //윈도우 팝업 $(".window").click(function(e){ e.preventDefault(); //window.open("파일명", "팝업이름", "옵션설정"); //옵션 : left, top, width, height, status, toolbar, location, menubar, scrollbars, fullscreen window.open("sample_popup.html","popup01","width=800, height=590, left=50, top=50, scrollbars=0, toolbar=0, menubar=0"); }); sample_popup.h..
33. 웹 표준 사이트 만들기(2019) - 레이어 팝업 33. 웹 표준 사이트 만들기(2019) - 레이어 팝업 팝업은 2종류가 있다. 레이어 팝업, 윈도우 팝업이 있다. 요즘은 레이어 팝업을 많이 쓴다. 소스 index.html ... Advertisement ... Close ... //레이어 팝업 $(".layer").click(function(e){ e.preventDefault(); //$("#layer").css("display", "block"); //$("#layer").show(); $("#layer").fadeIn(200); //$("#layer").slideDown(); //여기서는 토글이 필요없다. }); //레이어 팝업 $("#layer .close").click(function(e){ e.preventDefault(); //$("#l..
32. 웹 표준 사이트 만들기(2019) - 갤러리 스크립트 32. 웹 표준 사이트 만들기(2019) - 갤러리 스크립트 https://kenwheeler.github.io/slick/에 접속한다. 아래와 같이 마크업 세팅을 다시한다. ※ 위에 배너와 같이 slick 플러그인을 쓰기 때문에 class명 겹치지 않도록 주의힌다. 소스 index.html 포트폴리오 시작 정지 이전이미지 다음이미지 ... //갤러리 $(".gallery_img").slick({ fade: true, //이미지 위에 마우스 커서가 있으면 멈추게 pauseOnHover: true, //양 옆에 화살표 안보이게 arrows: false, //무한으로 움직이게 infinite: true, autoplay: true, autoplaySpeed: 3000, speed: 300, slidesToS..
31. 웹 표준 사이트 만들기(2019) - 탭메뉴 스크립트 31. 웹 표준 사이트 만들기(2019) - 탭메뉴 스크립트 소스 index.html ... 탭 메뉴 공지사항1 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 공지사항2 두 번째 공지사항 탭 메뉴 테스트 목록입니다. 두 번째 공지사항 탭 메뉴 테스트 목록입니다. 두 번째 공지사항 탭 메뉴 테스트 목록입니다. 공지사항3 세 번째 공지사항 탭 메뉴 테스트 목록입니다. 세 번째 공지사항 탭 메뉴 테스트 목록입니다. 세 번째 공지사항 탭 메뉴 테스트 목록입니다. ... //탭메뉴(웹..
30. 웹 표준 사이트 만들기(2019) - 배너 스크립트 30. 웹 표준 사이트 만들기(2019) - 배너 스크립트 ※ 이미지 스프라이트 기법에는 a태그를 쓰고 쓰지않으면 img태그를 쓰는 듯. 큰이미지는 img를 쓴다. 이미지 사용시 어떤 때는 ul li를 쓰고 어떤 때는 그냥 a링크를 나열한다. 아마도 가로로 나열만 하는 거라면 블록태그인 ul li를 안쓰고 세로로 나열할 때만 ul li를 쓰는 듯하다. 하나로 묶어 주기 위한 용도로(a, img) li를 사용하기도 한다. 하나로 관리하기 편하게. 슬라이드 효과를 직접 만들수도 있지만 여기서는 slick.js 플러그인을 사용한다. http://kenwheeler.github.io/slick에 접속한다. slick - the last carousel you'll ever need slick is a respo..
29. 웹 표준 사이트 만들기(2019) - 전체메뉴 스크립트 29. 웹 표준 사이트 만들기(2019) - 전체메뉴 스크립트 제이쿼리를 쓰자. CDN을 이용해서 사용하자. jquery.com에 접속한다. 3점대 버전이 가장 최신 버전이지만 익스플로러9버전에서는 지원이 안된다. 그래서 1점대(1.12대 버전) 버전을 쓴다. 전체메뉴가 안보이게 작업을 할 것이다. 아래 버튼을 클릭하면 메뉴가 보였다 안보였다 하게 할 것이다. 소스 index.html style.css //전체메뉴 안보이게 #cont_nav {background-color: #f6fdff; display: none;} ... //버튼에 on이 붙었을때 화살표 이미지 방향 바꾸기 .tit .btn.on {background-position: 0 -660px;} ...

티스토리툴바