과정명

Size: px

Start display at page:

Download "과정명"

우빈 양
5 years ago
Views:

1 CSS (Cascading Style Sheet) 1. CSS 개요 2. CSS Selector, Cascading,Font 3. CSS Table, Positioning 4. CSS Pseudo Class 5. CSS Print 6. CSS Layout - 1 -

2 CSS - 2 -

3 CSS (Cascading Style Sheet) 개요 CSS(Casscading Style Sheet) 구조적으로짜여진문서 (HTML,XML) 에 Style( 글자, 여백, 레이아웃 ) 을적용하기위해사용하는언어 (Language). 운영체제나프로그램에관계없이누구나같은형식으로보기위해만들어진 W3C(World Wide Web Consotium) 에서공인한문서형식의표준 기존웹문서를다양하게설계하고수시변경에따른한계점을보완하기위함. 기존 HTML 의 <FONT> element 의크기 (1~7) 을 CSS 를이용제한없이사용가능. HTML 과의연계적비교 HTML : 웹의기본요소 (HTML element) 인태그 (Tag) 의모음. CSS : 속성 (Property) 의모음 기본요소 (Element) 의특성 (Property 또는 Attribute) 이무엇인지, 이용 (Value 또는 Keyword) 은어떻게하며, 이용방법 (Grammer: 문법 ) 은무엇인지에대한분야. 3

4 CSS (Cascading Style Sheet) 장점 기능확장성 : HTML 의기능을확장 HTML 대부분의요소 (element) 들의단순한기능에다양한기능추가가능 HTML 요소들의기능변경이가능하여독특한문서형식을설계가능 양식의모듈화 : 흐름이같은문서양식으로전체를구성할수있음 HTML는세부항목까지일일이지정하나 CSS로정의된문서를한번만불러사용가능. 구조화된페이지설계가능 코드간결성에의한간단한유지보수가능 간편성 : 다양한형식의문서를구성 HTML의 <TABLE> 로구성된레이아웃을간단하게조작, 구성. 문서의일부를원하는곳에자유롭게배치가가능 효과적인레이아웃 (Layout) 에의한풍부한디자인설계가가능 참고사이트 : 일관성 : 사용환경 ( 다른브라우저 ) 의영향을받지않음웹접근성향상 [ 참고사이트 : 01_01_ 웹접근성예제파일.html] 각기다른 MediaType 설정가능 4

5 CSS (Cascading Style Sheet) 단점 웹브라우저 (Web Browser) 마다다른방식으로지원 사용자환경 (User Agent : 특히, 웹브라우저 ) 에따라적용이되지않은속성 (property) 이있음. (Microsoft IE 의경우가장표준을지키지않음 ) 5

6 CSS 표기법 사용방법 <H3><I><FONT color= green > 녹색이탤릭 </FONT></I></H3> H3 {font-style:italic; color:green} 정의된페이지내의모든 H3 요소 (element) 에같은속성을적용 H3 {font-style : italic ; color : green} 선택자 (Selector) 속성 (property-name) 속성값 (property-value) HTML 의속성 (attribute) 은정해진요소 (element) 에서만사용가능하나, 스타일시트의속성은거의모든 요소에붙일수있음. 6

7 CSS 표기법 문법 (Syntax) 와데이터형식 (DataType) 속성범위 (Property Block) Inline Style 을제외한모든 Style Property 와 Value,Keyword 는중괄호 {} 안에들어감. 1 개의 Property 를사용할경우 CSS Property 와사용값사이를콜론 (:) 으로구분 여러개의속성을사용할경우 7

8 CSS 표기법 속성 (Property) 값에사용되는데이터의종류및형태 (Data Type) 표기법 사용단위 (Length Units) 표기법 HTML에서는붙이지않으나 CSS에서는비율 (%),Pixel(px) 와같은단위사용이원칙 Strict 형식 (Doctype) 의문서에서는반드시단위사용 숫자와단위는따옴표 ( ) 사용하지않음 ( 사용시문자열로인식 ) 8

9 CSS 표기법 속성 (Property) 값에사용되는데이터의종류및형태 (Data Type) 표기법 Keyword : 일종의브라우저예약어로숫자와단위대신사용하는관용적인단어 Thin, medium,thick, red,blue등 따옴표 ( ) 사용하지않음 ( 사용시문자열로인식 ) 문자열 (String) 표기 주석 (Comment) 표기 9

10 CSS 특징및기능 유효하지못한 (Invalid) 속성 (Property) 나값의처리 (Parsing) 무시 (Ignore) 하거나오류 (Error) 를발생. CSS 규격에없는속성을사용한경우 유효하지않은사용값입력한경우 입력값이범위를벗어난경우 대소문자의처리 대소문자구분이없으나 Javascript 나 DHTML scripting 할때정확하게구분함 (classname, Javascript Property) 10

11 CSS 특징및기능 계층화 (Cascading) 제작자 (Publisher), 사용자 (User), 사용도구 (User agent) 에따라스타일시트의중요도변경 1. 제작자 : 문서원문 (Source) 스타일지정 (@import) 2. 사용자 : 사용자나름대로스타일시트를포함하고잇는문서를지정할수있음. 3. 사용도구 : 웹브라우저의환경셋팅에의한스타일지정 위의세가지원천에따라범위가중복될경우계층순서 (Cascading Order) 에따라해석됨 ( 아래그림은직접 css 파일을사용하여사용자환경에맞게웹페이지를볼수있게해주는웹브라우저의환경셋팅법 ) 02_cascading 브라우저예제.css 11

12 CSS 특징및기능 속성값의상속 (Inherit) 하위태그가상위태그의사용값을물려받음.(Cascading) CSS 속성값은상속되지않는값도있음. 예제 : Body 의속성값이 Table 에상속이안됨. 단문서형식이엄격모드 (Strict) 일때는상속됨 12

13 CSS 특징및기능 미디어 (Media) 타입의표기 스타일시트의가장중요한기능중하나로서하나의문서를모니터 (screen), 인쇄 (print), 음성합성장치 (aural), 점자장치 (braille) 등다른미디어에표현하는방법을지정할수있음 각각의속성에따라공통적으로사용되는속성과그렇지않은속성이있음 예 1 ) cue-before 속성은소리 (aural) 미디어타입에서만사용됨. 예 2 ) font-size 속성은모니터 (screen) 이나인쇄 (print) 에서동시에사용됨. 사용 LINK 사용 13

14 CSS 특징및기능 미디어 (Media) 타입의표기 CSS 의미디어타입은일련의 CSS 속성관련, 미디어타입에맞는속성과값을사용해야함. 알려진미디어타입 all : 모든장치에사용하는타입 sceen : 컴퓨터모니터에서사용하는타입 print : 인쇄장치 (Printer) 를위한타입 aural : 음성장치 (speech synthesize) 를위한타입 braille : 브레일 (braille, 점자 ) 표현장치을위한타입 embossed : 페이지에인쇄된점자 (braille) 을위한타입 handheld : 전형적인작은스크린, 단색상, 한정된대역대 (bandwidth) 의손에들고다니는 (handheld) 장치를위한타입 projection : 프로젝터를위한타입 tty : 디스플레이능력이한정된텍렉스 (teletype), 터미널, 고정피치 (fixed-pitch) 미디어위한타입 tv : 텔레비전 (television-type) 장치를위한의도 (* W3C CSS2 권고안에는 all, screen,print,aural 에관한속성만표기되어있으며가장많이사용하는 screen,print 에대한내용만다룸 ) 14

15 CSS Selector (DomQuery, CssQuery,JQuery)

Linked style sheet( 외부파일 Link로여러파일에일괄지정 ) Imported Style

16 스타일시트 (StyeSheet) 사용법 스타일사용법 4 가지 Inline Style(Tag속에직접지정 ) Embedded style sheet 와 Style block (Style block속에일괄지정 ) Linked style sheet( 외부파일 Link로여러파일에일괄지정 ) Imported Style sheet Inline style 속성이용하기 HTML Tag 속에 style 속성을사용하여직접지정 16

17 스타일시트 (Style Sheet) 사용방법 문서에내포된스타일시트 (Embedded style sheet) 와스타일블럭 (Style block) <HEAD>~</HEAD> 사이에위치 스타일시트를지원하지않는브라우저를위한주석문필요 스타일블럭 17

18 스타일시트 (Style Sheet) 사용방법 연결된외부스타일시트 (Linked style sheet) HEAD 부분에 LINK element 를이용하여외부 css 파일연결 REL= stylesheet : 연결하는문서가스타일시트문서정의 많은문서작업을할때모든스타일을 01_CSS 삽입 03.css 에모두정의해주고문서들에는 <LINK>element 를이용하여넣어주면되며, 해당스타일시트파일을연결한모든문서를수정할때는 01_CSS 삽입 03.css 파일만수정하면됨. 장점 : 여러개의 HTML 문서를동일한스타일적용시사용 연결된 (Linked) 스타일시트하나만수정하여여러개의 HTML 문서양식을동시에수정가능 18

19 스타일시트 (Style Sheet) 사용방법 임포트된외부스타일시트 (Imported style sheet) 결과적으로링크된외부스타일시트 (Linked style sheet) 과같음 스타일시트파일안에서다른스타일시트를가져와사용할수있음. 보여지는미디어타입 (Media Type) 을설정할수있음 사용법 url("mystyle.css"); 19

20 스타일시트 (Style Sheet) 사용방법에따른스타일우선순위 스타일적용의우선순의 (Cascading Order) 스타일사용방법에따른우선순위 1. Inline Style ( 직접작성스타일 ) : 최우선적용 2. Embedded style sheet ( 문서에내포된스타일 ) 3. Linked style sheet ( 링크된외부스타일 ) 4. Imported Style sheet ( 임포트된외부스타일 ) 20

21 선택자 (Selector) [ 예제파일 : 01_CSS 삽입 01.html] 선택자 (Selector) CSS 속성 (Property) 1 개또는그이상의속성들을속성블럭 (Property block: {} ) 속에넣어놓는것 일반선택자의종류 우선순위낮음 우선순위높움 21

22 일반선택자 (Selector) 요소 [ 예제파일 : 02_01_ 선택자.html 공용선택자 (Universal Selector) HTML 문서내의모든요소 (Element) 에같은 CSS 속성을지정. 사용법 : Asterisk(*) 뒤에스타일블럭 (Styleblock) 사용 타입선택자 (Type Selector) HTML 요소 (Element) 에직접 CSS 속성 (Property) 을지정. HTML 요소에별도의 CSS 속성을지정하지않아도속성값이적용됨. 22

23 일반선택자 (Selector) 요소 [ 예제파일 : 02_03_ 클래스선택자.html 클래스선택자 (Class Selector) 원하는 HTML Element에만선택적으로 CSS속성을지정 가장많이사용되는 Selector 사용방법 : Period(. : 點 ) 를찍고공백없이영문대소문자또는 Hyphen(-), Underscore(_) 사용 기호나숫자로시작하면안됨 ( MS Internet Explorer경우작동 ) 23

24 일반선택자 (Selector) 요소 [ 예제파일 : 02_03_ 특정클래스선택자.html 특정요소 (Element) 에만적용되는 Class Selector 원하는 HTML Element 에만 CSS 속성을지정 24

25 일반선택자 (Selector) 요소 [ 예제파일 : 02_03_ID 선택자.html ID Selector Class Selector와마찬가지로사용 DHTML이나 Javascript등동적인웹페이지를만들거나데이터를다루는데이용 사용법 : Hash(#) 을붙임 25

26 복합선택자 (Selector) [ 예제파일 : 02_02_ 자손문맥선택자.html 복합선택자의종류 26

27 복합선택자 (Selector) 요소 [ 예제파일 : 02_02_ 자손문맥선택자.html 하위선택자 (Descendant Selector,Contextual Selector) HTML Element 를 2 개이상원하는순서대로나열하여표기 순서상뒤에표기한선택자에해당하는요소를앞에표기한선택자에해당하는요소속에서사용할때만유효함. 1 단계하위요소 (child element), 2 단계이상하위요소 (decendant element) 또한같이적용 27

28 복합선택자 (Selector) 요소 [ 예제파일 : Selector 종류.jpg] 자식선택자 (Child Selector) Child element( 어떤요소의한단계하위요소 ) 에만적용되는선택자 IE6.0 은지원안함 (NN, FF, Opera 는지원 ) 28

29 복합선택자 (Selector) 요소 [ 예제파일 : Selector 종류.jpg] 인접선택자 (:Adjacent Selector) 같은부모 (parent) 를가지면서인접한 (sibling) 관계인 element 에만적용 IE6.0 지원안됨 29

30 가상클래스선택자 (Selector) 요소 [ 예제파일 : Selector 종류.jpg] 가상클래스선택자종류 30

31 가상클래스선택자 (Selector) 요소 [ 예제파일 : Selector 종류.jpg] First-child 선택자 (:first-child pseudo class) 어떤요소 (element) 의자식요소 (child element) 가여러개있을경우첫번째자식요소에만적용됨. IE6.0 은지원안함 (NN, FF, Opera 는지원 ) 31

32 가상클래스선택자 (Selector) 요소 [ 예제파일 : Selector 종류.jpg] 언어선택자 (:lang pseudo class) Lang attribute 값이일치하는 element 에만적용 IE6.0 지원안됨 32

33 가상클래스선택자 (Selector) 요소 [ 예제파일 : Selector 종류.jpg] 동적선택자 (Dynamic pseudo class) block level 과 text level 요소에적용. hover( 마우스올렸을때 ), active( 활성일때 ),visited( 방문한것일때 ),link( 일반링크 ),focus 등 Microsoft Internet Explorer 는 <A>element 에만적용 33

34 가상클래스선택자 (Selector) 요소 [ 예제파일 : Selector 종류.jpg] 동적선택자 (Dynamic pseudo class) IE 는 <A>element 에만적용안됨 34

35 그외선택자 (Selector) 요소 [ 예제파일 : Selector 종류.jpg] 그외의 Selector (:Attribute Selector) E[attr] Element 에사용된속성 (attribute) 와속성값등이 selector 로지정하는조건과일치할때적용 IE6.0 지원안됨 (IE 이녀석말썽입니다 ) 35

36 그외선택자 (Selector) 요소 [ 예제파일 : Selector 종류.jpg] 그외의 Selector (:Attribute Selector) E[attr= attval ] 같은속성 (attribute) 의속성값이해당조건과일치할때적용 IE6.0 지원안됨 ( 역시안됩니다. ㅡ., ㅡㅋ ) 36

37 복합선택자 (Selector) 요소 - 연습과제 [ 예제파일 : Selector 종류.jpg] 그외의 Selector (:Attribute Selector) E[attr~= attval ] 속성값이공백으로분리되어여러개일경우, 값들중에해당조건과일치하는경우적용 IE6.0 지원안됨 37

38 선택자 (Selector) 그룹화 Selector Grouping 같은속성 (Property) 와같은속성값을사용하는 Seletor 가여러개일때 Group 만드는것 사용법 : comma(, ) 로구분 <STYLE type="text/css">  </STYLE> <STYLE type="text/css">  </STYLE> <STYLE type="text/css">  </STYLE> <STYLE type="text/css">  </STYLE> 38

39 선택자 (Selector) 우선순위 (Cascading Order) Selector 의우선순위 (Cascading Order) 우선순위계산법 1. ID Selector 의갯수를세어서개당 100 으로계산합니다. (=a) 2. Class Selector 의갯수를세어서개당 10 으로계산합니다. (=b) 3. Type Selector 의갯수를세어서개당 1 로계산합니다. (=c) LI.red.level {...} /* a=0 b=2 c=1 -> specificity( 명세서 ) = 21 */ ID Selector 는없고.red 과.level 이라는 Class Selector 가 2 개이므로 20 을부여, LI 라는 Type Selector 가 1 개이므로 1 을부여하여 = 21 ( 참고 : Universal Selector 는값 '0 ) 01. Inline StyleSheet 가우선되는경우 : Inline StyleSheet 는모든 Selector 에우선 02. ID Selector 와 Class Select 가동시에사용된경우 ID Selector 가우선 39

40 글꼴 (FONT) 관련 CSS 속성 (Property) <FONT> 태그관련속성은 CSS2 에서추천하지않는기능 다른 Block, Inline 관련 element 들에 CSS property 로대체가능하기때문 관련속성 font-family: 글꼴지정속성 (font name) font-size : 글자크기 font-style : 글자의스타일 ( 보통, 이태릭 ) font-variant : 소문자를작은대문자 (small-caps) 로변형 font-weight : 글꼴의굵기에관한속성 line-height: 행간격을지정하는속성 color : ( 글자색 ) font : font에관한속성을한꺼번에지정하는단축형 (short hand) 속성 40

41 글꼴 (FONT) 관련 CSS 속성 (Property) 글꼴 (font-family) 속성 사용법 : { font-family: 글꼴이름, 글꼴이름 } CSS Parser 는앞의글꼴부터읽으며글꼴이사용자 PC 에없을경우다음글꼴을읽음 글자모양 (font-style) 속성 사용법 : { font-style: normal( 정상 ) italic( 이태릭 ) oblique( 기운것 ) } 기본값은 normal 41

42 글꼴 (FONT) 관련 CSS 속성 (Property) font-varient 속성 사용법 : { font-variant : normal small-caps( 작은대문자형태 ) } 초기값 : normal 한글은변화없음 font-weight 속성 : 글자의굵기를조정 사용법 : { font-weight : normal bold bolder lighter (normal) (bold) } 초기값 : normal 42

43 글꼴 (FONT) 관련 CSS 속성 (Property) font-size 속성 사용값 : {font-size : 속성값 } 절대사이즈 = xx-small x-small small medium large x-large xx-large Font 요소의 size 속성값이 1~7 : 한단계커지거나작아질때마다 1.2 배율 (Scaling factor) 가적용 상대사이즈 = larger smaller 비율 (percentage) : 상위가없을경우기본크기 (12pt) 를기준으로 100 분율상대크기 43

44 글꼴 (FONT) 관련 CSS 속성 (Property) line-height 속성 행 ( 줄 ) 간격을다루는속성 사용법 : { line-height : 상대값 절대값 비율 } 기본값 : 12pt color 속성 글자색을다루는속성 사용법 : { color : 색이름 RGB값 } 초기값 : 브라우저마다다름. 44

글꼴 (FONT) 관련 CSS 속성 (Property) [ 예제파일 : 03_ 글꼴.html] font 속성 Font-style,font-variant,font-weight,font-size,line-height,font-family 등을한꺼번에지정할수있는단축형속성 속성값 : ( 반드시 1,2,3 순서대로작성 ) 1.

45 글꼴 (FONT) 관련 CSS 속성 (Property) [ 예제파일 : 03_ 글꼴.html] font 속성 Font-style,font-variant,font-weight,font-size,line-height,font-family 등을한꺼번에지정할수있는단축형속성 속성값 : ( 반드시 1,2,3 순서대로작성 ) 1. font-style,font-variant,font-weight 중하나또는전부 2. font-size/line-height (font-size 만쓸경우 / 생략가능 ) 3. font-family 사용예 : ( 글 ) 꼴에 ~ style 모자 (small-caps) 쓴굵은 (bold) 것이 12/ 간격가족 이다. 45

46 TEXT( 단어나문장 ) 에관한 CSS 속성 글자들, 공간들, 단어들과문단들의보여지는표현속성을정의 관련속성 text-align : 정렬방식에대한속성 text-decoration : 텍스트의장식에대한속성 text-indent : 들여쓰기 text-transform : 대문자화 white-space : 문자사이의공백처리 vertical-align : 수직정렬 letter-spacing : 글자간의간격 word-spacing : 단어간의간격 line-height : 줄간격 46

47 TEXT( 단어나문장 ) 에관한 CSS 속성 [ 예제파일 : 231_ 텍스트 _ 정렬.html] text-align : 정렬방식에대한속성 사용법 : { text-align : left right justify } 초기값 : 사용자환경 (User Agent:Web browser) 에따라틀림 47

48 TEXT( 단어나문장 ) 에관한 CSS 속성 [ 예제파일 : 231_ 텍스트 _ 장식.html] text-decoration : 텍스트장식 (Decoration) 에대한속성 사용법 : { text-decoration : none underline overline line-through blink } 48

49 TEXT( 단어나문장 ) 에관한 CSS 속성 [ 예제파일 : 231_ 텍스트 _ 들여쓰기.html] text-indent : 들여쓰기에대한속성 사용법 : { text-indent : 절대값 (px,pt,em) 배율 (%) } 49

50 TEXT( 단어나문장 ) 에관한 CSS 속성 [ 예제파일 : 231_ 텍스트 _ 대소문자.html] text-transform : 대소문자에대한속성 사용법 : { text-transform : capitalize uppercase lowercase none} 속성값 capitalize : 첫글자를대문자로 uppercase : 글자전체를대문자로 lowercase : 글자전체를소문자로 50

51 TEXT( 단어나문장 ) 에관한 CSS 속성 [ 예제파일 : 231_ 텍스트 _ 공백처리.html] white-space : 여러개의공백 (space) 처리속성 HTML에서의공백처리 : (non-breaking space) 사용법 : { white-space : normal pre nowrap} 속성값 normal : 공백 (space) 를 1 개밖에인정안함 pre(pre-formatted) : 공백 (space) 개수만큼보여줌 (DTD 가 Strict 일때만작동 ) <PRE> element 같이사용자가입력한모습그대로공백을화면에출력 nowrap : 줄바꿈금지 <BR> element 처럼강제로줄을바꾸기전에는계속같은줄에출력 51

52 TEXT( 단어나문장 ) 에관한 CSS 속성 [ 예제파일 : 231_ 텍스트 _ 수직정렬.html] vertical-align : Box 속의내용물의수직정렬을지정 표 <Table> 의셀 (Cell) 과같은 Box속에들어있는내용물의수직정렬을지정하는속성 (Property) 사용법 : { vertical-align: baseline sub super top text-top middle bottom text-bottom 비율 (%) 길이값 (length) } 속성 baseline Basline( 기초라인 ) : 박스의기초라인을모체박스의기초라인에정렬 Sub( 아래첨부기능 ) : 박스의기초라인을모체박스의아래첨자 (subscript) 에맞춤 Super( 위첨부위치 ) : 박스의기초라인을모체박스의위첨자 (superscript) 에맞춤 Top( 맨위 ) : 박스의맨위를라인박스의맨위에정렬 Text-top( 텍스트맨위 ) : 박스의맨위를모체엘리멘트글꼴의맨위에맞춤 Middle( 중앙 ) : 박스의수직적중간점을그모체박스중간에정렬 Bottom( 바닥 ) : 박스의바닥을라인박스의바닥에정렬 Text-bottom( 텍스트맨아래 ) : 박스의바닥을모체엘리멘트글꼴의바닥에정렬 비율 (%) : 박스를 line-height 값의백분율거리만큼올리거나 ( 양수 ) 내린다 ( 음수 ). 값이 0% 면 baseline 과같음 길이 (length) : 박스를거리길이만큼올리거나 ( 양수 ) 내림 ( 음수 ) sub super Top, text-top middle Bottom, text-bottom 52

영어의경우자간이좁아서혼동우려하여만들어짐 ( 예 : class => dass) 사용법 : { letter-spacing :

53 TEXT( 단어나문장 ) 에관한 CSS 속성 [ 예제파일 : 231_ 텍스트 _ 자간.html] letter-spacing : 자간 ( 글자간의간격 ) 을조정 자간을늘리거나 ( 양수 ) 줄일때 ( 음수 ) 사용 영어의경우자간이좁아서혼동우려하여만들어짐 ( 예 : class => dass) 사용법 : { letter-spacing : normal 길이값 (length,) } word-spacing : 단어간의간력을조절 사용법 : { word-spacing : normal 길이값 (length,) } 53

54 TEXT( 단어나문장 ) 에관한 CSS 속성 [ 예제파일 : 231_ 텍스트 _ 줄간격.html line-height : 줄간의간격을조정 사용법 : { line-height : normal 수치 길이값 (length) 백분율 } 최초값 : normal 속성값 Normal : 사용자환경 (User Agent) 에따라틀림. 수치 : 해당 element의글꼴크기에곱한수치 ( 양수값만사용 ) 길이값 : 박스높이는길이로설정 ( 양수값만사용 ) 백분율 (%) : 해당 element의글꼴크기를곱한백분율 54

55 사용자인터페이스 (User Interface) 에관한속성 화면에출력될 element 들에디자인요소를추가하는속성 커서의모양을변경. 리스트의형태를변경및이미지삽입, 문서의배경색, 배경이미지 스크롤바 (Scroll bar) 의색상변경 보임, 안보임조정 관련속성 cursor Scrollbar Classification( 목록 ) : List-style-type, list-style-image, list-style-position, list-style Disaply Background-color, background-image,background-attachment, background-repeat, background 55

$해당클라이언트의 Cursor를확인하는법 : C:\Windows\Cursors 사용법 : { cursor : auto crosshair default pointer move e-resize ne-resize nw-resize n- resize se-resize sw-resize s-resize w-resize text wait help url( 주소 ) }$

56 사용자인터페이스 - 마우스커서 (Cursor) 에관한속성 [ 예제파일 : 232_UI_ 커서.html cursor : 사용자환경 (UserAgent) 의마우스모양을바꾸는역할 클라이언트 (Client PC) 의사용자환경에따라다름. 해당클라이언트의 Cursor를확인하는법 : C:\Windows\Cursors 사용법 : { cursor : auto crosshair default pointer move e-resize ne-resize nw-resize n- resize se-resize sw-resize s-resize w-resize text wait help url( 주소 ) } 최초값 : auto Custom Cursor : {Cursor :url( ) } 56

57 사용자인터페이스 - 스크롤바 (Scrollbar) 에관한속성 [ 예제파일 : 232_UI_ 스크롤바.html scrollbar : 사용자환경 (UserAgent) 의스크롤바모양을바꾸는역할 W3C 표준권고안에는없는속성 (property) MS Internet Explorer 만지원 사용법 : body { scrollbar-3dlight-color: 칼라값 ; scrollbar-highlight-color: 칼라값 ; scrollbar-face-color: 칼라값 ; scrollbar-shadow-color: 칼라값 ; scrollbar-darkshadow-color: 칼라값 ; scrollbar-track-color: 칼라값 ; scrollbar-arrow-color: 칼라값 ; } 57

58 사용자인터페이스 목록 (Classification) 속성 목록 (Classification) : <OL>,<UL>.<LI> 만으로할수없는글머리기호의위치지정, 글머리기호대신에이미지를넣는속성 속성 (Property) 목록 : List-style-type : 글머리번호, 기호의형태를지정 List-style-image : 글머리번호, 기호에이미지를넣는속성 List-style-position : 글머리번호, 기호의문장에서의위치를지정 List-style : list관련 CSS 속성의단축형 (short hand) 속성 display : SPAN(Inline element: 선요소 ), DIV(Block element: 면적요소 ) 의 element 속성을변경 58

59 사용자인터페이스 목록 (Classification) 속성 [ 예제파일 : 232_UI_ 목록 _ 글머리기호.html List-style-type : 글머리번호, 기호의형태를지정 순서가없는목록 (<UL>,,, ) 이나순서가있는목록 (<OL>,1,a,A,I,i ) 의글머리기호나번호의형태를지정하는속성. 반드시 <UL>,<OL> 에지정 사용법 : {list-style-type : disc circle square decimal lower-roman upper-roman lower-alpha 등 } 기본값 :disc 59

60 사용자인터페이스 목록 (Classification) 속성 [ 예제파일 : 232_UI_ 목록 _ 글머리기호.html List-style-image : 글머리번호, 기호에이미지를넣는속성 사용법 : {list-style-image : none url( 이미지주소 )} 초기값 : none List-style-image를고려하지않고글앞에이미지넣기 List-style-image 를고려한글앞에이미지넣기 60

61 사용자인터페이스 목록 (Classification) 속성 [ 예제파일 : 232_UI_ 목록 _ 글머리위치.html List-style-position : 글머리번호, 기호의문장에서의위치를지정 글머리기호나문자가문장속에들어가거나 (inside), 문장왼쪽밖으로따로나와있거나 (outsie) 의여부를다루는속성. 초기값 : outside 사용법 : {list-style-position : inside outside} 61

62 사용자인터페이스 목록 (Classification) 속성 [ 예제파일 : 232_UI_ 목록 _ 단축형.html List-style : 리스트관련 CSS 속성의단축형 (short hand) 속성 사용법 : {list-style : none list-style-type list-style-position listy-style-image} 단축형에는초기값이없음. 62

63 사용자인터페이스 DISPLAY 속성 display property 특징 lnline element( 선요소 ) 나 Block element( 면요소 ) 가화면상에출력 (Render) 되는방식을다루는속성. 화면에나오는모든 element 는 Inline, Block 두가지로구성되어있음. Inline-Level element : 같은줄에서줄바꿈없이연속적으로이어지는 element, SPAN,FONT) Block-Level element : DIV, P, H1~H6 과같이줄바꿈이생기는 element : 위아래로줄바꿈이됨. Inline-level element Block-level element 로속성을변경할수있게해줌 CSS 로화면레이아웃 (Layout) 을잡을때상당히중요한역할을함. 화면에나타나지않게 (none) 함 사용법 : {display: inline block list-item table-header-group table-footer-group none inline-block(* IE Only) } 63

64 사용자인터페이스 DISPLAY 속성 [ 예제파일 : 232_UI_ 목록 _DISPLAY01.html 예시 1 ) SPAN(lnline 요소 ) 이 DIV(Block 요소 ) 를만났을때 DIV 를 {display:inline} 사용하여 inline 요소로바꿈 예시 2 ) SPAN(lnline 요소 ) 이 SPAN(lnline 요소 ) 를만났을때 64

65 사용자인터페이스 DISPLAY 속성 [ 예제파일 : 232_UI_ 목록 _DISPLAY02_list_item.html display :list-item 속성 <UL> 이나 <OL> 과같이화면에출력시킴. SPAN 같은 Inline 요소를사용해도 LI 와같이 block 요소로화면에 render 됨. 65

66 사용자인터페이스 DISPLAY 속성 [ 예제파일 : 232_UI_ 목록 _DISPLAY03_TABLE_HEADER_GROUP.html display :table-header-group, table-footer-group 속성 <TABLE> 의 <THEAD> 와 <TFOOT> 에서작동. 이속성은컴퓨터모니터상에서출력할목적으로만든속성이아니고한페이지가넘는여러페이지분량의 Table 을프린터로출력할때매페이지마다테이블머리말 (THEAD) 과꼬리말 (TFOOT) 을넣어주기위해서사용. 66

67 사용자인터페이스 DISPLAY 속성 - 연습과제 [ 예제파일 : 232_UI_ 목록 _DISPLAY03_NONE.html display :none, block 보이기 (block), 감추기 (none) 기능을수행. 67

68 사용자인터페이스 배경색 (Background) 속성 배경색 (Background) : 문서나박스형태의표의배경색, 배경이미지등에관한속성 속성 (Property) 목록 : Background-color : 문서의배경색을지정하는속성 Background-image : 문서의배경을이미지로지정하는속성 Background-attachment : 문서의배경이미지를고정하거나 scroll 여부를지정하는속성 Background-repeat : 배경그림의반복여부를지정하는속성 Background-position: 배경그림의위치를지정하는속성 Background : 위의모든속성을한꺼번에지정하는단축형 (short hand) 속성 68

69 사용자인터페이스 배경색 (Background) 속성 [ 예제파일 : 232_UI_ 목록 _ 배경색 01_ 색깔.html Background-color : 문서의배경색을지정하는속성 Inline요소나 Block요소의배경색을지정하는속성 <font> 의 color 속성과같음. 사용법 : {background-color: 칼라색 transparent} 기본값 : transparent 속성값 : Transparent color: 투명색, 상위 element의배경색이비춰짐.(cascading) color : 색이름 RGB값 69

70 사용자인터페이스 배경색 (Background) 속성 [ 예제파일 : 232_UI_ 목록 _ 배경색 01_ 이미지.html Background-image : 문서의배경을이미지로지정하는속성 배경이미지가격자모양으로반복하여나타남 스크롤하였을경우배경이미지도반복적으로나타나며스크롤됨 사용법 : {background-image : none url( 그림파일경로 ) } 70

71 사용자인터페이스 배경색 (Background) 속성 Background-attachment : 배경이미지를고정 (fixed) 시키거나 scroll 시킴 사용법 { background-attachment : scroll fixed } 기본값 : scroll 71

72 사용자인터페이스 배경색 (Background) 속성 Background-repeat : 지정한배경그림을반복 (repeat) 시키거나시키지않거나 (no-repeat), 수평으로반복 (repeat-x), 수직으로반복 (repeat-y) 하는것을지정 72

.) 수평값 (left,center,right) 수직값 (top,center,bottom)} 사용예 : {

73 사용자인터페이스 배경색 (Background) 속성 Background-position: 배경으로지정한그림의시작지점을지정하는속성 사용법 : {background-position : 백분율 (%) 길이값 (px,em..) 수평값 (left,center,right) 수직값 (top,center,bottom)} 사용예 : { background-position : left bottom} 지정하지않음 left center left bottom right bottom 50px 50px 50% 50% 73

74 사용자인터페이스 배경색 (Background) 속성 [ 예제파일 : 232_UI_ 목록 _ 배경색 01_ 단축형속성.html Background : 모든속성을한꺼번에지정하는단축형 (short hand) 속성 사용법 : {background : background-color background-image background-repeat background-attachment background-position } Background 속성은속성값의순서에구애를받지않음. 74

75 표 (Table) 관련속성 <TABLE> element 에관련된속성 테이블의너비기능 : width, table-layout 테이블의높이기능 : height속성으로지정 셀 (Cell) 박스안에서의내용수평정렬 : text-align (left, center, right) 셀 (Cell) 박스안에서의내용수직정렬 : vertical-align (baseline,top,bottom,middle등) 테두리 (border) 관련속성 테두리모델 : 분리된 (seperated) 테두리모델, 통합된 (collpasing) 테두리모델 테두리모델의구분속성 : border-collapse 분리된 (seperated) 테두리모델속성들 분리하는인접셀테두리들의거리지정속성 : Border-spacing 빈셀주위의테두리속성 : empty-cells 통합 (collapsing) 테두리모델속성들 테두리스타일 : border-style 테두리너비 : border-width 테두리색상 : border-color 테두리약식속성 : border-top,border-bottom, border-right, border-left, border 75

76 표 (Table) 관련속성 - TABLE 너비관련속성 table-layout 속성 : 테이블셀 (Cell) 의 width, height 를고정하거나않는것을지정하는속성 사용법 : {table-layout : auto(default) fixed } 테이블의길이가길어지면화면상에출력하기위해계산하는시간이길어짐 ( 참조사이트 : ) Table-layout:fixed 사용 계산이빨라짐 계산된앞부분부터화면에출력 (render) 됨. Cell의내용물이넘쳐도 Cell의크기에영향을주지않음 Table-layout:fixed 미사용 Cell size를계산하므로느림. 계산이끝난후에화면에출력 Cell속의내용물 (data) 이 Cell의가로, 세로크기에영향을준다. 76

77 표 (Table) 관련속성 - TABLE 너비관련속성 table-layout 사용하는방법 <Table>Tag의첫번째 <TR> 의 <TD> 에지정하는방법 <Colgroup> 과 <Col> 요소를사용하는방법 Cell의 width를지정하지않은경우와내용물 (Data) 이 Cell을넘치는 (overflow) 경우 <table border="1" style="table-layout:fixed;"> <tr height="30"> <td width="10%">r1 C1</td> <td width="15%">r1 C2</td> <td width="20%">r1 C3</td> <td width="25%">r1 C4</td> <td width="30%">r1 C5</td> </tr> <tr height="45"> <td>r2 C1</td> <td>r2 C2</td> <td>r2 C3</td> <td>r2 C4</td> <td>r2 C5</td> </tr> </table> <table border="1" style="table-layout:fixed;"> <COLGROUP span="5" style="text-align:center; background:silver;"> <COL span="1" style="width:30%; color:tomato;"> <COL span="2" style="width:15%; color:gold;"> <COL span="2" style="width:20%; color:royalblue;"> </COLGROUP> <TBODY style="height:30px;"> <tr> <td>r1 C1</td> <td>r1 C2</td> <td>r1 C3</td> <td>r1 C4</td> <td>r1 C5</td> </tr> <tr> <td>r2 C1</td> <td>r2 C2</td> <td>r2 C3</td> <td>r2 C4</td> <td>r2 C5</td> </tr> </TBODY> </table> 77

78 표 (Table) 관련속성 - TABLE 너비관련속성 table-layout 사용하는방법 내용물 (Data) 이 Cell 을넘치는 (overflow) 경우처리 78

79 표 (Table) 관련속성 - 테두리 (Border) 속성 테두리 (border) 테두리모델 : 분리된 (seperated) 테두리모델, 통합된 (collpasing) 테두리모델 테두리 (border) 모델구분속성 : border-collapse <Table>element 의 Cellspacing 속성을주지않을시기본 cellspacing 은 2pixel ( 인접한 Cell 의 border 가겹침 ) 사용법 : {border-collapse : separate collapse } 기본값 : seperate {border-collapse : collapse} Cellpadding=0 Border:1px solid #000 79

80 표 (Table) 관련속성 - 테두리 (Border) 속성 분리된 (Seperated) 테두리모델속성들 Border-spacing 속성 셀 (Cell) 은개별테두리를갖는데 border-spacing 속성은인접셀들사이의거리를지정하는속성. 사용법 : { border-spacing : 수평길이 (horizen length) 수직길이 (vertical length) } 길이 (length) 값이한개일경우수평과수직길이 : 길이값은반드시양수 80

81 표 (Table) 관련속성 - 테두리 (Border) 속성 [ 예제파일 : 233_ 테두리 _ 분리 _empty_cells.html Empty-cells 속성 분리된테두리모델에서빈셀들과 visibility( 가시적 ) 속성을지정하는속성 사용법 : { empty-cells : hidden show } 속성값 show : 빈셀의주위에정상셀 ( 내용을가진셀 ) 처럼테두리가그려짐. * MS IE6.0 적용안됨 81

82 표 (Table) 관련속성 - 테두리 (Border) 속성 통합된 (Seperated) 테두리모델 통합테두리모델에서는셀 (cell), 줄 (row), 줄그룹, 컬럼 (column), 컬럼그룹의테두리지정하는것이가능.: (HTML rule 속성이통합된테두리모델방식으로지정됨 ) 테이블의너비구하는공식 : 두외부 (exterior) 테두리의반만테이블너비로계산되고, 다른셀들의양쪽두테두리들은마진 (margin) 지역에들어감. 82

83 표 (Table) 관련속성 - 테두리 (Border) 속성 테두리너비 (border-width) 속성 종류 : border-top-width, border-right-width, border-bottom-width, border-left-width, border-width( 단축형속성 ) 속성값 : thin, medium, thick border-width( 단축형속성 ) 사용법 : 시계방향으로설정 ( 맨위 오른쪽 바닥 왼쪽 ) 값이 1 개 : 모든면에적용 값이 2 개 : 1 번째 {top, bottom},2 번째 (right,left) 값이 3 개 : 1 번째 {top},2 번째 {right.left},3 번째 {bottom} 값이 4 개 : 1 번째 {top},2 번째 {right}. 3 번째 {left},4 번째 {bottom} 4.left 1. top 3. bottom 2. right H1 { border-width: thin } /* thin thin thin thin */ H1 { border-width: thin thick } /* thin thick thin thick */ H1 { border-width: thin thick medium } /* thin thick medium thick */ 83

84 표 (Table) 관련속성 - 테두리 (Border) 속성 테두리색상 (border-color) 속성 종류 : border-top-color, border-right-color, border-bottom-color, border-left-color, border-color( 단축형속성 ) 속성값 : 색상값 (#000000, rgb( ), red, transparent( 투명색 ) border-color( 단축형속성 ) 사용법 : 시계방향으로설정 ( 맨위 오른쪽 바닥 왼쪽 ) 값이 1 개 : 모든면에적용 값이 2 개 : 1 번째 {top, bottom},2 번째 (right,left) 값이 3 개 : 1 번째 {top},2 번째 {right.left},3 번째 {bottom} 값이 4 개 : 1 번째 {top},2 번째 {right}. 3 번째 {left},4 번째 {bottom} 4.left 1. top 3. bottom 2. right 엘리멘트의테두리색상이테두리속성에서지정되지않았으면테두리색상은해당엘리먼트의 color 속성을사용해야함. 84

85 표 (Table) 관련속성 - 테두리 (Border) 속성 [ 예제파일 : 233_ 테두리 _ 스타일.html 테두리스타일 (border-style) 속성 : 테두리의형태를지정 사용법 : {border-style: none hidden dotted..} 속성값 : None( 없음 ) : 테두리없음. ( 자신의테두리만억제 ) Hidden( 감춤 ) : none 과같은나해당셀들의모든테두리를억제 Dotted( 점선 ) Dashed( 대쉬점선 ) : 짧은선 (shortline) Solid( 실선 ) : 단일선 (line) Double( 이중실선 ) : 두개의단일선 Goove( 파인조각 ) : 테두리가창 (canvas) 에조각된것처럼보임. ( 음각 ) Ridge( 튀어나온조각 ) : 양각 Inset( 파일조각 ) : 분리된 (sperated) 테두리모델에서창 (canvas) 에깔린 (embed) 같이전체박스를만듬. 통합테두리모델에서 goove 와같음 Outset( 튀어나온조각 ) : Inset 의반대 border-color( 단축형속성 ) 사용법 : 시계방향으로설정 ( 맨위 오른쪽 바닥 왼쪽 ) 85

86 표 (Table) 관련속성 - 테두리 (Border) 속성 테두리약식표현속성 { border: } 박스모델의맨위오른쪽바닥왼쪽테두리의너비스타일색상을설정속성 종류 : border-top, border-right, border-bottom, border-left, border ( 단축형속성 ) 속성값 : border-width, border-style, border-color식으로속성지정 #H1 { border-bottom: thick solid red } /* 너비스타일색상 */ border ( 단축형속성 ) 사용법 : 모든네테두리들에같은너비, 스타일, 색상을설정하는약식속성 margin,padding 의약식속성과달리 4 테두리의다른값을설정못함. P { border: solid red } P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red } 86

87 박스모델 (BOX MODEL) 박스모델 (BOX) 개요 CSS2.0 에서는모든 element 는여러겹의상자로둘러쌓여있다고가정 87

88 박스모델 (BOX MODEL) [ 예제파일 : 234_ 박스모델 _ 마진패팅테두리예제.html 마진 (margin), 패딩 (padding), 테두리 (border) 예제 1 LI 의 Content 너비 LI margin Collapsed Margin Max(12px,12px) =12px LI margin UL padding UL margin UL BOX {margin:12px;} 88

89 박스모델 (BOX MODEL) [ 예제파일 : 234_ 박스모델 _ 마진.html 마진 (margin), 패딩 (padding), 테두리 (border) 예제 2 <HTML> <HEAD> <TITLE> 문서에 margin 과 padding 을적용한사례 </TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY class="hormargin"> <P class="para"> 아래의예제는 P Element 를사용하여문단을정리하면서좌우여백을브라우저창의 5% 로하고, Table 을만들어 Cell 의좌측에 5px 의여백을주는예제가되겠습니다. </P> <table border="0" cellpadding="0" cellspacing="2" width="100%"> <tr> <td class="cellpadding">r1 C1</td> <td class="cellpadding">r1 C2</td> </tr> <tr> <td class="cellpadding">r2 C1</td> <td class="cellpadding">r2 C2</td> </tr> </table> </BODY> </HTML> 89

90 박스모델 (BOX MODEL) 마진 (margin) 속성 : box 의마진영역 (margin area) 너비를지정 관련속성 : margin-top, margin-right, margin-bottom, margin-left 사용법 : { margin-top : 길이값 (length value : 20px,-10px) } margin( 단축형속성 ) 사용법 : 시계방향으로설정 ( 맨위오른쪽바닥왼쪽 ) 값이 1개 : 모든면에적용 값이 2개 : 1번째 {top, bottom},2번째 (right,left) 값이 3개 : 1번째 {top},2번째{right.left},3번째{bottom} 값이 4개 : 1번째 {top},2번째{right}. 3번째 {left},4번째{bottom} 1. top BODY { margin: 2em } /* 모든마진들을 2em 으로설정 */ BODY { margin: 1em 2em } /* 맨위 & 바닥 = 1em, 오른쪽 & 왼쪽 = 2em */ BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */ BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* 반대쪽 (right) 에서복사 */ } 4.left 3. bottom 2. right 90

91 박스모델 (BOX MODEL) 마진 (margin) 통합 (collapsing) CSS2.0 부터인접된두개이상의박스들의인접마진이통합되어단일마진을형성 수평마진은절대로통합되지않음 수직마진의통합 두개이상의인접수직마진들은통합 (Table의 collapsing) 유동된 (floated) 박스와다른박스의수직마진은통합되지않음 위치값 (position) 이 absolute와 relative 로위치된박스의마진들은통합되지않음 91

92 박스모델 (BOX MODEL) [ 예제파일 : 234_ 박스모델 _ 패딩.html 패딩 (padding) 속성 : box 의패딩영역 (padding area) 너비를지정 관련속성 : padding-top, padding-right, padding-bottom, padding-left padding( 단축형속성 ) 사용법 : { pading-top : 길이값 (length value : 20px( 양수 )) } padding( 단축형속성 ) 사용법 : 시계방향으로설정 ( 맨위 오른쪽 바닥 왼쪽 ) 값이 1 개 : 모든면에적용 값이 2 개 : 1 번째 {top, bottom},2 번째 (right,left) 값이 3 개 : 1 번째 {top},2 번째 {right.left},3 번째 {bottom} 값이 4 개 : 1 번째 {top},2 번째 {right}. 3 번째 {left},4 번째 {bottom} 4.left 1. top 2. right 3. bottom 92

93 포지셔닝 (Positioning, 내용의위치 ) 포지셔닝 (Positioning) 시각적인측면의 HTML에있어서가장중요한요소 HTML문서안의부분문서의위치를지정하거나객체 (Object) 의보임과안보임 (visibiltiy) 을다룸. 정적인 HTML을 Javascript를이용하여동적인 (Dynamic) 하게만들기위한가장기본적인속성 포지셔닝관련속성 (Positioning Property) 종류 width, height : Box의 width와 height를지정 position : static, relative,absolute등의위치를지정 top, right,bottom,left : 데이터를포함하는 container box속에서객체와 box border 사이의간격을지정 overflow : 내용물이 box를넘쳤을때처리하는방법을지정 float : 이미지나 container box와문장과의상대적인위치를지정 clear : float로지정된문장의흐름을원상태로만드는속성 clip : box의일부분을가려서보이지않게하는속성 visibility : 객체 (Object) 를보이거나보이지않게지정하는속성 z-index : z좌표를사용하여레이어를만드는속성 93

94 포지셔닝 (Positioning, 내용의위치 )-width,height [ 예제파일 : 0241 포지셔닝 _widthheight.html width, height 속성 (property) 컨테이너박스 (Container Box) 의가록폭, 세로폭을지정하는속성 사용법 {width : 길이값 (length: px,cm,em 등 ) 백분율 (%) auto} 속성값 : length( 길이값 ) : px,pt,cm,mm,in 등의길이단위 백분율 (%) : Block 자신이담겨있는상위 Block 의 width,height 에대한백분율단위상위 Block 의크기가바뀌켠자신의크기도자동으로변경 auto (width 의경우 ) : 100%, 자신의상위 Block 이허용하는 width 를꽉채우게됨 auto (height 의경우 ) : 0%, 이경우 height 를결정하는요인은 block box 속의내용물의크기 ( 예 : text 가줄바꿈을하면서내용이많아지면자동으로 height 가내용에맞게늘어나거나줄어둠 ) 94

95 포지셔닝 (Positioning, 내용의위치 )-position [ 예제파일 : 0241 포지셔닝 _position.html position ( 위치 ) 속성 동적인웹페이지를구성하기위한가장핵심적인속성중하나. 문서에서의위치를결정 : 정적위치 (static), 절대위치 (absolute), 상대위치 (relative) 사용법 : { position:static relative absolute fixed} 속성값 static: 기본 (default) 값으로 HTML 문서의문단에서처럼일반적인내용물의흐름상단 (top) 과좌측 (left) 에서의거리를지정할수없음. relative : HTML 문서에서의일반적인내용물의흐름을말하지만 top, left 거리를지정함. absolute : 자신의상위 box 속에서의 top,left,right,bottom 등의절대적인위치변하지않는위치를지정 fixed : 스크롤 (scroll) 이일어나도항상화면상의지정된위치에있음 ( 단 IE 에서작동하지않음 ) 포지션닝 (positioning) 을할수있는조건 top 과 left 를지정할수있는 {position:relative},{position:absolute} 의두가지경우 어떤 Object(DIV, SPAN,P) 에 top 과 left 를지정할수있는경우 최상위 element 인 BODY 의바로한단계하위 element 인경우 (offset:0,0) body가한단계상위가아닐경우자신의한단계상위 element에포지셔닝이되어있는경우 (offset: 상위객체의 0,0) 95

96 포지셔닝 (Positioning, 내용의위치 )-top,left,bottom,right 속성 중소기업직업훈련컨소시엄 top,left,bottom,right 속성 자신이담겨있는 box 속에서의 top,left,bottom,right 에서의거리를지정하는속성 사용법 : {top : 길이값 (length:px,cm) 백분율 (%) auto} 96

97 포지셔닝 (Positioning, 내용의위치 )-overflow 속성 [ 예제파일 : 0241 포지셔닝 _overflow.html overflow 속성 <DIV>element 와같은 box container 속에서내용물이가로 (x 방향 ), 세로 (Y 방향 ) 으로넘쳤을때어떻게처리하느냐를다루는속성 사용법 : {overflow : visible( 기본값 ) hidden scroll auto} 속성값 : visible : box 속의내용물을모두보여줌. 내용물의크기에따라 box 의가로, 세로폭이늘어남 hidden : box 의 width,height 를지정했을경우, 지정된범위를넘치는내용물은보이지않음. auto : box 의 width,height 를지정했을경우, 내용물이 box 의크기를넘치는순간 scroll bar 가생겨서범위를넘는내용물을 scroll 하여보여줌 scroll : box 의 width,height 를지정했을경우, 내용물이 box 를넘치지않든 scroll bar 의면적을차지하며, 내용물이넘치는순간 scroll bar 가생김 97

98 포지셔닝 (Positioning, 내용의위치 )-float, clear 속성 [ 예제파일 : 0241 포지셔닝 _float.html float 속성 Block Box 나이미지를좌측 (left) 나우측 (right) 에위치시키고 block box 나이미지주변으로 text 를배열하는속성 ( IE 와다른브라우저가조금씩틀림 : float, style-float(ie) 사용법 : {float : left right none} 속성값 : left : 그림이나 box 가왼쪽에배치되고, 글씨는 box 의오른쪽으로흐름 <IMG align=left> right : 그림이나 box 가오른쪽에배치, 글씨는 box 의왼쪽으로흐름 <img align=right> none : 그림이나 box 가왼쪽으로배치되고, 글씨는첫줄만 box 의오른쪽으로흐름. clear 속성 : float 속성과관련 float 속성으로위치한이미지나 box 주위의 text 들이이미지나 box 주변으로흐르게하거나, 흐름을멈추고이미지나 box 아래로내려와서줄을바꿀것인지지정하는속성 사용법 : {clear : none left right both} 속성값 : none : 이미지나 box 아래로줄을바꾸지않고주변으로흐름. left : text 가이미지나 box 오른쪽으로흐르지않고이미지나 box 아래로줄바꿈 right : text 가이미지나 box 왼쪽으로흐르지않고이미지나 box 아래로줄바꿈 both : text 가이미지나 box 사이로흐르지않고이미지나 box 아래로줄바꿈 98

99 포지셔닝 (Positioning, 내용의위치 )-clip 속성 [ 예제파일 : 0241 포지셔닝 _clip.html clip 속성 4각형 block box를지정하는수치만큼가려서안보이도록해주는속성 clip되는 box는반드시 {position:absolute} 로지정되어있어야함. 사용법 : {float : auto 잘리는형태 (rect)} 속성값 : auto : 초기값, 잘려서가려지는부분이없이모두보여줌. 잘리는형태 (rect : top right bottom left) top : 지정한길이만큼위에서아래로가려서가려줌. right : 지정한길이만큼왼쪽에서오른쪽으로보여줌. bottom : 지정한길이만큼위에서아래로보여줌. left : 지정한길이만큼왼쪽에서오른쪽으로가려줌. clip:rect(auto) clip:rect(auto 15px auto auto) clip:rect(auto auto auto 15px) clip:rect(15px auto auto auto) clip:rect(auto auto 15px auto) 99

100 포지셔닝 (Positioning, 내용의위치 )-visibility, z-index 속성 visibiltity 속성 객체 (Object) 를보이게 (visible) 하거나안보이게 (hidden) 하는속성 {display:none} 과비슷한효과 {display : none} 브라우저창의면적을차지하지않음. {visibility : hidden} 브라우저창의면적을객체 (Object) 의면적만큼차지하면서보이지않음 사용법 : {visibility : visible hidden collapse } 속성값 z-index 속성 visible : 객체를브라우저창에보이게함 hidden : 객체를브라우저창에보이지않게하고, 면적을차지 collapse : table 의 border-collapse 와같은효과 (*CSS2.0 에명시는되어있으나작동안함 ) 레이어기능 ( 입체 ) x-index, y-index, z-index box(inline, block) 위에 box 를얹는기능 사용법 : {z-index : 정수값 ( 양수, 음수가능 ) } 기본값 : auto z-index=2 z-index=3z-index=1 100

101 가상클래스 (Pseudo class, Pseudo element) Psudeo class : HTML element 나 attribute 에없는속성을만들어주는역할을하는 CSS 속성 가상클래스 (Pseudo class) 관련속성!important : 중요도를선언, 문서에지정된모든 CSS 속성들을우선하는지정. :first-letter : 문장에서첫글자에대한지정 :first-line : 문장에서첫줄에대한지정 :link, :visited,:hover, :active : Link 걸린글자 (HyperText) Rule : Web Font 사용시 Web font 를 emboded 시키는 CSS Rule : 문자세트를지정하는 CSS : 확장자가.css 인외부 stylesheet file 을 HTML file 에연결시켜서사용할수있게하는 rule 이외의맞은관련속성이있으나대부분현재지원을하지않음. 101

102 가상클래스 (!important ) [ 예제파일 : 0242 가상클래스 _important.html!important : 중요도 (!important Declaration) 를선언, 문서에지정된모든 CSS속성값보다우선시됨. inline style, id selector, class selector또한!important로선언한속성값으로적용 자주적용되는부분 : 인쇄시 사용법 : 속성값뒤에공백뒤사용, 또는붙여사용 102

103 가상클래스 ( : first-letter, :first-line) [ 예제파일 : 0242 가상클래스 _firstletter.html : first-letter HTML element 가지원하지못하는기능을지원하는 class 문장의첫글자의속성을지정 : first-line 문장의첫줄 (line) 의속성을지정 103

104 가상클래스 ( 링크관련 ) [ 예제파일 : 0242 가상클래스 _ 링크관련.html Link 관련가상 rule <body> 태그의 link( 링크걸린글자색 ), vlink( 방문했던링크의글자색 ), alink( 링크를클릭했을때의글자색 ) 단순히글자의색만다루는것이아니라글자의여러가지속성을줄수있음. 속성값 :link ( 방문하지않은링크에대한속성지정 ) :visited ( 방문했던링크에대한속성지정 ) :hover ( 마우스를올렸을때나오는글자에대한속성지정 ) :active ( 링크를클릭했을때글자에대한속성지정 ) /*<a href= 링크주소 > 링크할곳 </a> */ A:link{color:royalblue;} A:visited{color:gray;} A:hover{color:orange;text-decoration:underline;} A:active{color:tomato;} /*<a href= 링크주소 class= new > 링크할곳 </a> */ A.new:link{color:red; font-weight:bold;} A.new:visited{color:red; font-weight:bold;} A.new:hover{color:orange;text-decoration:underline; font-weight:bold;} A.new:active{color:tomato; font-weight:bold;} 104

105 가상클래스 rule Web 에서사용하는 Open Type font 를지정하는규칙 HTML 문서에 font, font-family 로작성한폰트가실제문서를보는사용자환경 (User Agent) 를이용하여서로다른사용자환경에서도같은글꼴로볼수있게만들어줌. 파일확장자.eot(Embeding Open type) 사용법 { font-family: 폰트명 ; src:url( 경로 / 폰트파일이름.eot} 웹서버를경유하지않고는작동하지않음. <STYLE { font-family: 나눔고딕 ; font-style: normal; font-weight: normal; src: url(nanumgothic.eot); } </STYLE> 사용방법 : <P style="font-family: 나눔고딕 ;">@font-face Rule</P> Microsoft Weft 프로그램다운로드 : 105

106 rule : 문서에서사용되는문자세트 (character set) 을지정. <STYLE TYPE="text/css >@charset euc-kr rule : 확장자가.css 인외부 stylesheet file 을 HTML file 에연결시켜서사용할수있게하는 rule link element 의 href attribute 를사용하여스타일시트를연결하는것과같음. <STYLE TYPE="text/css url( 외부 style sheet 의 URL 외부 Style sheet 의 URL ; </STYLE> <link rel= stylesheet type= text/css href= 외부 stylesheet 의 URL /> 사용시주의사항 style block 이나외부 stylesheet file Rule 을선언해야함. 선언된줄끝에세미콜론 ( ; ) 을반드시찍어야함. 106

107 인쇄 (Printing) 관련속성 page-break-after : 지정하는앞부분에서 page 바꿈 페이지넘김을지정한 block-level element 와다음 block-level element 사이를경계로페이지넘김 page-break-before : 지정하는뒷부분에서 page 바꿈 페이지넘김을지정한 block-level element 와이전 block-level element 사이를경계로페이지넘김 사용법 : { page-break-before : auto always avoid left right } 속성값 : auto : 기본값, 사용자의프린터에지정된기본값으로출력 always : page-break 를지정한객체 (Object) 이전 (page-break-before) 또는이후 (pagebreak-after) 에서항상페이지를넘김 avoid : 페이지를넘김을하지못하게함. left, right : 서로마주보는페이지가되도록제본하기위해서한두페이지를넘김.(*always 처럼동작 ) 107

108 필터 (Filter) 관련속성 [ 예제파일 : 0244 필터관련.html Filter 속성 별도의이미지처리없이 CSS Scripting 만으로훌륭한그래픽 (Graphic) 효과를낼수있는속성들 CSS2.0 에서는없어진기능 (IE 만적용됨 ) 108

109 CSS 를이용한 DHTML CSS 를이용한동적인 (Dynamic) HTML HTML 문서 : 화면에표시하기위한정적인문서 DHTML : Dynamic HTML 마우스, 키보드나기타다른요소에의해일어나는어떤상황 (Event) 를 javascript 로표현 이벤트 (Event) 의종류 : Mouse Event, Windows Event, Keyboard Event, Form Element Event 등 109

110 CSS 를이용한 DHTML DHTML 을하기위한사전지식 DOM (Document Object Model) : HTML element 들을객체 (Object) 화해서동적인효과를낼수있는방법을제시하기위해제안됨. 기존의웹페이지작성자들이보다쉬운방법으로 DHTML 이나 Javascript 로접근하게해줌. DOM 의 Object : HTML element 를사용한태그 this : 객체 (HTML Tag) 자신을말함. name : 객체의이름 HTML element 의속성 (attribute) 중하나 Form, iframe, frame, IMG, MAP element 가가지고있는속성으로 Scripting(Javascript) 에서호출될이름. id : name 속성이없는 HTML 에서 scripting 할때호출될이름 classname : 사용자가 CSS 를지정할때붙여준 class Name ( N 은반드시대문자 ) CSS Scripting 을이용한 DHTML Object.style.styleProperty = stylevalue 태그이름 CSS Scripting 을말하는식별자 (Identifier) 110

전체적인데이터량이증가 복잡해진구조 전송시간과페이지렌터링시간길어짐 유지보수의어려움.

111 CSS 레이아웃 (Layout) 테이블 (Table) 레이아웃 격자 (Grid) 모양의표 (Table) 각 Cell 의종속성 기존 HTML 의경우레이아웃을모두 TABLE 로작성한후 Cell 에데이터를넣는방식 전체적인데이터량이증가 복잡해진구조 전송시간과페이지렌터링시간길어짐 유지보수의어려움. CSS 레이아웃 그리드 (Grid) 가아닌구성요소의집합 (Set) 각구성요소의집합에보다쉽게접근 디자인변경이용이 Ajax Programming 용이 111

112 CSS 레이아웃 (Layout) 레이아웃에사용되는두가지속성 position : 위치를지정하여원하는위치에엘리먼트를배치 static : 기본값 relative : static 과같지만 offset(top= 0, left= 0 ) 지정. 하위 element 의 offset 의기준점이됨. absolute : 화면상에서다른컨텐츠에영향을미치지않고위치지정가능. float : 지정된위치에서의 left, right 배치 left : 엘리먼트를좌측으로배치 right : 엘리먼트를우측으로배치 none : float시키지않음 112

113 position 을이용한기본레이아웃 (Layout) 01: 마크업 (Mark up) 작성 마크업 (Markup) 작성 : 디자인이나 CSS 를고려하지않고제작. 실제마크업 (markup) 은 div, id 로만구성. 113

114 position 을이용한 CSS 기본레이아웃 (Layout) 02: 스타일 (CSS) 작성 CSS 로디자인적용 114

115 position 을이용한 CSS 기본레이아웃 (Layout) 02: 스타일 (CSS) 작성 CSS 로디자인적용 : Main Content Area 분리 115

116 position 을이용한 CSS 기본레이아웃 (Layout) 02: 스타일 (CSS) 작성 CSS 로디자인적용 : Main Content Area 분리 116

117 position 을이용한 CSS 기본레이아웃 (Layout) 02: 스타일 (CSS) 작성 CSS 로디자인적용 : Main Content Area 분리 ( * IE-hack) 117

118 CSS Hack CSS Hack 표준은아니고브라우져 (Browser) 들간의 CSS 해석오류나차이를이용, 특정브라우져만을위한 CSS 를만드는방법 일차적으로표준을준수하여 CSS 작성 브라우져별로테스트해보고 CSS 를해석 (Render) 하는차이를각브라우져별로 hack 을사용하여없앰 Microsoft Internet Explorer 용 CSS hack (IE-hack) 사용법 : * html Element div.ie-hack { width: 100px; padding: 20px; } * html div.ie-hack { width: 140px; /* IE width */ } 118

119 position 의 offset( 기준점 ) 게시판목록형태 - 연습과제 502_position 의 offset 설정.html position:absolute 의기준점 (offset) : top,right,bottom,left 의속성으로 offset 지정 absolute position 블록의상위에아무것도없을때 : offset 이브라우져좌상단 absolute position 블록의상위에 relative position 블록이있을때 : offset 은상위 relative position 블록의좌상단 119

120 position 의 offset( 기준점 ) 게시판목록형태 - 연습과제 502_position 의 offset 설정.html 120

121 float 을이용한레이아웃 3 단컬럼형레이아웃 - 연습과제 Markup 작성 121

122 float 을이용한레이아웃 3 단컬럼형레이아웃 - 연습과제 503_float 을이용한컬럼형레이아웃 _01.html CSS 작성 : float 속성을이용하여레이아웃작성할때 단지폭을정해주고좌측, 우측정렬을해주면하나의블록이하나의컬럼을형성 컬럼전체의폭을고정하기위해서바깥쪽을감싸는블럭 block-level element 들이연속적으로있어 float 시켜주면한줄 (line) 에순차적으로배치 float 이끝난위치바로다음에오는엘리먼트에서는 clear 시켜주어전체모양이일그러지지않게함 122

123 float 와 clear 503_float 을이용한컬럼형레이아웃 _02.html float 속성 : 하위블록에영향을끼치므로 clear 속성과같이사용해야함. clear 속성없을때 h2 { clear : both } p { clear : both } 123

124 float 의숨겨진기능 MS Internet Explorer 중소기업직업훈련컨소시엄 503_float 을이용했을때 overflow_01.html float 된 <UL> FireFox [ 실제웹사이트개발시많이접하는문제 ] float 된 <UL> 의상위블록인 #articles 에 Background 속성으로색을지정해주면바탕색이나타나지않는문제 (* MS IE 제외 ) 해결책 { overflow:auto; } 124

순서가없는리스트 ol (ordered list) : 순서가있는리스트 dl

definition(<dd>) 쌓으로이루어진리스트 List element

125 목록 (List) 504_List 를사용한왼쪽여백조정 _01.html 3 가지목록 (List) : ul (unordered list) : 순서가없는리스트 ol (ordered list) : 순서가있는리스트 dl (definition list) : term (<dt>), definition(<dd>) 쌓으로이루어진리스트 List element 의왼쪽마진특성 : 왼쪽여백의조정이각브라우저마다다르게구현되어있음. Firefox, Safari : margin 이용. Internet Explorer, Opera : padding 이용 background 속성을이용한 bullet 의표시 MS Internet Expleror Opera Firefox Netscape 125

126 박스모델 (Box Model) 중앙정렬 (align=center) - 연습과제 웹사이트가화면의중앙에정렬되어야하는레이아웃 기존 HTML : <table align= center >, <center> CSS 에서의사용법 : margin 속성이용 { margin : 0 auto } [MS Internet Explorer 5.0 위한 CSS Tuning] body 에서상속된정렬을원상태로복귀시킴 126

127 박스모델 (Box Model) 화면정중앙정렬 (align=center valign=middle) 웹사이트가화면의중앙에정렬되어야하는레이아웃 기존 HTML 사용법 : inline 엘리먼트의경우 : valign 속성이용 <img valign= absmiddle > 그외의경우 : <table width= 100% height= 100% ><tr><td valign= middle align= center > CSS 에서의사용법 : inline 엘리먼트일경우 : vertical-속성이용 { margin : 0 auto } 그외의경우 (inline + block 또는 block) : position속성과 margin음수값 (negative) 127

128 박스모델 (Box Model) 화면정중앙정렬 (position 과 negative margin) - 연습과제 웹사이트가화면의중앙에정렬되어야하는레이아웃 position 속성과 margin( 음수값 ) 사용법 화면중앙에위치 : position:absolute offset 을 50% : 엘리먼트의좌상단이화면의정중앙에오게됨 블록의크기의절반만큼 margin 으로적용 : 엘리먼트의 width,height 의반만큼씩좌상단이동 단점 : 음수값사용으로브라우저크기가엘리먼트크기보다작아질경우화면밖으로위치해버리게되어엘리먼트일부분이보이지않게됨 128

박스모델 (Box Model) 100% 높이를유지하는레이아웃 height, min-height 의사용 : <html><body> 엘리먼트하위에 100% 높이를유지하는 <div> 엘리먼트사용 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN "http://www.w3.

129 박스모델 (Box Model) 100% 높이를유지하는레이아웃 height, min-height 의사용 : <html><body> 엘리먼트하위에 100% 높이를유지하는 <div> 엘리먼트사용 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " <html xmlns=" <head><title>full height layout</title> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } #head {height: 100px; background: #ddd; position: relative; } #body { min-height: 100%; margin: -100px 0-50px; } #content-area { padding: 100px 0 50px; height: 300px; } #foot { height: 50px; background: #ddd;} </style>  </head> <body> <div id="head">head(height 100pixel)</div> <div id="body ><div id="content-area">content area</div></div> <div id="foot">foot(height 50pixel)</div> </body></html> 129

130 박스모델 (Box Model) 테이블 테이블의 CSS 적용 cellpadding= 0 제어방법 : <th><td> 엘리먼트의 padding 으로제어 cellspacing= 0 제어방법 : border-collapse <table cellpadding="0" cellspacing="0" border="0"> <tr><td>example</td></tr> </table> table { border-collapse; collapse; } table th, table td { padding:0; } table-layout : fixed 로 width 계산과정을줄여줌. 130

131 CSS 적용의체크포인트 CSS 를이용해서페이지에디자인을적용하기전에반드시지켜야하는사항 (X)HTML 이표준문법이어야함. 실제디자인을입히기전에먼저작성한 Markup 과 CSS 의문법을조사한다. W3C 의 Markup Validation Service ( (X)HTML 문서가의미와구조적으로구성되어야함. 예 ) 문서전체의내용을표시할때는 <title> 을사용 CSS 가표준문법이여야함. 예 ) 주석문의사용 : /* commnet */ 만사용 CSS 를표준대로잘구현한브라우저를이용해야함. 개발시 : 표준을잘준수하는브라우저를이용개발후 : 가장많이사용하는브라우저에대한튜닝을진행 131

132 CSS 를효과적으로사용하는방법 계획수립 웹사이트를위한 CSS 스타일관리계획. 기존 CSS 와의충돌위험요소예방 CSS 스타일의조직화 CSS 파일을여러섹션 (section) 으로분리하여관리. 문서의재정의에편리함 Cascade 와 Inherit 의적절한이용 CSS 의특성중하나인계층화 (cascading) 를이용한스타일의상속을최대한활용, 중복사용방지 클래스의남용금지 한개의 HTML tag attribute 에여러개의클래스를선언할수있음. 표준코드사용 각웹브라우저 (Web Browser) 에따라적용이되지않은속성 (property) 이있음. Microsoft IE 의경우가장표준을지키지않음. 132

133 Internet Explorer 대처법 지구촌 IE 버전별점유율현황 IE8 IE7 IE6 IE5 etc 1.17% 47.32% 18.85% 0.08% 32.58% 국내 IE 버전별점유율현황 (2009 년 2 월 Internet Trend 보고서기준 ) IE8 IE7 IE6 IE5 etc 0.34% 38.86% 59.26% 0.34% 1.41% 0.1% 의브라우저지원은현실적인대안점은? 0.1% 의장애인은? 따라서, IE6,7,8 모두대응할필요가있다

134 Internet Explorer 대처법 브라우저측 <meta http-equiv="x-ua-compatible content="ie=7 /> <meta http-equiv="x-ua-compatible content="ie=emulateie7 /> IIS Meta Switch <?xml version="1.0" encoding="utf-8"?> <configuration> <system.webserver> <httpprotocol> <customheaders> <clear /> <add name="x-ua-compatible" value="ie=emulateie7" /> </customheaders> </httpprotocol> </system.webserver> </configuration> Apache Meta Switch X-UA-Compatible:IE=EmulateIE

135 Internet Explorer 대처법 UI 개발자의경우 CSS 를별도관리한다. default.css ie7.css ie6.css ie5.css 주석문으로 CSS 별도처리 <link rel="stylesheet" type="text/css" href="default.css" />

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width