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

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) :..

2D transformtransform 은 요소를 변형을 할 수 있게 하는 속성이다. rotate, scale, translate, skew 등과 같은 변형이 가능하다. None : 변형 속성을 적용하지 않음 matrix(n,n,n,n,n,n) : translate, scale, rotate, skew 각 속성을 한꺼번에 적용할 수 있는 매트릭스 함수translate(x,y) : 요소의 위치를 옮기는 속성scale(x,y)요소의 크기를 비율에 맞춰 확대/축소하는 속성rotate(angle) : 요소를 지정된 각도 만큼 회전시키는 속성skew(x-angle, y-angle) : 요소를 지정된 각도만큼 모양을 비스듬히 변형시키는 속성 ex1.) translate - 위치 이동 12345678910111213..

@font-face 웹폰트를 다운 받아 사용할 수 있으나 현재 한글은 거의 지원되지 않는다.WOFF는 웹페이지에서 사용하기 위한 글꼴 형식이다. 일반 트루타입(ttf) 글꼴을 gzip으로 압축한 형태으므로 eot 처럼 크기가 작아서 웹폰트로 사용했을 때 ttf 보다 로딩 시간이 훨씬 짧다.IE9에서 EOT(Embedded Opentype)과 함께 WOFF(Web Open Font Format)을 지원한다. FF 3.6, Chrome 6, Safari 6, Opera 11.1 이상에서도 WOFF를 지원하므로최신 브라우저에 두루 적용할 수 있는 형식이다 font:기존에는 웹페이지에 나타낼 수 있는 폰트가 사용자의 컴퓨터에 설치된 것만 가능했지만 css3 에서 @font-face 라는 속성이 생기면서 원하는 ..

word-wrap기존에는 영어 띄어 쓰기를 하지 않는 경우 박스 밖으로 밀려나는 것을 볼 수 있다. Css3에서는 word-wrap기능으로 박스의 폭에 맞추어 넣을 수 있게 되었다. Break-word : 해당 영역에 넓이 값을 벗어 날 경우 자동으로 줄 바꿈 해준다. ex) 자동 줄바꿈1234567891011121314151617181920212223242526272829303132333435word-wrap p{width:11em; border:1px solid #000000;background:yellow;}p.test{width:11em; border:1px solid #000000;word-wrap:break-word;background:yellow;}word-wrapcss2 기준 TestTes..

text-shadow text-shadow 는 글자에 그림자를 주는 속성이다. 그림자의 수평 수직 거리를 지정하고 흐림정도와 색상값을 따로 줄 수 있다. h-shadow : 글자의 수평 그림자 위치를 지정하며 음수값도 허용v-shadow : 글자의 수직 그림자 위치를 지정하며 음수값도 허용Blur : 흐림정도의 값을 지정Color : 색상값을 지정 ex1) 텍스트에 그림자 주기123456789101112131415161718192021text-shadow h1{text-shadow: 5px 5px 5px #FF0000;/* x, y, 블러값, 색상코드 */}Text-shadow!! text-shadow 는 글자에 그림자를 주는 속성이다. 그림자의 수평 수직 거리를 지정하고 흐림정도와 색상값을 따로 줄 수..