1. jsp / servlet 정보공유 http://okjsp.pe.kr 1 CSS 를 이용한 효율적인 웹 개발 http://okjsp.pe.kr 허광남 2006-03-11

2. jsp / servlet 정보공유 http://okjsp.pe.kr 2 Agenda 1. CSS 개요 2. CSS 기본 활용 3. 웹접근성 4. 웹 개발 도구

3. jsp / servlet 정보공유 http://okjsp.pe.kr 3 1. CSS 개요 1.1 웹표준 1.2 CSS 디자인 원칙 1.3 테이블 중첩의 폐해 1.4 Contents 와 Style 의 분리 1.5 CSS 효과 1.6 기획자, 디자이너, 개발자

4. jsp / servlet 정보공유 http://okjsp.pe.kr 4 1.1 웹표준 w3.org

5. jsp / servlet 정보공유 http://okjsp.pe.kr 5 1.1b 웹표준 CSS Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents

6. jsp / servlet 정보공유 http://okjsp.pe.kr 6 1.2 CSS 디자인 원칙 Forward and backward compatibility. Complementary to structured documents. Vendor, platform, and device independence. Maintainability. Simplicity. Network performance. Flexibility. Richness. Alternative language bindings. Accessibility. From: http://www.w3.org/TR/CSS21/intro.html#q6http://www.w3.org/TR/CSS21/intro.html#q6

7. jsp / servlet 정보공유 http://okjsp.pe.kr 7 1.3 테이블 중첩의 폐해 디자인을 위한 테이블 레이아웃 테이블 안의 테이블, 그 안의 테이블 – 깊어가는 들여쓰기 테이블은 디자인을 위한 장치가 아님 디자인 수정은 도구없이는 불가

8. jsp / servlet 정보공유 http://okjsp.pe.kr 8 1.4 Contents 와 Style 의 분리 HTML 는 컨텐츠 간의 연결을 위해 시작 웹의 구성요소 –Contents : Document –Style : CSS –Behavior : JavaScript

9. jsp / servlet 정보공유 http://okjsp.pe.kr 9 1.5 CSS 효과 Style 그룹화 반복되는 속성 코드 제거 파일 크기 감소 ; 트래픽 절감 효과 사이트 디자인의 빠른 변환 서버사이드 스크립트의 단순화 – 복잡한 조건 코드 제거

10. jsp / servlet 정보공유 http://okjsp.pe.kr 10 1.6 기획자, 디자이너, 개발자 누가 CSS 를 담당할 것인가 ? 디자인 영역인가 ? 기획자가 이것까지 신경을 써야 되는가 ? 개발하기도 바쁜데

11. jsp / servlet 정보공유 http://okjsp.pe.kr 11 2. CSS 기본 활용 2.1 http://www.w3.org/TR/CSS21/ 2.2 책장사 : 실용예제로 배우는 웹표준 ( 에이콘 )

12. jsp / servlet 정보공유 http://okjsp.pe.kr 12 Selector Type selectors h1 { color: red } em { color: red } h1 em { color: blue } This headline is very important Class selectors.pastoral { color: green } /* all elements with class~=pastoral */ ID selectors #z98y { letter-spacing: 0.3em } h1#chapter1 { text-align: center }

13. jsp / servlet 정보공유 http://okjsp.pe.kr 13 Box Models

14. jsp / servlet 정보공유 http://okjsp.pe.kr 14 Box Models

15. jsp / servlet 정보공유 http://okjsp.pe.kr 15 Box Models Margin properties: 'margin-top''margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin''margin-right''margin-bottom''margin-left' 'margin' Padding properties: 'padding-top''padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding''padding-right''padding-bottom''padding-left''padding' Border width: 'border-top-width''border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', and 'border-width''border-right-width''border-bottom-width' 'border-left-width''border-width' 1 2 3 4

16. jsp / servlet 정보공유 http://okjsp.pe.kr 16 Visual formatting model Some text More text

17. jsp / servlet 정보공유 http://okjsp.pe.kr 17 Positioning position display float

18. jsp / servlet 정보공유 http://okjsp.pe.kr 18 position staticThe element is placed in a normal position (according to the normal flow). With the value of "static" we do not use the "left" and "top" properties relativeMoves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position absoluteWith a value of "absolute" the element can be placed anywhere on a page. The element's position is specified with the "left", "top", "right", and "bottom" properties fixed

19. jsp / servlet 정보공유 http://okjsp.pe.kr 19 display ValueDescription noneThe element will not be displayed blockThe element will be displayed as a block-level element, with a line break before and after the element inlineThe element will be displayed as an inline element, with no line break before or after the element list-itemThe element will be displayed as a list run-inThe element will be displayed as block-level or inline element depending on context compactThe element will be displayed as block-level or inline element depending on context marker tableThe element will be displayed as a block table (like ), with a line break before and after the table inline-tableThe element will be displayed as an inline table (like ), with no line break before or after the table ……

20. jsp / servlet 정보공유 http://okjsp.pe.kr 20 float ValueDescription leftThe image or text moves to the left in the parent element rightThe image or text moves to the right in the parent element noneThe image or the text will be displayed just where it occurs in the text

21. jsp / servlet 정보공유 http://okjsp.pe.kr 21 background http://www.w3schools.com/css/css_background.asp PropertyDescriptionValuesIEFNW3C backgroundA shorthand property for setting all background properties in one declaration background-color background-image background-repeat background- attachment background-position 4161 background- attachment Sets whether a background image is fixed or scrolls with the rest of the page scroll fixed 4161 background-colorSets the background color of an element color-rgb color-hex color-name transparent 4141 background-imageSets an image as the backgroundurl none 4141 background-positionSets the starting position of a background image top left … x-% y-% x-pos y-pos 4161 background-repeatSets if/how a background image will be repeated repeat repeat-x repeat-y no-repeat 4141

22. jsp / servlet 정보공유 http://okjsp.pe.kr 22 효율적인 웹개발을 위한 방법 적절한 역할 분리 자바스크립트 /css 작업 java/jsp 개발방법

23. jsp / servlet 정보공유 http://okjsp.pe.kr 23 적절한 역할 분리 비즈니스 프리젠테이션 로직 컨텐츠 스타일

24. jsp / servlet 정보공유 http://okjsp.pe.kr 24 자바스크립트 /css 작업 html 로 작업 후 jsp 파일에 적용

25. jsp / servlet 정보공유 http://okjsp.pe.kr 25 java/jsp 개발방법 java 는 local 테스트 지향 jsp 내의 if else 구문 최소화

26. jsp / servlet 정보공유 http://okjsp.pe.kr 26 네트워크 트래픽 절감을 위한 방법 반복되는 부분 공략 들여쓰기 최소화 태그속성 → css 목록 데이터 → javascript 배열

27. jsp / servlet 정보공유 http://okjsp.pe.kr 27 3. 웹접근성 3.1 누구를 위한 웹인가 ? http://forums.mozilla.or.kr/viewtopic.php?t=3960

28. jsp / servlet 정보공유 http://okjsp.pe.kr 28 4. 웹 개발 도구 4.1 브라우저 플러그인 http://www.infoaxia.com/tools/wat/index.html

29. jsp / servlet 정보공유 http://okjsp.pe.kr 29 참고자료 HTML CSS Javascript DHTML XML 해설 및 예제 –http://trio.co.kr/http://trio.co.kr/ html, dhtml, xhtml, xml, css 등등 w3schools –http://www.w3schools.com/http://www.w3schools.com/ CSS Reference –http://www.okjsp.pe.kr/bbs?seq=13973http://www.okjsp.pe.kr/bbs?seq=13973 HTML/CSS/JavaScript 기초 다지기 –http://www.okjsp.pe.kr/bbs?seq=38695http://www.okjsp.pe.kr/bbs?seq=38695 CSS Garden –http://www.csszengarden.comhttp://www.csszengarden.com CSS Design Korea –http://css.macple.com/http://css.macple.com/ 웹 표준 및 보안에 관한 문서 –http://www.okjsp.pe.kr/bbs?seq=67144http://www.okjsp.pe.kr/bbs?seq=67144