코딩룸*◡*

http://colorscripter.com/ 코딩하면서 소스에 색상을 입히면 보기에도 쉽고 깔끔한데위의 url이 그것을 도와준다.

작업을 하다가 ol이나 ul에 자동으로 번호가 붙게 할 수 있다.그러나 이 번호 스타일은 변경이 불가능하고, 해당 단계에 대해서만 표시하지 다단계는 되지 않는다.그래서 CSS counter로 다단계 순번을 만들어보기로 했다. 1. li {counter-increment: customlistcounter;} ul.custom li { counter-increment : customlistcounter; } 2. li:before {content:counter(customlistcounter)" ";}content에 counter(customlistcounter) " ";은 "customlistcounter" 변수의 순번 값을 대문자 로마자로 출력하고 그 뒤에 빈칸을 붙이라는 의미이다. ul.custom l..

반응형웹을 만들게 되면 화면 크기에 따라 이미지를 제어해야 하는 경우가 생긴다.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..