1 / 29

CSS 를 이용한 효율적인 웹 개발

CSS 를 이용한 효율적인 웹 개발. http://okjsp.pe.kr 허광남 2006-03-11. Agenda. 1. CSS 개요 2. CSS 기본 활용 3. 웹접근성 4. 웹 개발 도구. 1. CSS 개요. 1.1 웹표준 1.2 CSS 디자인 원칙 1.3 테이블 중첩의 폐해 1.4 Contents 와 Style 의 분리 1.5 CSS 효과 1.6 기획자 , 디자이너 , 개발자. 1.1 웹표준. w3.org. 1.1b 웹표준 CSS.

robert-marshall
Download Presentation

CSS 를 이용한 효율적인 웹 개발

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Agenda • 1. CSS 개요 • 2. CSS 기본 활용 • 3. 웹접근성 • 4. 웹 개발 도구

  3. 1. CSS 개요 • 1.1 웹표준 • 1.2 CSS 디자인 원칙 • 1.3 테이블 중첩의 폐해 • 1.4 Contents와 Style의 분리 • 1.5 CSS 효과 • 1.6 기획자, 디자이너, 개발자

  4. 1.1 웹표준 • w3.org

  5. 1.1b 웹표준 CSS • Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents

  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#q6

  7. 1.3 테이블 중첩의 폐해 • 디자인을 위한 테이블 레이아웃 • 테이블 안의 테이블, 그 안의 테이블 • 깊어가는 들여쓰기 • 테이블은 디자인을 위한 장치가 아님 • 디자인 수정은 도구없이는 불가

  8. 1.4 Contents와 Style의 분리 • HTML는 컨텐츠 간의 연결을 위해 시작 • 웹의 구성요소 • Contents : Document • Style : CSS • Behavior : JavaScript

  9. 1.5 CSS 효과 • Style 그룹화 • 반복되는 속성 코드 제거 • 파일 크기 감소;트래픽 절감 효과 • 사이트 디자인의 빠른 변환 • 서버사이드 스크립트의 단순화 • 복잡한 조건 코드 제거

  10. 1.6 기획자, 디자이너, 개발자 • 누가 CSS를 담당할 것인가? • 디자인 영역인가? • 기획자가 이것까지 신경을 써야 되는가? • 개발하기도 바쁜데

  11. 2. CSS 기본 활용 • 2.1 http://www.w3.org/TR/CSS21/ • 2.2 책장사: 실용예제로 배우는 웹표준 (에이콘)

  12. Selector • Type selectors <style> h1 { color: red } em { color: red } h1 em { color: blue } </style> <H1>This headline is <EM>very</EM> important</H1> • Class selectors .pastoral { color: green } /* all elements with class~=pastoral */ • ID selectors #z98y { letter-spacing: 0.3em } h1#chapter1 { text-align: center }

  13. Box Models

  14. Box Models

  15. 1 4 2 3 Box Models Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding' Border width: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', and 'border-width'

  16. Visual formatting model <DIV> Some text <P>More text </DIV>

  17. Positioning • position • display • float

  18. position

  19. display

  20. float

  21. background • http://www.w3schools.com/css/css_background.asp

  22. 효율적인 웹개발을 위한 방법 • 적절한 역할 분리 • 자바스크립트/css 작업 • java/jsp 개발방법

  23. 적절한 역할 분리 • 비즈니스 • 프리젠테이션 로직 • 컨텐츠 • 스타일

  24. 자바스크립트/css 작업 • html로 작업 후 jsp 파일에 적용

  25. java/jsp 개발방법 • java는 local 테스트 지향 • jsp 내의 if else 구문 최소화

  26. 네트워크 트래픽 절감을 위한 방법 • 반복되는 부분 공략 • 들여쓰기 최소화 • 태그속성 → css • 목록 데이터 → javascript 배열

  27. 3. 웹접근성 • 3.1 누구를 위한 웹인가? http://forums.mozilla.or.kr/viewtopic.php?t=3960

  28. 4. 웹 개발 도구 • 4.1 브라우저 플러그인 • http://www.infoaxia.com/tools/wat/index.html

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

More Related