학습목표 색상과 배경에 대해 학습합니다. 미디어별 출력 형태에 대해 학습합니다. 마우스포인터, 스크롤바의 표시에 대해 학습합니다. 국제언어 표현에 대해 학습합니다. 학습목차 background-image, background-repeat, background-position background-attachment, background 속기 프로퍼티 표현미디어 : 모니터, 프린터 사용자 인터페이스 : 마우스 포인터, 스크롤바, 사용자 시스템 색상 국제언어 표현
색상 color 프로퍼티 요소의 텍스트 색상 지정 값 <색상값> | inherit 초기값 유저 에이전트에 의존 초기값 유저 에이전트에 의존 적용 모든 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어 BODY {color : blue} /* 색상 키워드를 이용하여 텍스트 색상을 지정 */ EM {color : rgb(255, 0, 0)} /* 10진수를 이용하여 텍스트 색상을 지정 */ H1 {color : #ff0000 } /* 16진수를 이용하여 텍스트 색상을 지정 */
배경 배경 내용과 패딩영역의 배경 보더는 보더 프로퍼티를 사용 여백은 항상 투명 HTML 문서에서, 전체적인 배경을 지정할 때는 BODY 요소에 지정 background, background-color, background-image background-repeat, background-attachment, background-position <HTML> <HEAD> <TITLE>Setting the canvas background</TITLE> <STYLE type="text/css"> BODY { background: url(“monkey.gif") } </STYLE> </HEAD> <BODY> <P>My background is marble. </BODY> </HTML> 13_1.html
background-color background-color 프로퍼티 값 <색상값> | transparent | inherit 초기값 transparent 적용 모든 요소 상속성 상속되지 않음 백분율 사용되지 않음 미디어 시각 미디어 <HEAD> <style type="text/css"> h1 {background-color:gray;color:white } </style> </HEAD> <BODY> <h1>배경색상 지정</h1> <h2>배경색상 지정 안함</h1> </BODY> 13_2.html
background-image background-image 프로퍼티 값 <URI> | none | inherit 적용 모든 요소 상속성 상속되지 않음 백분율 사용되지 않음 미디어 시각 미디어 <HTML> <BODY style="background-image:url(monkey.gif)"> <h3>배경이미지가 지정된 화면 </BODY> </HTML> 13_3.html
background-repeat Background-repeat 프로퍼티 값 repeat | repeat-x | repeat-y | no-repeat | inherit 초기값 repeat 적용 모든 요소 상속성 상속되지 않음 백분율 사용되지 않음 미디어 시각 미디어 repeat : 이미지를 수평과 수직으로 반복 (바둑판 식) repeat-x : 처음 위치에서 이미지가 수평으로 반복 repeat-y : 처음 위치에서 이미지가 수직으로 반복 no-repeat : 이미지가 반복되지 않고, 하나의 이미지만 표시
background-repeat <style type="text/css"> body { background-image:url(monkey.gif); background-repeat:repeat; } </style> 13_4.html body { background-image:url(monkey.gif); background-repeat:repea-x; } 13_5.html body { background-image:url(monkey.gif); background-repeat:repea-y; } 13_6.html
background-position Background-position 프로퍼티 배경 이미지가 표시될 때, 그 초기 위치를 지정 수평위치와 수직위치 2개의 값이 사용됨 Background-repeat와 함께 이용됨. 값 [[ <백분율> | <길이> ]{1,2} | [[ top | center | bototm ] || [ left | center | right ]] | inherit 초기값 0%, 0% 적용 블록 레벨 요소 상속성 상속되지 않음 백분율 사용되지 않음 미디어 시각 미디어
background-position <백분율> <백분율> : 0% 0% : 왼쪽 상단 100% 100% : 오른쪽 하단 <길이> <길이> 5cm, 10cm : 박스의 왼쪽에서 5cm, 위에서 10cm에 위치 top left 또는 left top : 0% 0%와 동일 top 또는 top center 또는 center top : 50% 0%와 동일 right top 또는 top right : 100% 0%와 동일 left 또는 left center 또는 center left : 0% 50%와 동일 center 또는 center center : 50% 50%와 동일 right 또는 right center 또는 center right : 100% 50%와 동일 bottom left 또는 left bottom : 0% 100%와 동일 bottom 또는 bottom center 또는 center bottom : 50% 100% bottom right 또는 right bottom : 100% 100%와 동일
background-position body { background-image:url(monkey.gif); background-repeat:repeat-x; background-position:center } 13_7.html body { background-image:url(monkey.gif); background-repeat:repeat-y; background-position:center } 13_8.html
background-position body { background-image:url(monkey.gif); background-repeat:no-repeat; background-position:0% 0% } 13_9.html body { background-image:url(monkey.gif); background-repeat:no-repeat; background-position:100% 100% } 13_10.html body { background-image:url(monkey.gif); background-repeat:no-repeat; background-position:5cm 2cm } 13_11.html
background-position body { background-image:url(monkey.gif); background-repeat:no-repeat; background-position:right } 13_12.html body { background-image:url(monkey.gif); background-repeat:no-repeat; background-position:bottom } 13_13.html
background-position body { background-image:url(monkey.gif); background-repeat:no-repeat; background-position:center } 13_14.html
background-attachment 배경 이미지가 고정될 지, 문서와 함께 스크롤 될 지 결정 값 scroll | fixed | inherit 초기값 scroll 적용 모든 요소 상속성 상속되지 않음 백분율 사용되지 않음 미디어 시각 미디어 scroll : 내용이 스크롤될 때 함께 스크롤 fixed : 내용이 스크롤될 때 지정된 위치에 고정
background-attachment body { background-image:url(monkey.gif); background-repeat:no-repeat; background-position:center center; background-attachment:fixed; } 13_15.html
Background shorthand Background 속기 프로퍼티 배경 이미지가 고정될 지, 문서와 함께 스크롤 될 지 결정 값 [ <background-color> || <background-image> || <background-repeat> || <background-attachment> || background-position> ] | inherit 초기값 속기 프로퍼티는 지정되지 않음 적용 모든 요소 상속성 상속되지 않음 백분율 사용되지 않음 미디어 시각 미디어 <style type="text/css"> body { background:url(monkey.gif) no-repeat center center fixed; } </style> 13_16.html
표현미디어 문서가 표현되는 미디어 미디어별 프로퍼티 공통으로 사용되는 다른 결과를 나타내는 프로퍼티 모니터와 같은 화면 미디어 프린터와 같은 인쇄 미디어 음성 등을 표현하는 청각 미디어 미디어별 프로퍼티 청각미디어 : cue-before 공통으로 사용되는 다른 결과를 나타내는 프로퍼티 Font-size : 화면미디어와 인쇄미디어에 사용되나 결과는 다소 다름 이런 이유들 때문에 특정 미디어를 위한 스타일시트 필요
표현미디어 특정미디어를 위한 스타일시트 선언 @media, @import 등을 이용하는 방법 Link 태그에 media 속성을 이용하여 외부 스타일시트에 연계하는 방법 @import url(“loudvoice.css”) aural; @media print {/* style sheet for print goes here */} <HTML> <HEAD> <TITLE>Link to a target medium</TITLE> <LINK rel=“stylesheet” type=“text/css” media=“print, handheld” href=“foo.css”> </HEAD> <BODY> <P>The body... </BODY> </HTML>
@미디어 선언 @media 선언 모니터출력 : html 파일 실행 프린터출력 : 브라우저에 마우스 오른쪽 버튼 후 “인쇄미리보기” 선택 <style type="text/css"> @media screen { BODY { font:12pt;color:blue} } @media print { BODY {font:italic 20pt; color:red; text-decoration:underline; border:10pt outset green} @media screen, print { BODY {background: yellow } </style> </HEAD> <BODY> 강릉원주대학교 정보기술공학과 </BODY> 13_17.html
미디어의 형태 @media에 사용되는 미디어의 형태 All : 모든 미디어에 적용 Aural : 음성 신서사이저와 같은 청각 미디어 Braille : 점자를 출력하는 촉각 미디어 Embossed : 점자를 출력하는 인쇄 미디어 Handheld : 소형 장치(소형 모니터, 모노크롬 등 휴대용 장치)에 적용 Print : 인쇄 미디어나 인쇄 미리 보기에 적용 Projection: 영사기용 출력물이나 투명 배경의 프린터의 적용 Screen : 컬러 모니터와 같은 시각 미디어 Tty : 고정된 크기의 문자를 사용하는 장치(저해상도 장치, 제한된 스크롤 기능을 가진 모니터 등)에 적용 Tv : 텔레비전 형태의 장치에 적용
미디어 그룹 시각적(visible), 청각적(aural), 점자(tactile) 미디어 연속적(continuous) 미디어 혹은 페이지(paged) 미디어 연속적인 미디어는 모니터와 같은 것이고, 페이지 미디어는 프린터와 같은 인쇄 미디어 시각적(visible), 청각적(aural), 점자(tactile) 미디어 문자 격자(grid), 비트맵(bitmap) 문자 단위의 미디어인지, 픽셀 단위의 미디어인가를 의미하는 것으로 타자기는 문자단위의 미디어이고, 모니터는 비트맵 미디어 대화식(interactive), 고정(static) 미디어 사용자와 대화식 작용이 가능한 미디어인지, 출력만 하는 미디어인지를 의미 모든 미디어
미디어 그룹
페이지 미디어 페이지 미디어 문서 내용이 하나 이상의 페이지로 분리된 것 페이지의 크기와 여백을 지정 연속미디어에서의 내용을 페이지 분리
페이지 분리 블록 레벨 앞이나 뒤에서 페이지 분리 page-break-before 프로퍼티 요소 앞에서 페이지 분리가 발생 값 auto | always | avoid | left | right | inherit 초기값 auto 적용 블록 레벨 요소 상속성 상속되지 않음 백분율 사용되지 않음 미디어 시각 미디어, 페이지 미디어 page-break-before 프로퍼티 요소 뒤에서 페이지 분리가 발생 값 auto | always | avoid | left | right | inherit 초기값 auto 적용 블록 레벨 요소 상속성 상속되지 않음 백분율 사용되지 않음 미디어 시각 미디어, 페이지 미디어
페이지 분리 <style type="text/css"> 시각 미디어에 출력 <style type="text/css"> p.after {page-break-before : always} </style> </head> <body> <h1> Korea <p class=after>Japan </body> 13_18.html 인쇄 미디어에 출력(브라우저의 “인쇄 미리 보기” 이용) <style type="text/css"> p.after {page-break-after : always} </style> </head> <body> <h1> <p class=after>Korea <p>Japan </body> 시각 미디어에 출력 인쇄 미디어에 출력(브라우저의 “인쇄 미리 보기” 이용) 13_19.html
페이지 분리 <HEAD> <style type="text/css"> p.before {page-break-before : left} </style> </head> <body> <p class=before> <h1>Korea<br> </body> 인쇄 미디어에 출력(브라우저의 “인쇄 미리 보기” 이용) 13_20.html
사용자 인터페이스 사용자 인터페이스 Cursor 프로퍼티 : 마우스 포인터 변경 마우스 포인터 변경 사용자 시스템 색상 사용 스크롤 바 색상 변경 Cursor 프로퍼티 : 마우스 포인터 변경 값 [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit 초기값 auto 적용 모든 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어, 대화형 미디어
Cursor Property Uri : 커서 이미지를 저장하고 있는 파일을 지정(예 : url(pointer.cur) 등) Auto : 브라우저가 상황에 따라(텍스트냐, 링크냐 등등에 따라) 결정 Crosshair : Default : Hand : Move : e-resize : ne-resize : nw-resize : n-resize : se-resize : sw-resize : s-resize : w-resize : Text : Wait : Help :
Cursor Property 13_21.html <body> <p style="cursor:move">Move 커서 </body> 13_22.html <body> <p style="cursor:wait">Wait 커서 </body> 13_23.html <body> <p style="cursor:url(lnodrop.cur)">Inodrop 커서 파일</body> 13_24.html <body> <p style="cursor:url(dinosaur.ani)"> 애니메이션 커서 파일 </body> 13_23.html, 13_24.html 예제의 커서는 “C:/Windows/Cursor” 폴더에 파일로 존재함
사용자 시스템 색상 제작자가 지정하는 색상 이외에 사용자 시스템의 환경에 지정된 색상을 이용 사용자는 자신의 시스템에서 보는 것과 같은 느낌 버튼의 색상을 사용자 시스템의 것으로 이용 color, background-color 등과 같은 색상 관련 프로퍼티의 값으로 사용 ActiveBorder : 활성 윈도우의 경계선 색상 ActiveCaption : 활성 윈도우의 제목 표시줄 색상 AppWorkspace : 비활성 윈도우의 제목 표시줄 색상 Background : 윈도우 바탕화면의 배경 색상 ButtonFace : 삼차원 버튼의 표면 색상. ButtonHighlight : 삼차원 버튼의 경계 부분 색상 ButtonShadow : 삼차원 버튼의 그림자 색상. ButtonText : 버튼 위의 텍스트 색상 CaptionText : 캡션, 박스, 스크롤 바 등의 텍스트 내용 색상 GrayText : 비활성 윈도우의 텍스트 색상. Highlight : 선택된 아이콘의 텍스트 배경 색상 HighlightText : 선택된 아이콘의 텍스트 색상 InactiveBorder : 비활성 윈도우의 경계선 색상 InactiveCaption : 비활성 윈도우의 제목 표시줄 색상 InactiveCaptionText : 비활성 윈도우의 제목 텍스트 색상
사용자 시스템 색상 BODY { color: WindowText; background-color: Background } InfoBackground : tooltip 텍스트의 배경 색상 InfoText : tooltip 텍스트의 색상 Menu : 메뉴의 배경 색상 MenuText : 메뉴의 텍스트 색상 Scrollbar : 스크롤 바의 표면 색상 ThreeDDarkShadow : 삼차원 요소의 그림자의 어두운 부분 색상 ThreeDFace : 삼차원 요소의 표면 색상 ThreeDHighlight : 삼차원 요소의 밝은 부분 색상. ThreeDLightShadow : 삼차원 요소 그림자의 밝은 색상(빛이 비쳐지는 경계부분). ThreeDShadow : 삼차원 요소 그림자의 색상 Window : 윈도우 배경 색상 WindowFrame : 윈도우 프레임의 색상 WindowText : 윈도우 텍스트의 색상 BODY { color: WindowText; background-color: Background }
스크롤 바 색상 스크롤 바를 다양한 색상으로 변경하여 표현 가능 관련 프로퍼티들 scrollbar-face-color, scrollbar-arrow-color, scrollbar-base-color, scrollbar-shadow-color, scrollbar-darkshadow-color, scrollbar-highlight-color, scrollbar-3dlight-color 값 <색상값> | inherit 초기값 없음 적용 스크롤 바를 생성시키는 요소(body, table 등) 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어
스크롤 바 색상 scrollbar-face-color 프로퍼티 : 스크롤 바의 표면 색상 지정 scrollbar-arrow-color 프로퍼티 : 스크롤 바의 삼각 화살표 색상 지정 scrollbar-base-color 프로퍼티 : 스크롤 바와 스크롤 바가 움직이는 틀의 색상을 동시에 지정 scrollbar-shadow-color 프로퍼티 : 스크롤 바의 그림자 부분(오른쪽 면과 아래 면) 색상을 지정 scrollbar-darkshadow-color 프로퍼티 : 스크롤 바의 그림자 부분(오른쪽 면과 아래 면)중 더욱 어두운 부분의 색상을 지정 scrollbar-highlight-color 프로퍼티 : 스크롤 바의 밝은 부분(위면과 왼쪽면)과 스크롤 바가 움직이는 틀표면, 틀의 밝은 부분(위면과 왼쪽면)의 색상 scrollbar-3dlight-color 프로퍼티 : 스크롤 바의 밝은 부분(위면과 왼쪽면)의 색상을 지정
스크롤 바 색상 <style type="text/css"> 13_25_1.html <style type="text/css"> body {scrollbar-face-color:green} </style> 13_25_2.html body {scrollbar-face-color:green; scrollbar-arrow-color:white;} 13_25_3.html body {scrollbar-base-color:white} 13_25_4.html body {scrollbar-shadow-color:red} 13_25_5.html body {scrollbar-shadow-color:red; scrollbar-darkshadow-color:blue} 13_25_6.html body {scrollbar-highlight-color:red} 13_25_7.html body {scrollbar-3dlight-color:red}
국제언어 표현 텍스트의 방향 왼쪽에서 오른쪽으로 쓰여지는 언어 오른쪽에서 왼쪽으로 쓰여지는 언어 Direction 프로퍼티 값 ltr | rtl | inherit 초기값 ltr 적용 모든 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어 LTR : 왼쪽에서 오른쪽으로(left-to-right)의 방향 RTL : 오른쪽에서 왼쪽으로(right-to-left)의 방향
국제언어 표현 Unicode-bidi 프로퍼티 normal : 정상적인 방향으로 표현(왼쪽에서 오른쪽) 값 normal | embed | bidi-override | inherit 초기값 normal 적용 모든 요소 상속성 상속되지 않음 백분율 사용되지 않음 미디어 시각 미디어 normal : 정상적인 방향으로 표현(왼쪽에서 오른쪽) embed : direction 프로퍼티의 방향성에 의존하여 내용을 그대로 표현 <BODY> <div STYLE="unicode-bidi:embed; direction:ltr“>강릉원주대학교 정보기술공학과</div> </BODY> 13_26.html <BODY> <div STYLE="unicode-bidi:embed; direction:rtl“>강릉원주대학교 정보기술공학과</div> </BODY> 13_27.html
국제언어 표현 Unicode-bidi 프로퍼티 bidi-override 인라인 레벨 요소 블록 박스 레벨 요소 <BODY> <b STYLE="unicode-bidi:bidi-override; direction:rtl">강릉원주대학교 정보기술공학과</b> </BODY> 13_28.html <BODY> <div STYLE="unicode-bidi:bidi-override; direction:rtl">강릉원주대학교 정보기술공학과</div> </BODY> 13_29.html
Ruby 태그 Ruby 텍스트 정렬 <ruby> 태그 <RB> 태그 : Ruby Base, 단어 자체 <RT> 태그 : Ruby Text, 단어의 설명 ruby 텍스트 : 5.5 포인트 활자 <ruby> <rb>大韓民國</rb> <rt>대한민국</rt> </ruby> <rb>Korea</rb> <rt>코리아</rt> 13_30.html
Ruby 태그 Ruby-align Property 값 auto | left | center | right | distribute-letter | distribute-space | line-edge 초기값 auto 적용 ruby 요소 상속성 상속되지 않음 백분율 사용되지 않음 미디어 시각 미디어 auto : 아시아권 문자에서는 distribute-space 값이 지정되고, 영어권 문자에서는 center값이 자동으로 지정 left : ruby 텍스트를 왼쪽으로 정렬 right : ruby 텍스트를 오른쪽으로 정렬 center : ruby 텍스트를 가운데 정렬 distribute-letter : ruby 텍스트의 너비가 주 내용보다 작을 경우, 주 내용의 좌우 끝 문자의 좌우 경계에 정렬 dirtribute-space : ruby 텍스트의 너비가 주 내용보다 작을 경우, 주 내용의 좌우 끝 문자의 가운데에 정렬 line-edge : ruby 텍스트가 주 내용보다 길어질 경우, 이 값이 지정될 경우 왼쪽 경계에 정렬
Ruby 태그 <ruby> <rb>大韓民國</rb><rt>대한민국</rt> </ruby><br><br> <ruby style="ruby-align:left"> <ruby style="ruby-align:right"> <rb>Non-Aisa</rb><rt>Korea</rt> <ruby style="ruby-align:distribute-letter"> <ruby style="ruby-align:distribute-space"> <rb>KOREA</rb> <rt>koreakoreakoreakorea</rt> <ruby style="ruby-align:line-edge">
Ruby 태그 Ruby-position Property 값 above | inline 초기값 above 적용 ruby 요소 상속성 상속되지 않음 백분율 사용되지 않음 미디어 시각 미디어 <ruby STYLE="ruby-align: right; ruby-position: above;"> <rb>Ruby 주 내용</rb> <rt>Ruby 텍스트</rt> </ruby><P> <ruby STYLE="ruby-align: right; ruby-position: inline;"> </ruby> 13_31.html
Word-break Property Word-break Property : 단어 자르기 값 normal | break-all | keep-all 초기값 normal 적용 블록 레벨 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어 normal : 언어의 상태에 따라(아시아권은 문자 단위, 영어권은 단어 단위) 자르기 지정 break-all : 어떤 언어든지 문자 혹은 알파벳 단위로 자르기 지정 keep-all : 어떤 언어든지 단어 단위로 자르기 지정 <div STYLE="word-break: normal">글자단위 자르기 글자단위 자르기</div> <div STYLE="word-break: normal">break all break all break all</div> <div STYLE="word-break: break-all">글자단위 자르기 글자단위 자르기</div> <div STYLE="word-break: break-all">break all break all break all</div> <div STYLE="word-break: keep-all">단어단위 자르기 단어단위 자르기</div> <div STYLE="word-break: keep-all">keep all keep all keep all keep</div> 13_32.html
Writing-mode Property 브라우저의 기본 방향 : 왼쪽 오른쪽, 위 아래 특정 아시아권 언어 : 위 아래, 오른쪽 왼쪽 값 lr-tb | tb-rl 초기값 lr-tb 적용 모든 요소 상속성 상속됨 백분율 사용되지 않음 미디어 시각 미디어 lr-tb : left-right-top-bottom 순으로 쓰여지는 순서를 지정 tb-rl : top-bottom-right-left 순으로 쓰여지는 순서를 지정
Writing-mode Property <div STYLE="writing-mode: tb-rl"> Western Language English Deutch </div> 13_33.html <div STYLE="writing-mode: tb-rl"> 아시아권 언어 韓國語 にほんご </div> 13_34.html
Writing-mode Property <ruby STYLE="writing-mode:tb-rl;ruby-align:left"> <rb>韓國語</rb> <rt>かんごく</rt> </ruby> 13_35.html
텍스트 정렬 Text-align 프로퍼티 텍스트의 좌우 정렬 : text-align=justify 값 auto | distribute | distribute-all-lines | inter-cluster | inter-ideograph | inter-word | newspaper 초기값 auto 적용 블록 레벨 요소 상속성 상속되지 않음 백분율 사용되지 않음 미디어 시각 미디어 auto : 브라우저가 적절한 정렬을 시도할 것을 지정 distribute : 동 아시아권 언어(예 : 타이어)에 최적 distribute-all-lines : 마지막 라인까지 정렬 inter-cluster : inter-word로 되지 않는 내용을 정렬 inter-ideograph : ideographic 문자와 일반 글자 사이의 공백을 조절 inter-word : 단어 사이의 공백을 증가 newspaper : 문자와 단어 사이의 공백을 조절
텍스트 정렬 13_36.html 브라우저의 너비가 충분할 때의 결과 브라우저의 크기가 부족할 경우 <div STYLE=“text-align: justify; text-justify:auto”> This is “auto” justified content</div> <div STYLE="text-align: justify; text-justify:distribute"> This is “distribute” justified content</div> <div STYLE="text-align: justify; text-justify:distribute-all-lines"> This is "distribute-all” justified content</div> <div STYLE="text-align: justify; text-justify:inter-cluster"> This is “inter cluster” justified content</div> <div STYLE="text-align: justify; text-justify:inter-ideograph"> This is “inter ideograph” justified content</div> <div STYLE="text-align: justify; text-justify:inter-word"> This is “inter word” justified content</div> <div STYLE="text-align: justify; text-justify:newspaper"> This is “Newspaper” justified content</div> 13_36.html 브라우저의 너비가 충분할 때의 결과 브라우저의 크기가 부족할 경우