part 3 Sample download:
https://drive.google.com/file/d/1qP6yq0ACgDS6lDjRpwDzM6F6DrfhGr1w/view?usp=sharing
https://bxslider.com/
part 3: 멀티플 슬라이드
part 4: 슬라이드 활성화 애니메이션
part 5: 슬라이드 옵션 활용하기
part 6 : 자동슬라이드 구현
part 7 : 슬라이드에 동영상 구현하기
part 8: 탭과 슬라이드 연동하기
에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#bxslider, #슬라이드, #jquery, #웹퍼블리셔, #프론트엔드
jquery 54 파트1 예제에서 이어서 학습해주세요.
파트1 Sample LINK : http://bitly.kr/KMHTYd
https://bxslider.com/
part 2 : 좌우 컨트롤
part 3: 멀티플 슬라이드
part 4: 슬라이드 활성화 애니메이션
part 5: 슬라이드 옵션 활용하기
part 6 : 자동슬라이드 구현
part 7 : 슬라이드에 동영상 구현하기
part 8: 탭과 슬라이드 연동하기
에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#bxslider, #슬라이드, #jquery, #웹퍼블리셔, #프론트엔드
Sample LINK : http://bitly.kr/KMHTYd
https://bxslider.com/
part 1 : 기본사용법
part 2 : 좌우 컨트롤
part 3: 멀티플 슬라이드
part 4: 슬라이드 활성화 애니메이션
part 5: 슬라이드 옵션 활용하기
part 6 : 자동슬라이드 구현
part 7 : 슬라이드에 동영상 구현하기
part 8: 탭과 슬라이드 연동하
에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#bxslider, #슬라이드, #jquery, #웹퍼블리셔, #프론트엔드
Sample LINK : http://bitly.kr/KMHTYd
http://detectmobilebrowsers.com/
에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#웹퍼블리셔, #프론트엔드
| jQuery 56 [ BX slider #2] bx 슬라이더 완벽 설명 8편중 2편 - 좌우 컨트롤 변경하기 (0) | 2019.07.09 |
|---|---|
| jQuery 55 [ BX slider #1] bx 슬라이더 완벽 설명 8편중 1편 - 기본 사용법 (0) | 2019.07.09 |
| jQuery 53 [ Progress JS ] 프로그레쓰 JS를 이용한 SVG Line, circle, 나만의 Path를 애니메이션으로 구현하기 (0) | 2019.07.01 |
| jQuery 52 [ Cleave JS ] 클리브 JS를 이용한 폼 패턴 쉽게 구현하기, 전화번호, 날짜, 카드번호 구현하기 (0) | 2019.07.01 |
| jQuery 51 [ SVG Scroll Animation ] SVG 스크롤 애니메이션 (0) | 2019.07.01 |
Sample LINK : https://codepen.io/alikerock/pen/dzxJWw
https://kimmobrunfeldt.github.io/progressbar.js/
SVG line, circle, path Animation
에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#svg, #animation, #jquery, #웹퍼블리셔, #프론트엔드
| jQuery 55 [ BX slider #1] bx 슬라이더 완벽 설명 8편중 1편 - 기본 사용법 (0) | 2019.07.09 |
|---|---|
| jQuery 54 [ Mobile Detect ] 모바일 디바이스 기기 인식하고 스타일, 또는 모바일 전용페이지로 이동시키기 (0) | 2019.07.09 |
| jQuery 52 [ Cleave JS ] 클리브 JS를 이용한 폼 패턴 쉽게 구현하기, 전화번호, 날짜, 카드번호 구현하기 (0) | 2019.07.01 |
| jQuery 51 [ SVG Scroll Animation ] SVG 스크롤 애니메이션 (0) | 2019.07.01 |
| jQuery 50 [ 인스타그램 API ] 내 인스타그램 계정의 사진으로 갤러리 생성하기 (0) | 2019.06.14 |
Sample LINK : https://codepen.io/alikerock/pen/YxmLMK
http://nosir.github.io/cleave.js/
https://github.com/nosir/cleave.js
form, validation, pattern
에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#card pattern, #form, #pattern, #jquery, #웹퍼블리셔, #프론트엔드
네이버 웹마스터 도구
http://webmastertool.naver.com
GOOGLE 웹마스터 도구
https://www.google.com/webmasters/
sitemap.xml 제작하기 참조
https://www.xml-sitemaps.com/
구글 통계
https://analytics.google.com/analytics/web/
#웹마스터 도구, 구글 통계
| ETC 22 [ Web design guide ] 웹디자인 가이드 - 트렌드에 맞는 웹사이트 개발하기 (0) | 2019.10.27 |
|---|---|
| ETC 19 [ 폰트어썸 사용법 new ] fontawesome v5 나만의 키트 만들기, webfont, svg (0) | 2019.07.16 |
| ETC 17 [ 체크박스 vs 토글 ] checkbox vs toggle 스위치 어떻게 다른가? (0) | 2019.06.05 |
| ETC 16 [ 폼 설계하기 ] 효율적인 폼 설계하기, 라벨명, 필수, 선택 구분, 정렬 (1) | 2019.06.05 |
| etc 15 [파비콘 만들기] Favicon 제작하기 (0) | 2019.06.05 |
Sample Download: https://bit.ly/2IIBLnJ
stroke-dasharray 참고
https://codepen.io/alikerock/pen/WpPMyb
stroke-dashoffset 참고
https://codepen.io/alikerock/pen/PpVQdv
에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#svg animation, #jquery animation, #scroll animation, #웹퍼블리셔, #프론트엔드
Sample Link : https://bit.ly/2ZuRRXs
- SVG Hover Animation
- SVG Click Animation
에디터: visual studio code
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb
#css animation, #css, #animation, #animate
1. jQuery 라이브러리 활용 방법
http://detectmobilebrowsers.com/ 에서 모바일 기기를 감지하고 소스를 다운받는다.
사이트에 접속하여 jquery 버튼을 클릭하여 소스를 다운로드 한다.
jQuery 소스를 다운받고 아래와 같이 작성해본다.
<!DOCTYPE html>
<html>
<body>
<h1>Mobile test</h1>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="detectmobilebrowser.js"></script>
<script>
console.log(jQuery.browser.mobile);
alert(jQuery.browser.mobile);
</script>
</body>
</html>해당 파일을 저장하고 브라우저에서 콘솔화면을 확인하면 false가 나오고 경고창으로 아래와 같이 나온다.
호스팅 서버에 올리고 모바일 기기에서 확인해보면 아래와 같이 true로 값이 경고창으로 나온다.
if 조건문을 작성하여 jQuery.browser.mobile 의 값이 true 일때와 false 일때 효과등을 다르게 작성할 수 있게 되겠다.
그러면 아래와 같이 모바일 기기일때 나타날 요소를 구분할 수 있겠다.
<script>
//console.log(jQuery.browser.mobile);
//alert(jQuery.browser.mobile);
if(jQuery.browser.mobile == true){
$('.pc').css({display:'none'});
} else {
$('.mobile').css({display:'none'});
}
</script>또는 모바일 기기로 접속했다면 별도의 모바일 전용 페이지로 이동시킬수도 있다.
<script>
if(jQuery.browser.mobile == true){
location.href="./mobile/";
}
</script>참고로 디렉토리 구조는 아래와 같다.
2. javascript - userAgent 방식
javascript에서 브라우저(userAgent)를 구분하는 방식을 이용하여 아래와 같이 작성하여 모바일이라면 특정 폴더 및 파일로 연결할 수 있다.
/**
* 모바일 페이지 강제 이동
*/
//Mobile여부를 구분하기 위함
var uAgent = navigator.userAgent.toLowerCase();
// 아래는 모바일 장치들의 모바일 페이지 접속을위한 스크립트
var mobilePhones = new Array('iphone', 'ipod', 'ipad', 'android', 'blackberry', 'windows ce','nokia', 'webos', 'opera mini', 'sonyericsson', 'opera mobi', 'iemobile');
for (var i = 0; i < mobilePhones.length; i++){
if (uAgent.indexOf(mobilePhones[i]) != -1){
location.href="/mobile/home/main.do";
}
};
3. Modernizr 활용하기
Modernizr: the feature detection library for HTML5/CSS3
What is Modernizr? It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user.
modernizr.com
브라우저에서 어떤 기능들을 지원하고 지원하지 못하는지 구분하여 html 최상단에 class명으로 구분하여 주는 modernizr를 활용하여 모바일 기기를 구분할 수 있다. 특히 속성중. touch 이벤트의 지원 여부를 구분하면 된다.
CSS
.no-touchevents .box { color: red; }
.touchevents .box { color: green; }
JS
if (Modernizr.touchevents) {
// supported
} else {
// not-supported
}지원하지 않는 다면 클래스명 .no-touchevents라는 이름이 html 태그에 추가되어 구분할 수 있게 도와준다.
스크립트로는 Modernizr.touchevents의 값이 true, flase일때 구분하여 스크립트를 작성하면 된다.
모더나이저를 사용하기 위해서는 html에서 script 소스를 아래와 같이 로드해야 한다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js" integrity="sha256-ffw+9zwShMev88XNrDgS0hLIuJkDfXhgyLogod77mn8=" crossorigin="anonymous"></script>
4. vanila javascript - window.devicePixelRatio
순수한 자바스크립트를 이용하여 구분하는 방법으로 기기의 픽셀 레티오로 모바일 기기를 구분할 수 있다. 모바일 기기들은 pc와 다르게 작은 화면에 2배 또는 4배의 픽셀을 담고 있다.
각 디바이스의 픽셀 레티오는 아래 사이트를 참고한다.
스크립트에서 아래와 같이 입력하여 pixel ratio가 2이상이면 즉 모바일 기기이면 다른 효과 및 페이지 이동을 할 수 있게 된다.
var ratio = window.devicePixelRatio;
if(ratio > 1){
window.location.href = 'mobile-home.html';
}
| flex(플렉스) layout을 이용한 푸터 하단 고정 배치하기 (0) | 2019.06.24 |
|---|---|
| 다음 daum Map API 활용하기 (0) | 2019.04.29 |
| 네이버 맵 API 사용하기 (0) | 2019.04.29 |