본문 바로가기

Dev/script37

jquery animate 사용예 jquery animate 사용예 .animate() 함수를 이용하면 html Element 상의 객체 움직임을 부여할 수 있다. 반드시 CSS 속성 맵 데이터와 함께 사용한다. 움직임에 관련된 속성들은 단수 수치 값(single numeric value)을 이용한다. 즉, width, height, left, margin 등에 이용할 수 있지만 color같은 값에는 사용할 수 없다. .animate( properties [, duration] [, easing] [, complete] ) Returns : jQuery Duration은 지속시간이며, complete에는 콜백 함수를 지정해서, 애니메이션 동작 이후 함수를 실행할 수 있다. 단, 이 함수에는 인자값을 넘겨 줄 수는 없다. .animate(.. 2020. 11. 11.
Jquery 스와이퍼 슬라이더 플러그인 idangerous.swiper.js pagination 스타일 변경하기 Jquery 스와이퍼 슬라이더 플러그인 idangerous.swiper.js pagination 스타일 변경하기 서론 Jquery 스와이퍼 슬라이더 플러그인인 idangerous.swiper.js를 사용하면 모바일 기기에서 손쉽게 슬라이드를 터치하여 내용을 넘길 수 있습니다. 그러나 이 플러그인의 페이징 처리 기능은 주로 숫자나 불릿 형태로 페이지를 표시하며, 텍스트 문장으로 페이지네이션을 설정하는 기능은 기본적으로 제공되지 않습니다. 이에 대한 요구사항이 있을 때, 플러그인의 코어를 수정하지 않고도 텍스트 문장을 이용한 페이지네이션을 구현할 수 있습니다. 이 글에서는 이러한 요구사항을 충족시키기 위한 해결책을 제시하고자 합니다. 해결책: 페이지네이션 텍스트 문장으로 변경하기 페이지네이션을 텍스트 문장으.. 2020. 11. 3.
img 태그 404 Error시에 대체 이미지 띄우기 img 태그 404 Error가 발생하면 대체 이미지를 띄우는 것은 쉽다. 아니 처음부터 그렇게 만들면 별로 걱정할 문제는 아니다. 그리고 대체로 레이아웃을 구성하는 이미지는 bg속성을 준 스타일을 먹이는 경우가 대부분이므로, bg가 깔리지 않으면 스타일만 변경해 주면 된다. 그 이외의 레이아웃을 구성하는 이미지 요소들도 마찬가지로 처리하면 된다. 문제는 게시판이나, 갤러리 등 다수 사용자 빌런 그룹이 존재하지 않는 이미지를 올리거나, 올렸던 이미지 소스 주소가 없어진 경우에 발생하는 이미지 에러 문제는 보통 다음과 같이 해결해 주어야 한다. 그런데 앞서도 지적했지만 게시판에 이미지를 불펌해다 붙이는 사용자들이 친절하게 html태그를 열어서 대체 이미지 주소를 입력하는 attr을 집어넣기를 바라는 것은 .. 2020. 10. 26.
자바스크립트 onresize 이벤트 창크기 변경 감지 자바스크립트의 onresize 이벤트 창의 크기가 변경될 때마다 그 것(이벤트)을 감지해서 특정 처리를 해야 될 때 늘 onresize 이벤트를 활용할 수 있다. Syntax HTML Attribute Event Property object.onresize = handler; attachEvent Method object.attachEvent("onresize", handler) http://msdn.microsoft.com/en-us/library/ms536959(VS.85).aspx onresize 이벤트를 적용가능한 엘레멘트는 window 객체 뿐만 아니라 다음의 객체들에도 적용이 가능하다. A, ADDRESS, APPLET, B, BIG, BLOCKQUOTE, BUTTON, CENTER, CITE.. 2020. 10. 23.
썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 가로세로 비율 썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 가로세로 비율 썸네일 이미지 비율유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 썸네일이나 대표이미지의 가로 세로 비율이 고정된 영역에 다양한 이미지의 가로세로 비율이 다를 때, 해당 영역의 크기에 딱 맞춰서 넘치는 영역은 잘려 보이게 하는 것은 조금 복잡하다. 이미지 자체만으로 하려면 서버에서 자체적으로 이미지를 해당 비율에 맞춰서 잘라 주어야 하겠지만, 원본 소스를 유지한체 스타일시트 CSS만으로 해결하려면 어려움이 따른다. 이미지가 세로가 긴 포트레이트일 수도 있고, 가로가 긴 랜드스케이프일 수도 있기 때문이다. CSS는 자체적으로 어느 쪽이 긴 지 알 수 없다. SCSS.. 2020. 10. 11.
제이쿼리 팁 특정 태그에 CSS 적용 jquery .each(), .text(), .addClass(), $(this), .css(), .replace() 크롬/IE color 해석 방식 차이 [제이쿼리 팁] 워드프레스 포스팅 글 내용 중 특정 태그에 CSS를 적용하라 크롬/IE color 해석 방식 차이. jquery .each(), .text(), .addClass(), $(this), .css(), .replace() 요즘 특허 사이트의 콘텐츠용 사이트를 의뢰받아서 워드프레스로 제작 중인데요. 워드프레스 적용 자체는 별 것 아닌 작업이지만, 우리의 까다로운 클라이언트님의 소소한 요청이 워드프레스나 워드프레스 테마의 PHP를 건드리지 않고, 원하는 모양을 만들어 달라는 고난도 요청이 좀 많다. 이 번 요청은 이미 클라이언트가 작성해 둔 글 내용에서 링크들을 특정 모양을 "디자인 스타일대로 CSS를 입혀라"라는 미션입니다. 단! 제한 조건은 클라이언트는 html이나 css에 대해 전혀 모르고.. 2020. 10. 3.
jQuery selector함수 slice() - start, end 까지 index 요소 일부만 선택 between jQuery selector함수 slice() - start, end 까지 index 요소 일부만 선택 between 1번부터 10번까지 형제 요소들이 있을 때 이 중에서 2번부터 5번까지만 선택해서 jquery로 동작을 시키고 싶을 때가 있다. 이럴 때 사용하는 함수가 바로 jquery slice() 메쏘드다. 즉 나열된 요소의 일부만 선택하는 선택자 메쏘드다. 사용방법 사용방법은 다음과 같다. $('selector').slice(2,5).addClass('newClass'); 이와 같이 실행하면, 선택된 요소들에서 eq(2),eq(3),eq(4),eq(5) 가 선택되어서 addClass함수에 의해 'newClass'라는 클래스명이 부여된다. 비단 클래스만 부여하는 것이 아니라 당연히 제이쿼리 제어를 .. 2020. 9. 19.
자바스크립트로 구현한 rgb 색상표 + CSS 16진수 rgb 색상코드 자바스크립트로 구현한 RGB 색상표 + CSS 16진수 색상 코드 2015.08.29 11:11 RGB 색상표를 CSS 16진수(HEX) 색상 코드로 표현하기 퍼블리싱을 할 때 디자인팀에서 지정한 색의 색상을 CSS로 표현할 때 포토샵의 스포이드로 찍어보면 RGB 색상표에서 HEX값을 알 수 있다. 이 RGB 색상표는 #1930a2와같이 표현되는데 난해한 암호 같아 보이지만 다 뜻이 있는 문자의 조합이다. 위에서 일부러 색을 2 글자씩 잘라서 다르게 썼는데, 명민한 사람이라면 금방 눈치챘을 것이다. RGB라는 말의 뜻부터 이해한다면 따로 설명하지 않아도 감이 따악 올 것이다. RGB의 뜻은 R=Red, G=Green, B=Blue를 뜻한다. 그러니 위의 코드에서 #을 제외한 나머지 6자리의 각 두 자리는.. 2020. 9. 7.
자바스크립트 시간 제어 함수 setTimeout(), setInterval(), clearTimeout() 자바스크립트 시간 제어 함수 setTimeout(), setInterval(), clearTimeout() 자바스크립트를 이용해서 일정한 시간 간격마다 혹은 일정한 시간이 지난 뒤에 특정 이벤트를 발생시키거나 동작을 취해야 할 경우가 종종 있다. 이럴 때 사용하는 자바스크립트 시간 함수가 바로 setTimeout()와 setInterval()이다. setTimeout(), setInterval()의 가장 큰 차이점은 한 번만 실행하느냐, 계속 반복적으로 실행하느냐의 차이다. 위의 두 예제처럼 단 한번만 적용하고 싶다면 setTimeout을 사용하고, 일정한 시간간격으로 반복 적용하고 싶다면 setInterval()을 사용하면 된다. setInterval에서 1000이라는 숫자는 밀리세컨드로 해당 숫자의 .. 2020. 8. 31.
자바스크립트 link Canonical javascript createElement appendChild window.location.href 결론부터 말하자면 삽질이다. 어느 날 갑자기 구글 애드센스 광고가 뜨지 않길래 확인해 보니 개인 도메인으로 설정된 무료 도메인의 루트 도메인에서 구글 애드센스 정책 위반이 떴다. 무료 도메인은 내도메인.한국 의 주소를 사용했다. 이게 해결이 안되면 광고를 게재할 수가 없단다. 난감하게도... 이 도메인 주소로 네이버 유입이 제법 있다. 그래서 혹시나 301 redirection이라도 써 볼까 했지만 그럴 방법이 전혀 없다. 돈을 쓰면 가능하겠지만... 일단 새로 호스팅을 받지 않는다는 전제 하에 그렇다. 그래서 궁리한 것이 내 도메인 한국의 단일 페이지 수정에서 Canonical를 설정해주고, 자바스크립트 location.href로 리다이렉션을 걸어서 옮기는 방법을 생각해 봤다. 결과는 앞서 말한 데로 .. 2020. 8. 30.
제이쿼리 아코디언 on() 이벤트 주간 스케줄 만들기 css :not() 선택자 제이쿼리 on() 이벤트 와 css :not() 선택자를 이용해서 주간 스케줄 제이쿼리 아코디언 만들기 일하는 중이라 자세한 제이쿼리 아코디언 설명은 생략한다. 다음과 같은 주간 스케줄 표에서 특정 날짜나 특정 스케줄을 선택하면 열리고 다른 스케줄은 접히는 아코디언을 구현하는 것이다. 핵심은 on()함수와 css:not() 선택자를 이용하는 것이다. 특정 엘리먼트를 선택하면 선택된 엘리먼트에만 클래스를 부여하고 나머지 형제 엘리먼트에서는 클래스를 빼고, css:not() 선택자로 선택여부를 토글할 수 있다는 것이 핵심이다. css /* scheduleWeek*/ .scheduleWeek { width: 100%; min-width: 950px; table-layout: fixed; border-spaci.. 2020. 8. 24.
모바일홈페이지 주소창 감추기 tip body[orient="portrait"] ,body[orient="landscape"] [모바일홈페이지 제작] 모바일 웹 주소창 감추기 tip 모바일홈페이지를 제작할 때 코딩에서 위의 사진처럼 모바일 주소창 없애기 방법에 대한 설명이다. 보통 흔히 아래와 같은 자바스크립트를 많이 쓴다. window.addEventListener('load',function(){ setTimeout(scrollTo,0,0,1); },false); 이 스크립트는 모바일웹서 주소창이 사라지는 기능을 적용하고 있다. 혹은 아예 body 태그에 onload로 넣을 수 있다. ... 이 자바스크립트는 window.setTimeout(func, delay, [param1, param2, ...])을 호출하는 형식이다. 1. 0초 후에 scrollTo 메소드를 실행시켜라 2. [param1, param2, ...] 은 .. 2020. 2. 19.

티스토리툴바