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

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 는 글자에 그림자를 주는 속성이다. 그림자의 수평 수직 거리를 지정하고 흐림정도와 색상값을 따로 줄 수..

background background 속성은 모든 background 속성들을 한번에 선언할 수 있는 축약속성이며 css3 에서는 새로 추가된 background-size, background-origin, Multi-background -image 속성에 대해 설명한다. background -size : 배경이미지의 사이즈를 지정 Length : width, height 값을 직접 지정. 하나만 지정할 경우 나머지는 auto 값을 적어준다 Cover : 이미지 크기 비율을 그대로 유지한 상태에서 원하는 영역에 전체 이미지가 들어가도록 가장 작은 크기로 이미지 스케일을 조정한다.(가로와 세로 중 큰 값에 맞춘다) Contain : 박스의 넓이값에 자동으로 맞춰 준다. background -origin ..

box-shadow : 해당 박스요소에 그림자를 나타낼 수 있게 값을 지정한다. h-shadow : 필수값. 수평의 그림자 위치를 지정하며 음수값도 허용된다 v-shadow : 필수값. 수직의 그림자 위치를 지정하며 음수값도 허용된다 Blur : 필수값. 그림자의 흐릿한 정도를 지정spread그림자의 퍼짐 정도를 지정 ( 숫자가 커질수록 상단과 왼쪽 부분에도 그림자가 나타난다. ) Color : 필수값. 그림자의 색상을 지정 Inset : 바깥으로 지정된 그림자를 안쪽으로 변경할 수 있는 값 ( 기본적으로 오른쪽과 하단에 생기던 그림자가 박스 내부 그림자로 바뀌면서 상단과 왼쪽으로 생기게 된다. ) ex1) 박스 바깥쪽 그림자 주기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1..

border-image border-image 속성은 테두리에 이미지를 배경처럼 적용하는 속성으로 css3에서 새로 생긴 border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat 같은 속성들의 축약속성이다. Value Description border-image-source 이미지의 경로를 지정하는 속성 border-image-slice 이미지 테두리의 안쪽 오프셋 border-image-width 이미지 테두리의 너비값을 지정하는 속성 border-image-outset 이미지 테두리의 바깥쪽 오프셋 border-image-repeat 이미지의 반복 여부를 지정하는 속성 ex) ..

border-radius : 박스의 모서리를 둥굴게 만든다. 곡선으로 표시된 부분은 background-image를 설정한 영역도 영향을 받음. 곡률은 각 모서리별로 지정할 수도 있다 Border-radius: 둥근 모서리 축약 속성 Border-bottom-left-radius: 박스의 왼쪽 하단 모서리의 둥근 정도를 지정하는 속성 Border-bottom-right-radius : 박스의 오른쪽 하단 모서리의 둥근 정도를 지정하는 속성 Border-top-left-radius : 박스의 왼쪽 상단 모서리의 둥근 정도를 지정하는 속성 Border-top-right-radius : 박스의 오른쪽 상단 모서리의 둥근 정도를 지정하는 속성 ex1) 둥근테두리 만들기 1 2 3 4 5 6 7 8 9 10 11..

::selection - 영역 선택자 : 사용자가 드래그한 영역을 표시 ex ) 사용자가 드래그한 영역을 노란색으로 표시 ( 예 - ::selection ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 ::selection ::selection { background:#ffff00; } ::selection 사용자가 드래그한 영역을 표시 드래그 해 보세요~ 드래그 해 보세요~ 드래그 해 보세요~ 드래그 해 보세요~ 드래그 해 보세요~ 드래그 해 보세요~ 드래그 해 보세요~ 드래그 해 보세요~ 드래그 해 보세요~

not(selector) : 선택한 요소가 아닌 요소들을 선택 ex) p태그가 아닌 요소들을 선택( 예 : :not(p) ) :not(selector) p{color:#000000;} :not(p){color:#ff0000;} :not(selector) 선택한 요소가 아닌 요소들을 선택 div 1 p태그 1 p태그 2 div 2 p태그 3 div 3