본문 바로가기

전체 글

 (121)
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;} ...
28. 웹 표준 사이트 만들기(2019) - 푸터 & W3C 수정 28. 웹 표준 사이트 만들기(2019) - 푸터 & W3C 수정 전체소스 index.html ... 푸터 영역 사이트 도움말 사이트 이용약관 사이트 운영규칙 개인정보취급방침 책임의 한계와 법적고지 게시중단요청 서비스 고객센터 Copyright©webstoryboy.co.kr All Right Rederved ... style.css ... /* 푸터 */ .footer {padding: 25px 0; text-align: center; } .footer ul {margin-bottom: 20px;} /* a태그로 하지않고 li로 한 이유는 li:before를 쓰기 위해서인듯 */ .footer li {position: relative; display: inline; padding: 0 7px 0 10p..
27. 웹 표준 사이트 만들기(2019) - 팝업 27. 웹 표준 사이트 만들기(2019) - 팝업 전체소스 index.html ... 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. 로그인 정보 로그인 및 관련 설정 로그인 보안 로그인 상태 유지 IP보안 ON 로그인 영역 아이디 비밀번호 로그인 로그인 문제해결 회원가입 / 아이디·비밀번호 찾기 Advertisement ... style.css /* 로그인 */ /* padding을 안주고 margin을 주는 이유는 padding을 주면 색상이 같이 늘어난다. */ #login-wrap {margin-bottom: 15px; background: #f2f4f5; padding: 15px;} .login_header {overflow: hidden; font-size: 12px; h..
26. 웹 표준 사이트 만들기(2019) - 로그인 26. 웹 표준 사이트 만들기(2019) - 로그인 전체소스 index.html 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. 로그인 정보 로그인 및 관련 설정 로그인 보안 로그인 상태 유지 IP보안 ON 로그인 영역 아이디 비밀번호 로그인 로그인 문제해결 회원가입 / 아이디·비밀번호 찾기 style.css /* 로그인 */ #login_form {background: #f2f4f5; padding: 15px;} .login_header {overflow: hidden; font-size: 12px; height: 30px;} .login_header .lh_check {float: left; padding-right: 15px;} /* vertical-align: -2px; 체크..
25. 웹 표준 사이트 만들기(2019) - 갤러리 25. 웹 표준 사이트 만들기(2019) - 갤러리 전체소스 index.html 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. 포트폴리오 시작 정지 이전이미지 다음이미지 style.css /* 갤러리 */ .gallery {position: relative; border: 1px solid #ccc; height: 254px; overflow: hidden;} .gallery h4 {font-size: 14px; color: #0093bd; border-bottom: 1px solid #ccc; padding: 10px 0 8px 11px; font-weight: bold;} .gallery .gallery_btn {position: absolute; right: 5px; top:..
24. 웹 표준 사이트 만들기(2019) - 게시판4 24. 웹 표준 사이트 만들기(2019) - 게시판4 전체소스 index.html ... ... ... ... 최신 공지사항 웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?2018.11.19 웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?2018.11.19 웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?2018.11.19 더보기 ... style.css ... /* 게시판4 */ .notice4 {position: relative; border: 1px solid #ccc;} .notice4 h4 {border-bottom: 1px solid #ccc; font-size: 14px; font-weight: 700; color: #0093bd; padding: 8px 10px;} .notice4 h4..
23. 웹 표준 사이트 만들기(2019) - 탭메뉴 23. 웹 표준 사이트 만들기(2019) - 탭메뉴 탭 메뉴도 접근성을 지켜줘야 한다. 초점이동이 있다. Tab을 누르면 공지사항1을 갔다가 내용을 갔다가 다음 공지사항2번 순으로 가야한다. 전체소스 index.html ... ... ... ... 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. 탭 메뉴 공지사항1 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 첫 번째 공지사항 탭 메뉴 테스트 목록입니다. 공지사항2 두 번째 공지사항 탭 메뉴 테스트 목록입니다. 두 번째 공지사항 탭 메뉴 테스트 목록..

티스토리툴바