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

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

disabled - 비활성요소 선택자 : 사용 불가능한 요소 선택 ex) 사용할수 없는 input 요소 선택 ( 예 : input:disabled ) 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 :disabled input[type="text"]:enabled { background:#ffff00; } input[type="text"]:disabled { background:#dddddd; } :disabled 사용 불가능한 요소 선택 First name: Last name: 사용불가 :

:enabled : 사용가능한 요소 선택 ex) 사용가능한 input 요소를 선택 ( 예 : input:enabled ) :enabled input:enabled{background:#ffff00;}input[type="text"]:disabled{background:#dddddd;} :enabled 사용 가능한 요소 선택 First name: Last name: etc :

target - 활성요소 선택자 : 앵커 이름을 포함하는 URL를 클릭 했을때 활성화된 요소를 선택 ex) a태그의 링크가 활성화 됫을때 활성화된 id를 활성화 ( 예 - :target ) 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 :target :target { border: 2px solid #D4D4D4; background-color: #e5eecc; } :target 앵커 이름을 포함하는 URL를 클릭 했을때 활성화된 요소를 선택 test 1 test 2 Click Anchor. content 1... content 2...

empty - 빈 요소 선택자 : (텍스트포함)안이 텅빈 요소 노드 선택 ex) 텅빈 p 요소 선택 ( 예 : p:empty ) 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 :empty p:empty { width:100px; height:20px; background:#ffff00; } :empty (텍스트포함)안이 텅빈 요소 노드 선택 test1 test2 test3