Publishing Skills (HTML5 + CSS3 + jQuery)

collapse

• +
• -

• 최근 고민한 jQuery

  • 1. 텍스트 효과 - 좌측에서 우측으로 생성되는 글씨들

• 자주쓰는 jQuery

  • 1. 모바일 좌측 메뉴(컨텐츠 고정/ iOS 대응)
  • 2. 모바일 좌측 메뉴(컨텐츠 고정/ iOS 대응)
  • 3. body 컨텐츠 클릭시 팝업 닫힘 - Simple
  • 4. 레이지 로딩
  • 5. 모바일, PC 기기 인식
  • 6. 날짜 헤더 컨트롤
  • 7. Drag & Drop FileUpload
  • 8. 지도 줌 +- 기능
  • 9-1. 영상 제어 - Video 태그
  • 9-2. 영상 제어 - Youtube 제어

• Table

  • 1. ax5ui-grid, ISP 사용
  • 1. 엑셀 형식(제목 고정)

• Calendar

  • 1. 달력
  • 2-1. FullCalendar
  • 2-2. FullCalendar V. 5.10.1

• Menu & Navigation -

  • 1. 왼쪽에서 나오는 메뉴(왼쪽 높이와 오른쪽 높이가 같음)
  • 2. 위 아래로 움직이는 메뉴(해당메뉴 활성화)
  • 3. Basic 메뉴(해당메뉴 활성화)
  • 4. Fullpage 메뉴(★IE7 완벽지원)
  • 5. Swipe 메뉴(모바일 - 터치 감도조절 / Swiper 3.4.1↑ )
  • 6. Swipe 메뉴 II(모바일)
  • 6. Swipe 메뉴 - 쿠키로 제어(모바일)
  • 7-1. OWHO Swipe 메뉴 I(lazyload 적용)
  • 7-2. OWHO Swipe 메뉴 II(lazyload 적용 및 개선)
  • 8. Special 메뉴(SVG)
  • 9. Special 메뉴(Wheel)
  • 10. jQuery-menu-aim
  • 11. 앱 효과(아래에서 위로 순차적으로 올라오는 메뉴)
  • 12-1. 모바일 좌측 메뉴(컨텐츠 고정/ iOS 대응)
  • 12-2. 모바일 좌측 메뉴(컨텐츠 고정/ iOS 대응)

• Slideshow -

  • 1-1. bxSlider(시작위치 변경 + 숫자 네비 / 모바일)
  • 1-2. bxSlider(풀페이지 + 양쪽에 딤처리)
  • 1-3. bxSlider(풀스크린 + 중앙 정렬)
  • 1-4. bxSlider(현대건설 / 웹접근성)
  • 1-5. bxSlider(가변적인 버튼 처리★)
  • 1-6. bxSlider(페이져 및 자동 탭)
  • 1-7. bxSlider(풀페이지 + 가변적인 페이져 처리)
  •  
  • 2-1. Swiper(굴곡 효과 / 모바일)
  • 2-2. Swiper(썸네일 반응 + 자동 / 모바일)
  • 2-3. Swiper(자동으로 1개씩 움직이는 배너 / 모바일)
  • 2-4. Swiper(움직이면서 BG가 변하는 배너 / 모바일)
  • 2-5. Swiper(비디오 제어 / 모바일)
  •  
  • 3. idangerous(썸네일 반응 + IE하위버전 작동)
  • 4. Ramdom Slider
  •  
  • 5-1. Owl Carousel(Custom 1)
  • 5-2. Owl Carousel(Custom 2)
  • 5-3. Owl Carousel(One Slide & Lazy Load)
  • 5-4. Owl Carousel(transitionStyle)
  • 5-5. Owl Carousel(Auto Height & Fade)
  • 5-6. Owl Carousel(Synced Owls)
  • 5-7. Owl Carousel I(좌우 버튼)
  • 5-8. Owl Carousel II(입체적인 전환 효과 및 좌우 버튼)
  • 5-9. Owl Carousel(청라성형외과 시설둘러보기★IE7 완벽지원)
  • 5-10. Owl Carousel(가변적인 버튼 처리★)
  •  
  • 6-1. Cycle2(Default Slideshow)
  • 6-2. Cycle2(Flip Transitions)
  • 6-3. Cycle2(Shuffle Transitions)
  • 6-4. Cycle2(심화)
  •  
  • 7-1. Flexslider(Basic)
  • 7-2. Flexslider(customDirectionNav)
  • 7-3. Flexslider(Thumbnail ControlNav Pattern)
  • 7-4. Flexslider(Slider with Carousel Slider as Navigation)
  • 7-5. Flexslider(pausePlay)
  • 7-6. Flexslider(Carousel With Min & Max Ranges)
  •  
  • 8-1. Slick
  • 8-2. Slick
  • 8-3. Slick(화면 확대)
  • 8-4. Slick(skew)
  • 8-5. Slick(화면 확대&축소 I)
  • 8-6. Slick(화면 확대&축소 II)
  • 8-7. Slick(with YouTube)
  • 8-8. Slick(Other Methods)
  • 8-9. Slick(afterChange, 슬라이드 각각 영역에서 효과 구현)

• Portfolio -

  • 1. MixItUp(IE8 이상에서 작동)
  • 2. Sortboard(IE9 이상에서 작동)

• Animation -

  • 1. 말풍선 위아래로 움직임 & 핸드폰 진동
  • 2. Rotate(반복적으로 15도씩 움직임 / IE9 이상에서 작동)
  • 3. Swing & Flip(반복적으로 좌우로 움직임, 마우스 오버시 뒤집어짐 / IE9 이상에서 작동)
  • 4-1. Masonry I(반응형 갤러리 리스트 / IE하위버전에서 미디어쿼리 작동)
  • 4-2. Masonry II - 더보기 기능 추가
  • 4-3. Masonry III - 더보기 기능 추가(모바일용)
  • 5. 360도 회전하는 이미지
  • 6. 계속 움직이는 파도 애니메이션(솔깃)
  • 7. 눈 내리는 효과 I
  • 8. 눈 내리는 효과 II
  • 9. 스타벅스 드라이브 쓰루
  • 10-1. jsMovie I
  • 10-2. jsMovie II
  • 11. Fire Fly I
  • 11. Fire Fly II

• TweenMax & Parallax Scrolling -

  • 1. TweenMax & superscrollorama(라마다호텔 주변관광지I)
  • 2. TweenMax & superscrollorama(라마다호텔 주변관광지II)
  • 3. TweenMax & superscrollorama(서울시 협동조합)
  • 4. TweenMax & superscrollorama
    (청라성형외과 & 피부과 / 로딩 후 바로 실행)
  • 5. TweenMax & SVG
  • 6. 패럴랙스 & 포트폴리오
  • 7. Skrollr
  • 8-1. 돈 떨어지는 효과
  • 9-1. 포인트 떨어지는 효과 I
  • 9-2. 포인트 떨어지는 효과 II
  • 10. AOS

• Image Effects -

  • 1. Smart Zoom(모바일)
  • 2-1. Image Zoom I
  • 2-2. Image Zoom II
  • 2-3. Image Zoom III
  • 2-4. Image Zoom IV
  • 2-5. Image Zoom V
  • 3. Drag Image View
  • 4-1. Lazy Load I (fadein)
  • 4-2. Lazy Load II (spinner)
  • 4-3. Lazy Load III (spinner & 클릭 시 실행)
  • 5. 반응형 맵좌표 및 호버효과

• Input & Textarea -

  • 1. 체크박스 클릭 시 인풋박스 활성화
  • 2. 인풋박스1 값 입력 시 인풋박스2 비활성화
  • 3. 파일 버튼 디자인
  • 4-1. 이미지 업로드 I
  • 4-2. 이미지 업로드 II
  • 4-3. 이미지 업로드 III (갯수제한)
  • 4-4. 이미지 업로드 IV (BG로 구현)
  • 5. 체크박스, 라디오 버튼 디자인
  • 6. 숫자만 입력가능
  • 7. Textarea 글짜 수 카운트
  • 8. Textarea 엔터 클릭 시 높이 조절(채팅방)
  • 9. 파일 업로드 (목록 생성 & 삭제)

• Text Editor -

  • 1. summernote I
  • 2. summernote II(옵션 설정)

• Text Effects -

  • 1. 제자리에서 좌우로 움직이는 글씨(IE10 이상에서 작동)
  • 2. 왼쪽에서 날라와서 좌우로 움직이는 글씨(IE10 이상에서 작동)
  • 3. 0부터 올라가는 숫자
  • 4. 소수점부터 올라가는 숫자(숫자색과 크기도 서서히 변경)
  • 5. 마우스 오버시 무지개 색깔로 변하는 글씨
  • 6. 움직이는 글씨(포트폴리오 용)

• Chart & Graph -

  • 1. 움직이는 원 그래프( circles / 모바일 / IE9 이상에서 작동)
  • 2. 움직이는 원 그래프( circleChart / 모바일 / IE9 이상에서 작동 )
  • 3. 파이형 그래프( billboard )
  • 4. Line 그래프( Chart.js )

• jQuery UI -

  • 1-1. DatePicker(기본)
  • 1-2. DatePicker(프레지던트 호텔)
  • 1-3. DatePicker(투액 모바일)
  • 1-4. DatePicker(투액 모바일 - 연구중...)
  • 1-5. DatePicker(뉴브랜드호텔, 출발일 및 도착일 설정, 결과값 표시)
  • 1-6. DatePicker(프리비아 유지보수, 날짜 표시 및 날짜 선택 3개까지)
  • 1-7. DatePicker(프리비아 리뉴얼)
  • 2-1. DatePickk I(모바일 전용)
  • 2-2. DatePickk II(모바일 전용)
  • 3. Progress Bar
  • 4-1. Draggable I
  • 4-2. Draggable II
  • 5-1. Sortable I
  • 5-2. Sortable II
  • 6. Slider Range

• Game -

  • 1. 틀린그림찾기
  • 2-1. 룰렛 (pc)
  • 2-2. 룰렛 (mobile)

• Javascript -

  • 1. 합계(배열 합산, 숫자 3자리 단위마다 콤마)
  • 2. 소수점부터 올라가는 숫자(숫자 3자리 단위마다 콤마)
  • 3-1. PC,Mobile 체크
  • 3-2. Android, iOS 체크
  • 4. 유연한 메뉴(늘어나는 텍스트, 활성화 위치)
  • 5. 객체지향 프로그래밍 연습
  • 6. 기본 이벤트를 제거, 이벤트 전달을 제거
  • 7. 웹브라우저 소스보기 막기
  • 8. 오늘 날짜 구해서 커스텀(yy-mm-dd)
  • 9. setInterval 을 활용한 무한 반복 애니메이션1(단독)
  • 9. setInterval 을 활용한 무한 반복 애니메이션2(다중)
  • 10. setTimeout, 자기실행함수를 활용한 무한 반복 애니메이션
  • 11. setTimeout를 활용한 무한 반복 애니메이션

• Etc (1. SelectBox)-

  • 1. 셀렉트 박스(디자인)
  • 2. 셀렉트 박스(option값 인식)
  • 3. 셀렉트 박스(포커스 이동시 자동으로 활성화)
  • 4. 셀렉트 박스(패밀리 사이트)

• Etc (2. Scroll) -

  • 1. 스크롤 바(디자인)
  • 2-1. Iscroll I(웹, 세로 스크롤)
  • 2-2. Iscroll II(모바일, 가로 스크롤)
  • 3-1. Smooth Scrolling I
  • 3-2. Smooth Scrolling II
  • 4-1. Horizon I(jInvertScroll)
  • 4-2. Horizon II(jInvertScroll)
  • 5-1. 마우스 스크롤 시 이벤트(상하 방향 감지I)
  • 5-2. 마우스 스크롤 시 이벤트(상하 방향 감지II) - iPhone5 지원
  • 6. 페이지 로드시 최상단 고정

• Etc (3. 기타 기능 및 문법)-

  • 1-1. each문 문법I
  • 1-2. each문 문법II
  • 2. random 색상 출력
  • 3-1. setTimeout, clearTimeout 문법
  • 3-2. setTimeout(2초 뒤에 클릭)
  • 4-1. 별점
  • 4-2. 별점
  • 5. 화면 확대 & 축소(브라우저 체크)
  • 6-1. 리스트 더보기(클릭 시 5개씩 노출)
  • 6-2. 리스트 더보기(모바일, 가장 하단에 내려왔을 때 추가됨)
  • 7. 안드로이드, 아이폰 구분해서 앱 설치
  • 8. substring 문법
  • 9. indexOf 문법
  • 10. 날짜, 시간
  • 11. 제품 갯수 조절
  • 12. 검색결과(검색어 표시)
  • 13-1. 카운트 다운 I
  • 13-2. 카운트 다운 II
  • 13-3. 카운트 다운 III(다수 상품 카운트)
  • 13-4. 카운트 다운 IV(다수 상품 카운트 심화)
  • 14. 카카오톡
  • 15. 배열, each문을 이용한 블럭 이동
  • 16. Placeholder(IE하위버전에서 작동)
  • 17. 반응형 이미지맵

• Etc (4. iframe 관련)-

  • 1-1. 부모창에서 자식 iframe 스크롤 이벤트 제어

• POPUP -

  • 1. 윈도우 팝업
  • 2-1. 레이어 팝업(오늘 하루 보지 않기 - 24시간으로 설정)
  • 2-2. 레이어 팝업(오늘 하루 보지 않기 - 오늘 자정으로 설정)
  • 3. 팝업 클릭 시 html, body 움직이지 않도록 고정
  • 4. 제이쿼리 팝업
  • 5. 제이쿼리 모달
  • 6. Magnific Popup

• API -

  • 1-1. 네이버 지도 API (기본)
  • 1-2. 네이버 지도 API (주소명으로 위치 찾기)
  • 1-4. 네이버 지도 API (툴팁까지 가져오기)
  • 2-1. 구글 지도 API
  • 2-1. 구글 지도 API - iframe
  • 2-2. 구글 지도 API (Marker Animation)
  • 2-3. 구글 지도 API (Info windows)
  • 2-4. 구글 지도 API (GeoRSS Layers)
  • 2-5. 구글 지도_NBHM version
  • 3. 인스타그램 API
  • 4. 카카오톡 API
  • 5. 페이스북 API
  • 6-1. 유튜브 API
  • 6-2. 유튜브 예제
  • 6-3. 유튜브 전체화면(JavaScript)
  • 6-4. 유튜브 클릭 시 전체화면(JavaScript)
  • 7. 우편번호 서비스

• Special -

  • 1. Webfont Loader
  • 2. 사이트 미리보기
  • 3. Signature Pad

• Accessibility -

  • 1. 주메뉴(웹접근성 연구소)
  • 2-1. 롤링배너
  • 2-2. 롤링배너(자동)
  • 2-3. 롤링배너(자동+컨트롤)

• Study -

  • - 다른 라이브러리, 다른 버전의 jQuery와 충돌 방지하기
  • - 즉시실행함수 표현식(IIFE)
  • - 플러그인 만들기
  • - jQuery 데이터 메쏘드
  • - trim 메서드·정규표현식을 사용한 공백 제거

• Form -

  • - Form submit (single validator)
  • - Form submit (textarea newline)

• Tourvis -

  • - Daterangepicker

• Privia Renewal -

  • 1. Slick
  • 2-1. 데이트 피커, 편도
  • 2-2. 데이트 피커, 왕복
  • 2-3. 데이트 피커, 다구간
  • 4-1. 가격대 슬라이드 (Input 버전)
  • 4-2. 가격대 슬라이드 (Span 버전)
  • 4-2. 가격대 슬라이드 (Span 버전)
  • 5-1. 호텔 목록, 가장 하단까지 스크롤 시 목록 추가 (Ajax Load & Skeleton Screen)
  • 5-2. 호텔 목록, 가장 하단까지 스크롤 시 목록 추가 (Ajax Load & More & Skeleton Screen)
  • 5-3. 호텔 목록, 최종본

• Q & A -

  • 1. data 메서드를 활용한 메뉴 active