본문 바로가기

IT공부/HTML & CSS

 (36)
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 두 번째 공지사항 탭 메뉴 테스트 목록입니다. 두 번째 공지사항 탭 메뉴 테스트 목록..
22. 웹 표준 사이트 만들기(2019) - 마우스 오버효과2 22. 웹 표준 사이트 만들기(2019) - 마우스 오버효과2 전체소스 index.html ... ... ... ... 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. ... Mouse Hover 바로가기 HTML 바로가기 CSS 바로가기 jQuery ... style.css ... /* 마우스 오버효과2 */ .notice_hover2 {} .notice_hover2 ul {overflow: hidden;} .notice_hover2 li {float: left; width: 93px; text-align: center; margin-right: 5px;} .notice_hover2 li.last {margin-right: 0;} .notice_hover2 li a span {po..
21. 웹 표준 사이트 만들기(2019) - 마우스 오버효과1 21. 웹 표준 사이트 만들기(2019) - 마우스 오버효과1 마우스를 이미지 위에 올리면 더보기라고 바뀐다. 전체소스 index.html ... ... ... ... 아이콘Notice 가장 웹 페이지에서 기본이 되는 게시판 유형입니다. Mouse Hover 바로가기 와이어 프레임 바로가기 스케치 작업 바로가기 UI 디자인 ... style.css ... /* 마우스 오버효과1 */ .notice_hover h4 {font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;} .notice_hover ul {overflow: hidden;} /* 바로가기 글씨가 가운데 오게 하기 위해 text-align: center를 줌(li는 블록..

티스토리툴바