일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 실기
- react
- 생활코딩
- HTML
- 정보처리기사
- 프론트엔드
- git
- 타입스크립트
- JavaScript
- 웹디자인기능사
- 자바스크립트
- 웹디실기
- jQuery
- 비전공자
- github
- JS
- PROJECT
- 연산자
- 깃
- 슬라이드전환
- 리액트
- web
- CSS
- Supabase
- 코드공유
- 세로메뉴바
- 웹디자인기능사실기
- 웹퍼블리셔
- 코딩독학
- 렛츠기릿자바스크립트
- Today
- Total
목록슬라이드전환 (4)
코딩하는라민
웹디자인기능사 드디어 실기 시험 하루 전. 시험보기 전에 보고 들어갈 것 메모 혹시라도 자동입력이 안 되거나, 잊어버릴 것 같은 부분들을 시험 시작 전에 보려고 정리해놓은 것. 1. html, css 기본 구조 .. @charset "UTF-8"; ... ▶ 혹시라도 자동 입력이 안 될 경우를 대비해서 이 정도는 외워두고자 정리. ▶ 독타입은 html ▶ html 태그에는 lang="ko" ▶ html에는 meta 태그에 charset="UTF-8" ▶ css에 @charset "UTF-8"; 잊어버리지 않기! *{ padding:0; margin:0; box-sizing:border-box; color:#333333; font-family: "맑은 고딕",sans-serif; } a{ text-deco..
[웹디자인기능사 실기 독학] 강원천문대 제일 먼저 해야할 것 1. 컬러가이드 2. 와이어프레임 0. 이전 유형(A-1, A-2)과 다른 것 ✅ 이미지 슬라이드는 서서히 나타나고, 서서히 사라짐 ✅ 서브 메뉴가 하나씩 떨어진다. ✅ 푸터의 구성 1. 헤더 1-1. 메뉴 바 mark-up 강원천문대 천문대소개 인사말 오시는길 이용안내 프로그램 관람시간표 이달의 별자리 천문대예약 예약하기 예약확인 예약취소 커뮤니티 공지사항 방문후기 자유게시판 1-2. 메뉴 바 css header{ width: 1200px; height: 100px; text-align: center; position: relative; z-index: 10; } header h1{ width: 200; height: 40px; float: ..
[웹디자인기능사 독학] JUST 쇼핑몰 제일 먼저 해야할 것 1. 컬러 가이드 확인 → 따로 적어두면 편함 2. 와이어프레임 확인 브라우저 전체 넓이 각 영역 너비&높이 확인 3. 세부사항 확인 로고 사이즈 및 작업 형태 확인 호버 시 ⇒ 하이라이트 슬라이드 형태, 방향, 시간 확인 시험 볼 때 수험자 제공 파일 - 만들어져 있는 이미지를 포토샵으로 사이즈 줄여서 사용 - 제이쿼리 오픈소스 : 복사해서 js 폴더 안에 넣어야 함 기타 확인사항 - CSS, JavaScript → 별도 파일 제작 - 상호작용이 필요한 콘텐츠(로고, 메뉴, Slide, 공지사항, 갤러리 등)는 임시링크 #, Tab 키로 이동 선택할 수 있어야 함 - 전체 레이아웃은 table 태그가 아닌 CSS 를 통한 레이아웃 작업할 것 ..
CSS, Jquery 이미지 슬라이드_이미지 순서대로 서서히 나타나게 1. 이미지 서서히 나타나게 하기 - 맨 위 이미지 하나만 보이게 하기 메인 이미지 너비를 100%로 맞추고, 부모 박스에 overflow: hidden; - 이미지 2초동안 나타나고 사라지게 만들기(순차적으로 등장) .img_list{ width: 500px; height: 250px; margin: 0 auto; overflow: hidden; } .img_list img{ width: 100%; height: 250px; } $(document).ready(function(){ var count=0; $('.img_list li').eq(count).fadeIn(); setInterval(function(){ $('.img_lis..