PowerPoint 프레젠테이션

Transcription

1 : 준비학습 2: 학습내용 11장. 12장. 이미지, 목록, 하이퍼링크스타일 13장. 테두리, 폼양식관련스타일과레이어 14장. 필터효과와 활용하기

2 : 11 장. 학습내용 개요와삽입법 선택자 글꼴 / 문단관련스타일

3 개요 Cascading Style Sheets 의약자 계단형스타일시트 라고한다. 의표준화작업과신기술및팁을제공하는 W3C 에서 1996 년 레벨 1 발표 1998 년 레벨 2 발표 W3C

4 사용목적 HTML 의제약성에서탈피한다. 홈페이지전체에통일감과일관성을유지한다. 홈페이지제작시간을감소시키고문서의용량을줄여준다. 기존홈페이지의개념을넘는 DHTML, XML 의기초가된다.

5 삽입법 3 가지 태그내부삽입형 (In-line style) < 태그 Style=" 속성 : 값 ; 속성 : 값 ; "> 문서내지정형 (Embedding style) <Styel type="text/css"> <!-- 스타일내용 //--> </Style> 외부문서삽입형 (link style) <link rel=stylesheet href=" 스타일외부파일전체경로 " type="text/css">

6 선택자의종류 기본형식 <Style type="text/css"> 선택자 { 속성 : 값 } </Style> 1. 태그선택자또는 type 선택자 2. 클래스 (class) 선택자 3. 아이디 (ID) 선택자 4. 복수선택자 5. 자손 (descendant) 선택자 6. 태그선택자와클래스선택자연계 7. 태그선택자와아이디선택자를연계 8. 가상클래스선택자

7 클래스선택자와아이디선택자 구분클래스선택자아이디선택자 시작기호.( 마침표 ) #(hash) 속성명 class Id 역할 문서에서주로사용되는서식을클래스명으로지정하여문서에통일감을준다. 스크립트로아이디에지정된스타일의속성을변경할수있어 DHTML 로가는관문역할을한다. 주된용도문서를꾸며준다. 레이어의동작을제어한다. 주사용태그적용범위 <p> <div> <span> 등 <div> 등 여러개의태그에적용가능하다. 공통점이름은사용자가임의로지정한다. 태그에제한없이어느태그에서나사용가능하다. 하나의태그에만적용하여사용한다.

8 가상클래스선택자 기본형식 A: 지정자 { 속성 : 값 ;} 사용예 a:link{text-decoration:none} a:visited{text-decoration:none} a:hover{text-decoration:underline}

9 글꼴꾸밈관련스타일 속성설명값 color 글자색 Navy, #ffffcc font-size 글자크기 xx-small, x-small, small, medium, large, x-large, xxlarge,smaller, larger,20px, 20pt, 20%, 80% font-family 글자체 Serif, cursive, fantasy, monospace, 굴림, 돋움, 궁서체 fontweight 글자굵기 100, 200, 300, 400, 500, 600, 700, 800, 900 normal, bold, lighter, bolder font-style 글꼴모양 normal, oblique, italic textdecoration texttransform fontvariant fontstretch 글꼴장식 대소문자 소문자크기 글자폭 none, underline, overline, line-through Capitalize, lowercase, uppercase small-caps Condensed, expanded

10 문단관련스타일 속성설명값 text-align 수평정렬 left, center, right, justify verticalalign 수직정렬 baseline, top, middle, bottom, text-top, text-bottom, super, sub, 실수값 + 단 line-height 행간 위실수, % 값 + 단위, % letterspacing 자간 실수값 + 단위, % wordspacing 단어와단어사 실수값 + 단위, % 이의간격 text-indent 들여쓰기 실수값 + 단위, % white-space 공백, 탭, 줄바꾸기에대한처리 normal, pre, nowrap

11 : 12 장. 배경그림, 목록, 하이퍼링크관련스타일 학습내용 배경그림다루기목록꾸미기하이퍼링크꾸미기마우스커서모양

12 배경그림, 목록, 하이퍼링크관련스타일 배경그림 속성 설명 값 backgroundcolor 배경색 yellow, transparent backgroundimage 배경이미지지정 url( 파일명 ) backgroundrepeat backgroundposition backgroundpositionx backgroundpositiony backgroundattachment background 배경이미지정렬 배경이미지위치 가로축고정위치 세로축고정위치 이미지고정 배경이미지한번에지정 repeat, repeat-x, repeat-y, no-repeat 80%, 90px, left, center, right, top, center, bottom left, center, right top, center, bottom fixed, scroll url( 파일명 ), repeat-x, repeat-y, norepeat, left, center, right, top, center, bottom, fixed, scroll

13 배경그림, 목록, 하이퍼링크관련스타일 목록 속성설명값 list-style-type 글머리표종류 글머리표그림 None, disc, circle, square, lower-roman, upper-roman, decimal, lower-alpha, upperalpha 등.. url( 파일명 ) list-styleimage list-styleposition 글머리표의위치 inside, outside

14 배경그림, 목록, 하이퍼링크관련스타일 하이퍼링크 속성구분설명 a 태그명하이퍼링크에대한모든설정 a:link 가상클래스한번도방문하지않은하이퍼링크속성 a:visited 가상클래스방문한적이있는하이퍼링크속성 a:active 가상클래스하이퍼링크를클릭하는순간의속성 a:hover 가상클래스마우스가하이퍼링크위로올라왔을때

15 배경그림, 목록, 하이퍼링크관련스타일 배경그림 배경이미지를가로로만반복한다. body{background-image: url(bg.gif); background-repeat: repeat-x } 배경이미지를한번만표시한다. body{background-image: url(bg.gif); background-repeat: no-repeat } 배경이미지위치설정하기 body{background-image:url(bg.gif); background-repeat:norepeat; background-position:80% 90%} 배경이미지스크롤되지않게하기 body{background-image:url(log.gif); backgroundattachment:fixed; background-repeat:no-repeat; background-position:center center;}

16 배경그림, 목록, 하이퍼링크관련스타일 하이퍼링크설정 하이퍼링크를설정해도밑줄이표시되지않고마우스를올릴때만밑줄이표시되도록한다. <style type="text/css"> <!-- a{ color:red; text-decoration:none; } a:hover { text-decoration: underline;} --> </style>

17 배경그림, 목록, 하이퍼링크관련스타일 하이퍼링크속성여러개설정하기 underline 클래스는밑줄이나타나게하고 bgcolor 클래스는배경색이바뀌게한다. <style type="text/css"> <! a{ color:blue; text-decoration:none; } a.underline:hover{text-decoration:underline; } a.bgcolor:hover{background-color: skyblue; } --> </style> ~~ <a href="#" class=underline> 네이버 </a><br> <a href="#" class=bgcolor> 엠파스 </a><br>

18 배경그림, 목록, 하이퍼링크관련스타일 글머리표대신그림으로대체하는방법 <style type="text/css"> <!-- ul{list-style-image:url(bullet.gif)} --> </style>

19 배경그림, 목록, 하이퍼링크관련스타일 마우스커서 가자 에마우스를올리면마우스포인터가상하양방향화살표모양이되는예 <a href=# style= cursor: n-resize > 가자 </a> cursor 의종류 속성값결과 crosshair text wait help move e-resize n-resize

20 : 13장. 테두리, 폼양식관련스타일과레이어 학습내용 테두리관련스타일폼양식관련스타일레이어

21 테두리, 폼양식관련스타일과레이어 테두리 속성 설명 값 border 테두리지정 {border: 테두리두께테두리스타일테두리색 } border-width 테두리두께 실수값 + 단위, thin, medium, thick 등이있다. border-style 테두리형태 none, dotted, dashed, solid, double 등이있다. border-color 테두리색 색상명 border-collapse 표현방법 Separate, collapse * 표전용스타일 Width 넓이 실수값 + 단위, % height 높이 실수값 + 단위, % padding 내부여백 실수값 + 단위 margin 외부여백 실수값 + 단위 background-color 배경색 색상명 background-image 배경그림 url(" 이미지전체경로 ") ime-mode 입력방식 Inactive, active * 폼전용스타일

22 테두리, 폼양식관련스타일과레이어 레이어 속성 설명 값 레이어에서주로사용되는스타일속성 (***) z-index 레이어의계층순서 정수값 visibility 보이기형식 visible, hidden display 레이어숨기기 display:none float 정렬과어울림 left, right clear 어울림해제 left, right,both overflow 스크롤바표시여부 visible, hidden, scroll, auto direction 글자방향 ltr, rtl 레이어위치지정 (***) position 표시방법 static, relative, absolute, fixed top 시작점의수직 (y) 좌표 실수값 + 단위, % bottom 끝점의수직 (y) 좌표 실수값 + 단위, % left 시작점의수평 (x) 좌표 실수값 + 단위, % right 끝점의수평 (x) 좌표 실수값 + 단위, %

23 테두리, 폼양식관련스타일과레이어 깔끔한실선테이블을만드는소스 <style type="text/css"> <!-- table{border:solid 1px orange ; bordercollapse:collapse;} th{border:solid 1px orange ; backgroundcolor:#ffcc66; color:white;} td{border:solid 1px orange ;} --></style>

24 테두리, 폼양식관련스타일과레이어 레이어생성하는법 2 가지 태그에지정하는법 <div id=id 명 style= position:absolute > 레이어안에들어갈내용 </div> 스타일태그로생성하는법 <style type="text/css"> </style> ~~ #id 명 {position:absolute;} <div id="id 명 "> 레이어안에들어갈내용 </div>

25 테두리, 폼양식관련스타일과레이어 레이어의계층구조와레이어 left:0 top:0 right:0 top:0 left:0 bottom :0 right :0 bottom :0

26 : 14 장. 필터효과와 활용하기 학습내용 포토샵을대신하는필터효과 활용하기

27 필터효과와 활용하기 그림자르기 사용예 <div id="layer1" style="width:400px; height:600px; position:absolute; left:100px; top:0px; clip:rect( );"> <img src="city.jpg" width="400" height="600"> </div> Clip : rect(a,b,c,d) a 잘려진그림 c d (d,c) b (B,a)

28 필터효과와 활용하기 필터 그림과문자에필터적용하는법 < 태그 style= filter: 필터종류 ( 세부속성지정 )> 필터의종류 사진에특수효과를주는필터 gray invert xray chroma 문자와그림을꾸며주는필터 filph filpv alpha blur wave 문자에주로사용되는필터 dropshadow shadow glow

29 필터효과와 활용하기 사진에특수효과를주는필터 gray 필터는컬러값을모두제거하고흑백사진으로만들어준다. <img src=" 이미지전체경로 " style="filter:gray()"> invert 필터는색상, 채도, 명도값을반전시켜서반대되는느낌의그림을만들어준다. <img src="aniston.jpg" style="filter:invert()"> xray 필터는 x-ray 사진처럼그림이흑백으로표현된다. <img src="aniston.jpg" style="filter:xray()"> chroma 필터는지정색을투명하게만들어준다. <img src=" 이미지전체경로 " style="filter:chroma(color= 투명하게할색상명 )">

30 필터효과와 활용하기 문자와그림을꾸며주는필터 대칭필터로그림을상, 하, 좌, 우로뒤집어준다. <img src="dog.jpg" style=filter:fliph()> <img src="dog.jpg" style=filter:flipv()> alpha 필터는불투명도 (opacity) 값조절 <img src="dog.jpg" style="filter:alpha(opacity=40,style=3,finishopacity=0)"> blur는이미지를흐리게하면서번짐효과 <img src="dog.jpg" style="filter:blur(direction=225,strength=30,add=0)"> wave 필터는퍼머머리처럼웨이브를준다. <img src="dog.jpg" style="filter:wave(strength=25,freq=2,lightstrength=95,phase =51,add=1)">

31 필터효과와 활용하기 문자에주로사용되는필터 dropshadow 필터는특정위치에그림자를만들어준다. <p style="filter:dropshadow(color=gray,offx=3,offy=3,positio n=0)">dropshadow</p> shadow 필터는지정각도로번짐효과가있는그림자를만들어준다. <p style="filter:shadow(color=green,direction=135">shadow </p> glow 필터는문자주위에외부광채를만들어준다. <p style="filter:glow(color=red,strength=5)">glow 로문자에광채주기 </p>