12. 구현기술 Ⅵ - CSS t y i li Acce ssi b W e b
문자색및배경 글꼴및텍스트 표및사용자인터페이스 음성스타일시트
학습내용 문자색과배경, 글꼴과텍스트에대해이해한다. 사용자인터페이스및음성스타일시트에대해이해한다. 3 / 58
문자색및배경 문자색속성 (color 속성 ) 배경속성 (background 속성 ) 배경색, 배경이미지, 내용의관계 배경이미지반복 (background-repeat repeat 속성 ) 배경이미지이동 / 고정 (background-attachment attachment 속성 ) 배경이미지초기위치 (background-position 속성 ) 배경관련속성일괄지정
12.1.1 문자색속성 (color 속성 ) 12.1 문자색및배경 텍스트에색상을지정하기위한속성 색상값 (RGB값, 또는색상단어 ), inherit 브라우저에의존모든요소상속지정불가 visual 없음없음 5 / 58
12.1.2 배경속성 (background 속성 ) 12.1 문자색및배경 요소의배경에색상을지정 배경은박스모델에서내용, 패딩, 보더영역에모두적용 마진영역은항상투명 색상값 (RGB값, 또는색상단어 ), inherit, transparent transparent 모든요소상속하지않음지정불가 visual 없음 Netscape4 6 / 58
12.1.2 배경색속성 (background 속성 ) 12.1 문자색및배경 문자색과배경색의대비 전경색과배경색은충분한색대비를주는것이효율적 문자 문자 7 / 58
12.1.2 배경색속성 (background 속성 ) 12.1 문자색및배경 명도차와색차계산 명도차 전경색과배경색을각각 RGB 값을 0~255의 10진수로전환 {(R*299)+(G*299)+(B*299)}/1000 으로각각의명도계산 명도차는 125 이상이될수있도록지정 ( 권장 ) 색차 전경색과배경색을각각 RGB 값을 0~255의 10진수로전환 {max( 배경색R, 전경색R)-min( 배경색R, 전경색R)}+ {max( 배경색G, 전경색G)-min( 배경색G, 전경색G)}+ {max( 배경색B, 전경색B)-min( 배경색B, 전경색B)} 색차는 500 이상이될수있도록지정 ( 권장 ) 8 / 58
12.1.2 배경색속성 (background 속성 ) 12.1 문자색및배경 요소의배경이미지지정 URI값 (RGB값, 또는색상단어 ), inherit, none none 모든요소상속하지않음지정불가 visual 없음 Netscape4, Oepra 6, Mac IE4/5 9 / 58
12.1 문자색및배경 12.1.3 배경색, 배경이미지, 내용의관계 배경속성에있어서는배경색위에배경이미지가표시되며제일상단에 내용이표시 내용 배경이미지 배경색 10 / 58
12.1.4 12.1 문자색및배경 배경이미지반복 (background-repeat repeat 속성 ) 배경이미지의반복을지정 rapeat, repeat-x, repeat-y, no-repeat, inherit repeat 모든요소상속하지않음지정불가 Visual 없음없음 11 / 58
12.1 문자색및배경 12.1.5 배경이미지이동 / 고정 (background-attachment attachment 속성 ) 배경이미지의이동이나고정을지정 scroll, fixed, inherit scroll 모든요소상속하지않음지정불가 Visual Netscape4 없음 12 / 58
12.1 문자색및배경 12.1.6 배경이미지초기위치 (background-position 속성 ) 배경이미지의초기위치지정 scroll, fixed, inherit scroll 모든요소상속하지않음지정불가 Visual Netscape4 없음 13 / 58
12.1 문자색및배경 12.1.7 배경관련속성일괄지정 배경과관련된속성의일괄지정 background-color, background-image, background-repeat, background-attachment, background-position, inherit 간략화속성이므로기본값없음 모든요소 상속하지않음 background-position 에서만지정가능 Visual 없음 Netscape4 14 / 58
글꼴및텍스트 글꼴패밀리속성 (font-family family 속성 ) 글꼴스타일속성 (font-style 속성 ) 글꼴변형속성 (font-variant 속성 ) 글꼴크기, 폭, 굵기속성 들여쓰기속성 (text-indent 속성 ) 정렬속성 (text-align 속성 ) 장식, 그림자속성 문자간격, 단어간격속성 대소문자변환및공백처리
12.2.1 글꼴패밀리속성 (font-family family 속성 ) 12.2 글꼴및텍스트 글꼴패밀리지정을위한속성 글꼴패밀리명, 대표패밀리명, inherit 브라우저에의존모든요소상속한다지정불가 Visual 없음 Win IE 4, Netscape 4, Safari 16 / 58
12.2.2 글꼴스타일속성 (font-style 속성 ) 12.2 글꼴및텍스트 글꼴스타일지정을위한속성 normal, talic, oblique, inherit normal 모든요소상속한다지정불가 Visual 없음 Netscape 4 17 / 58
12.2.3 글꼴변형속성 (font-variant 속성 ) 12.2 글꼴및텍스트 글꼴변형을위한속성 normal, small-caps, inherit normal 모든요소상속한다지정불가 Visual Netscape 4 Win IE 4/5/5.5, Mac IE 4 18 / 58
12.2.3 글꼴크기, 폭, 굵기속성 12.2 글꼴및텍스트 글꼴크기 (font-size) 를지정하기위한속성 normal, small-caps, inherit normal 모든요소상속한다지정불가 Visual Netscape 4 Win IE 4/5/5.5, Mac IE 4 19 / 58
12.2.3 글꼴크기, 폭, 굵기속성 12.2 글꼴및텍스트 글꼴크기 (font-size) 를지정하기위한속성 절대사이즈, 상대사이즈, 길이, 퍼센테이지, inherit medium 모든요소상속한다부모요소의글꼴사이즈참조 Visual 없음 Win IE 4/5/5.5, netscape 4, Opera 6, Mac IE 4 20 / 58
12.2.3 글꼴크기, 폭, 굵기속성 12.2 글꼴및텍스트 글꼴폭 (font-stretch) 을지정하기위한속성 normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semicondensed, semi-expanded, expanded, extraexpanded, ultra-expanded, inherit normal 모든요소 상속한다 지정불가 Visual 모든브라우저 없음 21 / 58
12.2.3 글꼴크기, 폭, 굵기속성 12.2 글꼴및텍스트 글꼴굵기 (font-weight) 를지정하기위한속성 normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit Normal 모든요소 상속한다 지정불가 Visual 없음 Netscape 4 22 / 58
12.2.4 들여쓰기속성 (text-indent 속성 ) 12.2 글꼴및텍스트 텍스트최초에등장하는행의들여쓰기폭을지정하기위한속성 길이, 퍼센테이지, inherit 0 블록레벨요소상속포함블록의폭참조 Visual 없음없음 23 / 58
12.2.5 정렬속성 (text-align 속성 ) 12.2 글꼴및텍스트 텍스트정렬을지정하기위한속성 left, right, center, justify, 텍스트, inherit 브라우저와텍스트의표기방향에의존블록레벨요소상속지정불가 Visual 없음 Netscape 4, Mac IE 4 24 / 58
12.2.6 장식, 그림자속성 12.2 글꼴및텍스트 텍스트의장식 (text-decoration) 을지정하기위한속성 none, underline, overline, line-though, blinlk, inherit none 모든요소 상속하지않음 지정불가 Visual 없음 Netscape 4, Mac IE 4 25 / 58
12.2 글꼴및텍스트 12.2.6 장식, 그림자속성 텍스트에그림자 (text-shadow) 를넣기위한속성 none, 색, 길이, inherit none 모든요소상속하지않음지정불가 Visual Win IE 4/5/5.5/6, Mozilla, Firefox, Netscape 4/6/7, Mac IE 4/5 없음 26 / 58
12.2.7 문자간격, 단어간격속성 12.2 글꼴및텍스트 텍스트의문자간격 (letter-spacing) 을지정하기위한속성 normal, 길이, inherit normal 모든요소상속지정불가 Visual Netscape 4 Mac IE 4/5 27 / 58
12.2.8 문자간격, 단어간격속성 12.2 글꼴및텍스트 텍스트의단어간격 (word-spacing) 을지정하기위한속성 normal, 길이, inherit normal 모든요소상속지정불가 Visual Win IE 4/5/5.5, Netscape 4 없음 28 / 58
12.2.9 대소문자변환및공백처리 12.2 글꼴및텍스트 텍스트의대소문자변환 (text-transform) 을위한속성 capitalize, uppercase, lowercase, none, inherit none 모든요소상속지정불가 Visual Netscape 4 없음 29 / 58
12.2.9 대소문자변환및공백처리 12.2 글꼴및텍스트 텍스트의공백처리방법 (white-spacing) 을지정하기위한속성 normal, pre, nowrap, inherit none 모든요소상속지정불가 Visual Win IE 4/5, Mac IE 4 Win IE 5.5, Netscape 4 30 / 58
표및사용자인터페이스 표캡션의위치를지정하기위한속성 관련요소의레이아웃 (table-layout layout 속성 ) 보더표시모델 (border-collapse 속성 ) 셀사이공간 (border-spacing 속성 ) 목록마커종류 (list-style style-type type 속성 ) 목록마커이미지 (list-style style-image 속성 ) 목록마커위치 (list-style style-position 속성 ) 목록관련속성의일괄지정 (list-style style 속성 ) 커서속성 (cursor 속성 ) 아웃라인
12.3.1 표캡션의위치를지정하기위한속성 12.3 표및사용자인터페이스 표캡션의위치를지정하기위한속성 top, bottom, left, right, inherit top caption 요소상속지정불가 Visual Win IE 4, 5, 5.5, 6, Netscape 4, Mac IE 4/5 Netscape 6, Opera 6/7, safari 32 / 58
12.3.2 관련요소의레이아웃 (table-layout layout 속성 ) 12.3 표및사용자인터페이스 테이블관련요소의레이아웃방법을지정하기위한속성 top, bottom, left, right, inherit top caption 요소상속지정불가 Visual Win IE 4, 5, 5.5, 6, Netscape 4, Mac IE 4/5 Netscape 6, Opera 6/7, safari 33 / 58
12.3.3 보더표시모델 (border-collapse 속성 ) 12.3 표및사용자인터페이스 테이블의보더표시모델을지정하기위한속성 collapse, separate, inherit collapse (CSS2.1 권고후보에서는 separate로변경 ) table요소상속지정불가 Visual Win IE 4, Netscape 4/6, Mac IE 4/5 없음 34 / 58
12.3.4 셀사이공간 (border-spacing 속성 ) 12.3 표및사용자인터페이스 인접한셀의보더사이의공간을지정하기위한속성 길이값, inherit 0 table요소상속지정불가 Visual Win IE 4/5/5.5/6, Netscape 4, Mac IE 4/5 없음 35 / 58
12.3 표및사용자인터페이스 12.3.5 목록마커종류 (list-style style-type type 속성 ) 목록마커의종류를지정하기위한속성 disc, circle, square, decimal, decimal-leading-zero, lowerroman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper, atin, hebrew, arme-nian, georgian, cjkideographic, hiragana, katakana, hiragana-iroha, katakanairoha, none, inherit disc display 값이 list-item 인요소 (li 요소 ) 상속 지정불가 Visual 없음 Win IE 4/5/5.5/6, Netscape 4, Opera 6/7/8, Mac IE 4/5, Safari 36 / 58
12.3.6 목록마커이미지 (list-style style-image 속성 ) 12.3 표및사용자인터페이스 목록마커이미지를지정하기위한속성 URI, none, inherit none display 값이 list-item 인요소 (li요소) 상속지정불가 Visual Netscape 4 Mac IE 4/5 37 / 58
12.3.7 목록마커위치 (list-style style-position 속성 ) 12.3 표및사용자인터페이스 목록마커의위치를지정하기위한속성 inside, outside, inherit outside display 값이 list-item 인요소 (li요소) 상속지정불가 Visual Netscape 4, Mac IE 4 Win IE 4 38 / 58
12.3 표및사용자인터페이스 12.3.8 목록관련속성의일괄지정 (list-style style 속성 ) 목록관련속성을일괄지정하기위한속성 list-style-type, list-style-image, list-styleposition, inherit 정의되지않음 display 값이 list-item 인요소 (li요소) 상속지정불가 Visual 없음 Win IE 4/5/5.5/6, Netscape 4, Opera 6/7/8, Mac IE 4/5 39 / 58
12.3.9 커서속성 (cursor 속성 ) 12.3 표및사용자인터페이스 커서의종류를지정하기위한속성 URI, auto, crosshair, default, pointer, move, e- resize, ne-resize, nw-resize, n-resize, seresize, swresize, s-resize, w-resize, text, wait, help, inherit auto 모든요소 상속 지정불가 Visual, Interactive Netscape 4, Opera 6 Win IE 4/5/5.5, Mac IE 4 40 / 58
12.3 표및사용자인터페이스 12.3.10 아웃라인 아웃라인의굵기 (outline-width) 를지정하기위한속성 thin, medium, thick, 길이, inherit medium 모든요소상속하지않음지정불가 Visual, Interactive Win IE 4/5/5.5/6, Mozilla, Firefox, Netscape 4/6/7/8, Opera 6, Mac IE 4 Safari 41 / 58
12.3 표및사용자인터페이스 12.3.10 아웃라인 아웃라인의형태 (outline-style) 를지정하기위한속성 none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit none 모든요소상속하지않음지정불가 Visual, Interactive Win IE 4/5/5.5/6, Mozilla, Firefox, Netscape 4/6/7/8, Opera 6, Mac IE 4 Safari 42 / 58
12.3 표및사용자인터페이스 12.3.10 아웃라인 아웃라인의색 (outline-color) 을지정하기위한속성 색, invert, inherit invert 모든요소상속하지않음지정불가 Visual, Interactive Win IE 4/5/5.5/6, Mozilla, Firefox, Netscape 4/6/7/8, Opera 6, Mac IE 4 Safari 43 / 58
12.3 표및사용자인터페이스 12.3.10 아웃라인 아웃라인관련속성 (outline) 을일괄지정하기위한속성 outline-color, outline-style, outline-width, inherit 각속성참조모든요소상속하지않음지정불가 Visual, Interactive Win IE 4/5/5.5/6, Mozilla, Firefox, Netscape 4/6/7/8, Opera 6, Mac IE 4 Safari 44 / 58
음성스타일시트 Volume 속성 Speak 속성 Speak-punctuation punctuation 속성 Speak-numeral 속성 Pause 속성 Pause-before 속성 Pause-after after 속성 Cue 속성 Play-during 속성 Elevation 속성 Voice-family 속성
12.4 음성스타일시트 12.4.1 Volume 속성 요소의음량크기를지정하기위한속성 값기본값적용대상상속여부퍼센테이지미디어 수치, 백분율, silent, x-soft, soft, medium, loud, x-loud, inherit medium 모든요소상속지정불가 aural 수치 : '0~100' 사이의수치를지정. '0' 은가장작은음량이며 '100' 은가장큰음량백분율 : 백분율 (%) 값을지정. 부모요소를기준으로계산 Silent : 소리가나지않도록지정. 값 '0' 는 'silent' 와같은것을의미하지않음 x-soft : 무척작게지정. '0' 과같음. Soft : 작게지정. '25' 와같음. medium : 보통으로지정. '50' 과같음. loud : 크게지정. '75' 와같음. x-loud : 무척크게지정. '100' 과같음. inherit : 부모요소의값을상속하도록지정. 46 / 58
12.4 음성스타일시트 12.4.2 Speak 속성 요소를소리로출력할형식을지정하기위한속성 값기본값적용대상상속여부퍼센테이지미디어 normal, none, spell-out, inherit normal 모든요소상속지정불가 aural none : 소리로출력하지않도록지정 normal : 정상적으로출력하도록지정 spell-out : 철자글자의철자를한자씩읽도록지정 ( 예 : we - 더블유아이 ) inherit : 부모요소의값을상속하도록지정 47 / 58
12.4 음성스타일시트 12.4.3 Speak-punctuation punctuation 속성 값기본값적용대상상속여부퍼센테이지미디어 code, none, inherit none 모든요소상속지정불가 aural code : 쎄미코론들, 대괄호들과같은구둣점이말해짐 none : 구둣점이말해지지않으나, 그대신여러가지잠간멈춤 pause 자연스럽게표현 inherit : 부모요소의값을상속하도록지정 48 / 58
12.4 음성스타일시트 12.4.4 Speak-numeral 속성 값기본값적용대상상속여부퍼센테이지미디어 digits, continuous, inherit continuous 모든요소상속지정불가 aural digits : 수치를개별적인숫자들로말함. "237" 은 " 이삼칠 " 로말해짐 continuous : 전체수치로말해짐. "237" 은 " 이백삼십칠 " 로말해짐. 대표하는단어들은언어에따라다름 inherit : 부모요소의값을상속하도록지정 49 / 58
12.4 음성스타일시트 12.4.5 Pause 속성 요소를말할때잠시멈춤도록지정하기위한속성 값기본값적용대상상속여부퍼센테이지미디어 시간, 백분율, inherit 사용도구에의존모든요소상속불가 pause-before와 pause-after 참조 aural 시간 : 1/1000 초단위로지정 백분율 : 'speech-rate' 를기준으로백분율값을지정 inherit : 부모요소의값을상속하도록지정 50 / 58
12.4 음성스타일시트 12.4.6 Pause-before 속성 요소를말할때앞에서잠시멈추도록지정하기위한속성 값기본값적용대상상속여부퍼센테이지미디어 시간, 백분율, inherit 사용도구에의존모든요소상속불가 prose 참조 aural 시간 : 1/1000 초단위로지정 백분율 : 'speech-rate' 를기준으로백분율값을지정 inherit : 부모요소의값을상속하도록지정 51 / 58
12.4 음성스타일시트 12.4.7 Pause-after after 속성 요소를말할때뒤에서잠시멈추도록지정하기위한속성 값기본값적용대상상속여부퍼센테이지미디어 시간, 백분율, inherit 사용도구에의존모든요소상속불가 prose 참조 aural 시간 : 1/1000 초단위로지정 백분율 : 'speech-rate' 를기준으로백분율값을지정 inherit : 부모요소의값을상속하도록지정 52 / 58
12.4 음성스타일시트 12.4.8 Cue 속성 요소의앞 / 뒤에큐소리를추가하는단축속성 값기본값적용대상상속여부퍼센테이지미디어 cue-before, cue-after, inherit 개별속성의기본값참조모든요소상속불가사용불가 aural uri : 오디오파일의경로를지정 none : 오디오파일의경로를지정하지않음 inherit : 부모요소의값을상속하도록지정 53 / 58
12.4 음성스타일시트 12.4.9 Play-during 속성 요소를말할때, 배경으로들릴소리를지정하는속성 값기본값적용대상상속여부퍼센테이지미디어 uri, mix, repeat, auto, none, inherit auto 생성된내용을? 제외한모든요소상속불가사용불가 aural uri : 배경음으로사용할파일의경로를입력 mix : 배경음과요소의소리가혼합해서들리도록지정 repeat : 배경음이반복되도록지정 auto : 배경음이자동으로반복되도록지정 none : 배경음을지정하지않음 inherit : 부모요소의값을상속하도록지정 54 / 58
12.4 음성스타일시트 12.4.10 Elevation 속성 값기본값적용대상상속여부퍼센테이지미디어 각도, below, level, above, higher, lower, inherit level 모든요소상속불가사용불가 aural 각도 : '-90deg' 와 '90deg' 사이의각도로높이를지정. '0deg' 는수평앞을의미, '90deg' 는직접적인머리위를의미, '-90deg' 직접아래를의미 below : '-90deg' 와같음. level : '0deg' 와같음. above : '90deg' 와같음. higher : 현재의높이에 10deg를가산 lower : 현재의높이에서 10deg를감산 inherit : 부모요소의값을상속하도록지정 55 / 58
12.4 음성스타일시트 12.4.11 Voice-family 속성 값기본값적용대상상속여부퍼센테이지미디어 specific-voice, generic-voice, inherit 사용도구에의존모든요소상속사용불가 aural generic-voice 값들은음성가족 voice family 이며, 가능한값들은 'male', 'female', 와 'child specific-voice 값들은특정인스탄스 ( 예 : comedian, trinoids, carlos, lani) inherit : 부모요소의값을상속하도록지정 56 / 58
과제 팀과제 - 프로젝트페이지 (10 페이지정도 : 사용자입력페이지포함 ) 구현 구현페이지에대하여 CSS 기술을적용하기 개인과제 - 가족소개페이지 (3 페이지정도 : 사용자입력페이지포함 ) 구현 구현페이지에대하여 CSS 기술을적용하기 57 / 58
참고문헌 제 2 회웹접근성경진대회개발자교육과정교재, 한국정보문화진흥원, 2007 민간부문의웹접근성을어떻게높일것인가토론회자료집, 한국정보문화진흥원, 2006 웹표준교과서, 마시코타카히로, 디지털미디어리서치, 2007 제프리젤드만의웹표준가이드, 위키북스, Jeffrey Zeldman Head First HTML with CSS & XHTML, 에릭프리먼외, 한빛미디어, 2006 실용예제로배우는웹표준, 댄씨더홈, 에이콘출판, 2005 정보통신접근성향상표준화포럼 http://www.iabf.or.kr 58 / 58