코딩룸*◡*

반응형웹을 만들게 되면 화면 크기에 따라 이미지를 제어해야 하는 경우가 생긴다.jquery를 이용해 어떻게 할 수 있을지 생각해보자. 1. .resize() 선언resize를 이용하여 화면 크기의 변경을 체크한다.선언하자마자 바로 불러와 계속해서 체크할 수있도록 해준다. $(function((){$(window).resize(function(){}).resize();}); 2. 현재 화면의 크기를 변수에 저장일단 현재 화면의 크기를 변수에 저장한다. $(function((){$(window).resize(function(){var width = window.innerWidth;}).resize();}); 3. 원하는 화면 사이즈마다 이미지의 주소를 변경if~else 구문과 .attr()을 이용하여 wid..

아 예뽀

주제선정이유 평소에 CSS 스타일을 적용하다가 -webkit-, -moz-, -o-(요건 잘 사용 안한다ㅎㅎ)로 시작하는 css 를 추가해야하는 경우가 있다. 그런데 이게 사실 정확히 뭔지는 모르고 다른 브라우저에서도 동일하게 CSS가 먹도록 추가해야 한다는 정도만 알고 있었다. 그래서 이것에 대한 정확한 개념과 필요성을 알기 위해 주제로 선정하게 되었다. 1. 벤더 프리픽스(Vender Prefix)란?간략하게 말해서 Vendor 는 "공급업체"이고, Perfix는 "접두사"이다. 즉, 벤더 프리픽스(Vender Prefix)는 '공급업체접두사'라고 정의 내릴 수 있다.html5로 넘어가는 과도기적인 시점에서 몇몇의 CSS3의 기능은 웹표준이 아니다. 때문에 브라우저마다 접두어를 넣어줘서 변환 효과를 ..

자바스크립트 소스를 읽을때 기초가 부족해서인지 바로 잘 읽지를 못한다.. 그래서 기초를 다지기로 했다. ^^ 1. 연산자'3+5', '3

1. Easing functionseasing(timing 이라고도 함)은 애니메이션을 더욱 부드럽고 편안한 느낌이 들게 만들어서 앱 사용자에게 편안한 느낌을 주고 전반적인 사용 환경을 개선해준다.그러나 짧게 유지할 수 있는 경우를 제외하고 ease-in 또는 ease-in-out 애니메이션을 피해야한다. 사용자에게 굼뜬 느낌을 줄 수 있기 때문이다. 2. easing 키워드다음은 CSS에서 사용할 수 있는 키워드 중 일부이다. 1) ease : 시작과 종료를 부드럽게2) linear : 일정3) ease-in : 서서히 시작 4) ease-out : 서서히 종료5) ease-in-out : 서서히 시작하여 서서히 종료6) cubic-bezier(x1,y1,x2,y2) : 3차 배지에 곡선의 P1과 P2..

슬라이드 배너는 구글에서 검색해보면 플러그인으로서 셀 수없이 많이 접할 수 있다. 그러나 정작 직접 만들 수 있는 사람이 몇이나 될지 궁금해졌다. 그래서 내가 한번 직접 만들어보고자 주제로 정했다. 1. 생각해보기1) 이전, 다음 버튼을 클릭했을 때 이미지가 변경되는 기능 짜보기 이미지를 포함하고 있는 ul 요소에 animate() 메서드를 적용하는 방법으로 만들어보자. 수정중...