웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

이벤트명 : 워크넷 내일응원 캠페인 작업일 : 2013.10.11 url : http://ucc-work.co.kr/campaign/

이벤트명 : 고용 노동부 굿잡 캠페인 작업일 : 2013.10.02 url : http://moel-event.kr/goodjob/

이벤트명: 일자리 창출 및 고용노동정책 개선을 위한 대국민 아이디어 공모전 - 고용노동부 작업일 : 2013.4.23 url : http://www.moel-event.kr/ideacontest2013/(www.moel-event.kr/ideacontest2013/proposal.html)(www.moel-event.kr/ideacontest2013/ex.html) 2012 : url( http://www.moel-event.kr/ideaContest/ )

이벤트명 : 쌀박물관 가래떡데이 스페셜 이벤트 url : http://www.rice-museum.com/riceContest/index.html 작업일 : 2012.10.15

User Interface사용자들이 컴퓨터 시스템 또는 프로그램에서 데이터 입력이나 동작을 제어하기 위하여 사용하는 명령 또는 기법을 말하는데 css3에서는 resize, box-sizing, outline 등이 제공된다. Resize:박스 크기를 사용자가 직접 드래그앤 드롭하여 크기를 조절 할 수 있다. 기존에는 자바스크립트 등으로 처리 해야 했는데 CSS3 만으로 아주 간단히 사용자가 조절 가능하게 되었다.horizontal, vertical, both 값으로 가로, 세로 또는 양방향으로 조절 가능하다. Resize : both; 양방향Resize : vertical; 세로방향Resize : horizontal; 가로방향 Box-sizing:가변폭에서 box-sizing이 content-box로 계산..

Color기존의 컬러형식으로는 RGB format 이 대부분이였다. 그러나 css3에서는 HSL 표기법과 alpah(투명도)값을 적용할 수 있어 투명한 디자인이 가능하게 되었다. RGB & RGBA RGB(적·녹·청)에 의해 색을 정의하는 색모델로 우리나라 웹개발자들에게 가장 익숙한 컬로포멧일 것이다.RGB포멧의 문법은 Color : #ab19ev; 와 color : rgb(186, 145, 254); 그리고 color : rgb(72%, 56%, 99%); 를 예를 들 수 있는데 네이버를 비롯한 최근의 웹사이트들은 rgb(72%, 56%, 99%); 스타일의 포멧을 많이 사용하는 추세인데 아마도 RGBA 와 같은 alpah 값, 즉 투명도를 표현하기 위한 방법때문이지 않을까 생각한다. Backgroun..

Multiple Columns여러 개의 박스를 사용 하지 않고 한 개의 박스 안에 신문의 기사를 읽는 것처럼 여러 개의 단 을 나누어 사용할 수 있다. column-count : column 개수(예: column-count:2)column-gap : column 간 간격 (예: column-gap:20px)column-width : column 가로 사이즈 (예: column-width:200px)column-rule : column 테두리 속성 (예: column-rule:1px solid #bbbbbb) ex1) 3단 칼럼1234567891011121314151617181920212223242526Multiple Columns .newspaper{-moz-column-count:3;-webkit-c..

Animation기존에 살펴 보았던 transition 이나 transform 속성을 사용하여 애니메이션 효과를 줄 수 있었다.하지만 이것은 임의에 정해진 상태에서 다른 상태로 효과를 주는 것이다. Animation의 속성을 이용하면 애니메이션의 시작점과 종료점을 명시적으로 제어할 수 있게 된다.시작점과 종료점은 키프레임(keyframe) 개념으로 설명되며, 플래시나 에프터이펙트, 프리미어등 각종 모션 프로그램을 다뤄본 사람이라면 이해가 쉬울 것이다. 이 키프레임들의 연결 및 이동으로 자연스러운 애니메이션 효과 처리가 가능해진다. 키프레임애니메이션의 시작점과 정료점 사이의 효과를 프레임으로 나누어 각각의 css 속성들로 정의한다.from ~ to 로 시작점과 종료점을 정의할 수 있으며, 비율로도 정의 할..

Transitiontransition 이란 단어의 뜻은 “다른 상태로의 변화”를 뜻한다.css3 에서 새로 생긴 transition 도 모양이나 색상의 변화를 시간을 두고 줄 수 있는 속성이다.transition-property, transition-duration, transition-timing-function, transition-delay 총 네 가지 속성의 축약으로 transition 하나를 사용할 수 있다.새로 생긴 transition 효과는 주로 마우스 오버했을 때 해당 요소를 어떻게 변화시킬지 같은 부분에 많이 사용한다. transition-property : transition-property 는 transition 효과를 어떤 속성에 줄 것인지 직접 css 속성 중 이름을 지정해주는 속..

3D transform3D 변형을 할 수 있게 하는 속성이다. rotate, scale, translate, skew 등과 같은 변형이 가능하다. None : 변형 속성을 적용하지 않음matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) : translate, scale, rotate, skew 각 속성을 한꺼번에 적용할 수 있는 매트릭스 함수translate3d(x,y,z) : 요소의 위치를 옮기는 속성translateX(x) : 요소의 x 좌표 위치를 옮기는 속성translateY(y) : 요소의 y 좌표 위치를 옮기는 속성translateZ(z) : 요소의 z 좌표 위치를 옮기는 속성scale3d(x,y,z) : 요소의 크기를 비율에 맞춰 확대/축소하는 속성scaleX(x) :..