Grouping Selectors To minimize the code, you can group selectors.

Transcription

1 CSS Advanced Bok, Jong Soon

2 Grouping Selectors To minimize the code, you can group selectors.

3 Nesting Selectors It is possible to apply a style for a selector within a selector.

4

5 height Sets the height of an element. Property value auto length %

6 max-height Sets the maximum height of an element. Property value none length %

7 max-width Sets the maximum width of an element. Property value none length %

8 min-height Sets the minimum height of an element. Property value length %

9 min-width Sets the minimum width of an element. Property value length %

10 width Sets the width of an element. Property value auto length %

11

12 Hiding an Element visibility : hidden It will still take up the same space as before.

13 Hiding an Element (Cont.) display : none It will not take up any space.

14 CSS Display Block and Inline Elements A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: <h1>, <p>, <div> An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements: <span>, <a>

15 Changing How an Element is Displayed The following example displays list items as i nline elements: li { display : inline; }

16 Changing How an Element is Displayed (Cont.) The following example displays span elemen ts as block elements: span {display : block; }

17

18 CSS Positioning Allow you to position an element. Can also place an element behind another, and specify what should happen when an element's content is too big. There are four different positioning methods. Static Positioning Fixed Positioning Relative Positioning Absolute Positioning

19 Static Positioning HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.

20 Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled:

21 Relative Positioning A relative positioned element is positioned relative to its normal position.

22 Absolute Positioning An absolute position element is positioned relative to the first parent element that has a position other than static.

23 Overlapping Elements When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

24 All CSS Positioning Properties bottom, left, top, right Sets the bottom left top right margin edge for a positioned box. auto length %

25 All CSS Positioning Properties (Cont.) clip Clips an absolutely positioned element. shape auto

26 All CSS Positioning Properties (Cont.) overflow Specifies what happens if content overflows an element's box. auto hidden scroll visible

27 All CSS Positioning Properties (Cont.) position Specifies the type of positioning for an element. absolute fixed relative static

28 All CSS Positioning Properties (Cont.) z-index Sets the stack order of an element. number auto

29 CSS Cursor Specifies the type of cursor to be displayed. url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help 속성값 crosshair text wait help move e-resize n-resize 결과

30 CSS Float With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.

31 CSS Float (Cont.) clear Specifies which sides of an element where other floating elements are not allowed. left right both none float Specifies whether or not a box should float. left right none

32 CSS Horizontal Alignment Align block elements Is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: <h1> <p> <div>

33 CSS Horizontal Alignment (Cont.) Center aligning using the margin property. Block elements can be center-aligned by setting the left and right margins to auto.

34 CSS Horizontal Alignment (Cont.) Left and right aligning using the position property. One method of aligning elements is to use absolute positioning:

35 CSS Horizontal Alignment (Cont.) Left and right aligning using the float property. One method of aligning elements is to use the float property:

36 CSS Pseudo-classes CSS pseudo-classes are used to add special effects to some selectors. Syntax selector : pseudo-class {property:value} selector.class : pseudo-class { } property : value

37 CSS Pseudo-classes (Cont.) Anchor Pseudo-classes Links can be displayed in different ways in a CSS-supporting browser. Pseudo-classes and CSS classes Can be combined with CSS classes.

38 CSS Pseudo-classes (Cont.) CSS The :first-child pseudo-class The :first-child pseudo-class matches a specified element that is the first child of another element.

39 CSS Pseudo-classes (Cont.) Match the first <i> element in all <p> elements.

40 CSS Pseudo-classes (Cont.) Match all <i> elements in all first child <p> elements.

41 CSS Pseudo-classes (Cont.) CSS - The :lang Pseudo-class. allows you to define special rules for different languages.

42 CSS Pseudo-classes (Cont.) :link Selects all unvisited links. :visited Selects all visited links. :active Selects the active link. :hover Selects links on mouse over.

43 CSS Pseudo-classes (Cont.) :focus Selects the input element which has focus. :first-letter Selects the first letter of every <p> element. :first-line Selects the first line of every <p> element. :first-child Selects every <p> elements that is the first child of its parent.

44 CSS Pseudo-classes (Cont.) :before Insert content before every <p> element. :after Insert content after every <p> element. :lang(language) Selects every <p> element with a lang attribute value starting with "it".

45 CSS Navigation Bar Navigation bar = List of links. A navigation bar is basically a list of links, so usi ng the <ul> and <li> elements makes perfect sense.

46 CSS Navigation Bar (Cont.) Now let's remove the bullets and the margins and padding from the list.

47 CSS Navigation Bar (Cont.) Vertical navigation bar To build a vertical navigation bar we only need to style the <a> elements.

48 CSS Navigation Bar (Cont.) Horizontal navigation bar There are two ways to create a horizontal naviga tion bar. Using inline or floating list items. Inline List Items

49 CSS Navigation Bar (Cont.) Floating List Items

50 CSS Attribute Selectors Attribute selector

51 CSS Attribute Selectors (Cont.) Attribute and value selector

52 CSS Attribute Selectors (Cont.) Attribute and value selector multiple values

53 CSS Attribute Selectors (Cont.) Attribute and value selector multiple values

54 CSS Attribute Selectors (Cont.) Styling Forms The attribute selectors are particularly useful for styling forms without class or id.

55

56 깔끔한실선테이블만들기 table { border : solid 1px orange ; th { td { border-collapse : collapse; } border : solid 1px orange ; background-color:#ffcc66; color : white; } border : solid 1px orange ; }

57 레이어의계층구조와레이어 left:0 top:0 right:0 top:0 left:0 bottom :0 right :0 bottom :0

58 그림자르기 사용예 <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)

59 한영전환 키보드를통하여입력을받을수있는 element 에서만적용. 특별히한영전환키를선택하지않아도한영전환이되므로사용자가바로입력이가능. 형식 ime-mode: mode: [ inherit auto active inactive disabled ] inherit ( 상속 : 이전에설정된값을상속 ) auto ( 자동 : 현재설정된한 / 영부분을따름 ) active ( 동작 : 한글로동작 ) inactive ( 동작안함 : 영문으로동작 ) disabled ( 사용안함 : 영문으로동작 )

60

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

62 필터 dropshadow(color= (color=red,offx=1,offy=1,positive=false); 그림자에대한설정을지정. 특정요소의내부에포함되어있는내용에적용이되는것. 속성값 color : 그림자색을지정합니다. offx : 그림자를해당객체로부터우측으로표현할상대값을지정합니다. offy : 그림자를해당객체로부터아래로표현할상대값을지정합니다. positive : 그림자와배경을반전할지를지정합니다. true : 그래로사용 false : 반전

63 glow 특정요소내부에있는다른요소들의색 ( 빛 ) 번짐을표현 형식 filter:glow(color= 값, strength= 값 ) 속성 gray color 번짐효과색을지정합니다. strength 요소로부터얼마만큼번짐효과를줄지를 pixcel 단위로지정. 특정요소의컬러값을흑백처리합니다. 실제론이미지에가장많이사용이됩니다. 형식 filter:gray;

64 xray 이미지에 xray 효과를부여할경우에사용됩니다. 형식 blur filter:xray; 지정된개체의번짐효과를부여합니다. 형식 filter:blur(add= 값,direction= 값,strength= 값 ) add 1과 0 값을가지며번짐의효과를지정합니다. direction 번짐의방향을 360도각도로지정합니다. strength 그림자의길이를지정합니다.

65 wave 지정된개체에웨이브효과를줍니다. 형식 filter:wave(add= 값,freq= 값,lightstrength= 값,phase= 값,strength= 값 ) add : 물결의색을어둡게또는밝게합니다. boolean값으로 갖습니다. freq : 물결의수를지정합니다. freq chroma lightstrength : 물결의진하기를 phase : 굴곡의시작위치를지정 strength : 굴곡의깊이를지정 진하기를지정합니다.(1~100) 지정합니다.(1~100) 지정합니다.(1~100) 투명하게보여질색상을 16 진수로지정합니다. 형식 filter:chroma(color=# (color=#rrggbb); 값으로 0과 1 값을

66 alpha 지정된 element를투명하게바꾸어줍니다. 형식 alpha(opacity=opacity, finishopacity=finishopacity, style=style, startx=startx, starty=starty, finishx=finishx, finishy=finishy) opacity : 시작투명도의단계값을 finishopacity : 마지막위치의투명도 style: 불투명 단계값을지정합니다.(0: 투명 ~100: 불투명 ) 불투명경사도의특징을나타내는값을지정합니다. 0 : 변화없슴 1 : 직선의불투명경사도를가짐 2 : 원형의불투명경사도를가짐 3 : 사각형의불투명경사도를가짐 startx : 불투명 불투명경사도의시작 x 좌표 starty : 불투명경사도의시작 y finishx : 불투명경사도의종료 x 좌표 finishy : 불투명경사도의종료 y 좌표

67 revealtrans 객체가보여지거나사라질때 23 가지의미리정의된효과 ( 사라지는모양 ) 를사용하게합니다. 실제로구동되는것은자바스크립트를함께사용해야합니다. 형식 filter:revealtrans(duration=duration, transition=transitionshape) duration : 효과가 지정합니다. transitionshape 효과가일어나는시간을지정하며, 값은 분. 초 로 0(box in), 1(box out), 2(circle in), 3(circle out), 4(wipe up), 5(wipe down) 6(wipe right), 7(wipe left), 8(vertical blinds), 9(horizontal blinds) 10(checkerboard across), 11(checkerboard down), 12(random dissolve) 13(split vertical in), 14(split vertical out), 15(split horizontal in) 16(split horizontal out), 17(strips left down), 18(strips left up) 19(strips right down), 20(strips right up), 21(random bars horizontal) 22(random bars vertical), 23(random)

68 javascript 에서알아두어야할 revealtrans의메서드와속성 메서드 속성 object_name.filters.revealtrans.stop(); object_name.filters.revealtrans.apply(); object_name.filters.revealtrans.play(); object_name.filters.revealtrans.transition; object_name.filters.revealtrans.duration; 스크립트코드 <img src="images/ca4.jpg" id="hoho" style="filter:revealtrans(transition=3, duration =2.5);"> <a href="#" onclick=" ="cmd()"> ()">aaaa</a> <script language=javascript> <!-- } var chk=true; function cmd() { //--> hoho.filters.revealtrans.stop(); hoho.filters.revealtrans.apply(); if(chk) hoho.src="images/ca4.jpg"; else hoho.src="images/ca2.jpg"; chk=! =!chk; hoho.filters.revealtrans.play(); </script>

69 blendtrans 선택된객체를점차밝게 (fade in) 나타내거나, 점차사라지게 (fade out) 함. 형식 filter:blendtrans(duration= 분. 초 );

70 사진에특수효과를주는필터 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= 투명하게할색상명 )">

71 문자와그림을꾸며주는필터 대칭필터로그림을상, 하, 좌, 우로뒤집어준다. <img src="dog.jpg" style=filter:fliph()> <img src="dog.jpg" style=filter:flipv()> alpha 필터는불투명도 (opacity) 값조절 <img src="dog.jpg" style="filter:alpha 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)">

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