Post on 30-Dec-2015
description
jsp / servlet 정보공유 http://okjsp.pe.kr 1
CSS 를 이용한 효율적인 웹 개발
http://okjsp.pe.kr허광남
2006-03-11
jsp / servlet 정보공유 http://okjsp.pe.kr 2
Agenda
• 1. CSS 개요• 2. CSS 기본 활용• 3. 웹접근성• 4. 웹 개발 도구
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 기획자 , 디자이너 , 개발자
jsp / servlet 정보공유 http://okjsp.pe.kr 4
1.1 웹표준
• w3.org
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
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#q6
jsp / servlet 정보공유 http://okjsp.pe.kr 7
1.3 테이블 중첩의 폐해
• 디자인을 위한 테이블 레이아웃• 테이블 안의 테이블 , 그 안의 테이블
– 깊어가는 들여쓰기
• 테이블은 디자인을 위한 장치가 아님• 디자인 수정은 도구없이는 불가
jsp / servlet 정보공유 http://okjsp.pe.kr 8
1.4 Contents 와 Style 의 분리
• HTML 는 컨텐츠 간의 연결을 위해 시작• 웹의 구성요소
– Contents : Document– Style : CSS– Behavior : JavaScript
jsp / servlet 정보공유 http://okjsp.pe.kr 9
1.5 CSS 효과
• Style 그룹화• 반복되는 속성 코드 제거• 파일 크기 감소 ; 트래픽 절감 효과• 사이트 디자인의 빠른 변환• 서버사이드 스크립트의 단순화
– 복잡한 조건 코드 제거
jsp / servlet 정보공유 http://okjsp.pe.kr 10
1.6 기획자 , 디자이너 , 개발자
• 누가 CSS 를 담당할 것인가 ?• 디자인 영역인가 ?• 기획자가 이것까지 신경을 써야 되는가 ?• 개발하기도 바쁜데
jsp / servlet 정보공유 http://okjsp.pe.kr 11
2. CSS 기본 활용
• 2.1 http://www.w3.org/TR/CSS21/• 2.2 책장사 : 실용예제로 배우는 웹표준 ( 에이콘 )
jsp / servlet 정보공유 http://okjsp.pe.kr 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 }
jsp / servlet 정보공유 http://okjsp.pe.kr 13
Box Models
jsp / servlet 정보공유 http://okjsp.pe.kr 14
Box Models
jsp / servlet 정보공유 http://okjsp.pe.kr 15
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'
1
2
3
4
jsp / servlet 정보공유 http://okjsp.pe.kr 16
Visual formatting model
<DIV> Some text <P>More text </DIV>
jsp / servlet 정보공유 http://okjsp.pe.kr 17
Positioning
• position • display• float
jsp / servlet 정보공유 http://okjsp.pe.kr 18
position
static The 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
relative Moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
absolute With 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
jsp / servlet 정보공유 http://okjsp.pe.kr 19
display
Value Description
none The element will not be displayed
block The element will be displayed as a block-level element, with a line break before and after the element
inline The element will be displayed as an inline element, with no line break before or after the element
list-item The element will be displayed as a list
run-in The element will be displayed as block-level or inline element depending on context
compact The element will be displayed as block-level or inline element depending on context
marker
table The element will be displayed as a block table (like <table>), with a line break before and after the table
inline-table The element will be displayed as an inline table (like <table>), with no line break before or after the table
… …
jsp / servlet 정보공유 http://okjsp.pe.kr 20
float
Value Description
left The image or text moves to the left in the parent element
right The image or text moves to the right in the parent element
none The image or the text will be displayed just where it occurs in the text
jsp / servlet 정보공유 http://okjsp.pe.kr 21
background
• http://www.w3schools.com/css/css_background.asp
Property Description Values IE F N W3C
background A shorthand property for setting all background properties in one declaration
background-colorbackground-imagebackground-repeat background-attachment background-position
4 1 6 1
background-attachment
Sets whether a background image is fixed or scrolls with the rest of the page
scrollfixed
4 1 6 1
background-color Sets the background color of an element
color-rgbcolor-hexcolor-nametransparent
4 1 4 1
background-image Sets an image as the background urlnone
4 1 4 1
background-position Sets the starting position of a background image
top left…x-% y-%x-pos y-pos
4 1 6 1
background-repeat Sets if/how a background image will be repeated
repeatrepeat-xrepeat-yno-repeat
4 1 4 1
jsp / servlet 정보공유 http://okjsp.pe.kr 22
효율적인 웹개발을 위한 방법
• 적절한 역할 분리• 자바스크립트 /css 작업• java/jsp 개발방법
jsp / servlet 정보공유 http://okjsp.pe.kr 23
적절한 역할 분리
• 비즈니스• 프리젠테이션 로직• 컨텐츠• 스타일
jsp / servlet 정보공유 http://okjsp.pe.kr 24
자바스크립트 /css 작업
• html 로 작업 후 jsp 파일에 적용
jsp / servlet 정보공유 http://okjsp.pe.kr 25
java/jsp 개발방법
• java 는 local 테스트 지향• jsp 내의 if else 구문 최소화
jsp / servlet 정보공유 http://okjsp.pe.kr 26
네트워크 트래픽 절감을 위한 방법
• 반복되는 부분 공략• 들여쓰기 최소화• 태그속성 → css• 목록 데이터 → javascript 배열
jsp / servlet 정보공유 http://okjsp.pe.kr 27
3. 웹접근성
• 3.1 누구를 위한 웹인가 ?
http://forums.mozilla.or.kr/viewtopic.php?t=3960
jsp / servlet 정보공유 http://okjsp.pe.kr 28
4. 웹 개발 도구
• 4.1 브라우저 플러그인• http://www.infoaxia.com/tools/wat/index.html
jsp / servlet 정보공유 http://okjsp.pe.kr 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