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

CSS를 이용한 효율적인 웹 개발
http://okjsp.pe.kr
허광남
2006-03-11
jsp / servlet 정보공유 http://okjsp.pe.kr
1
Agenda
•
•
•
•
1.
2.
3.
4.
CSS 개요
CSS 기본 활용
웹접근성
웹 개발 도구
jsp / servlet 정보공유 http://okjsp.pe.kr
2
1. CSS 개요
•
•
•
•
•
•
1.1
1.2
1.3
1.4
1.5
1.6
웹표준
CSS 디자인 원칙
테이블 중첩의 폐해
Contents와 Style의 분리
CSS 효과
기획자, 디자이너, 개발자
jsp / servlet 정보공유 http://okjsp.pe.kr
3
1.1 웹표준
• w3.org
jsp / servlet 정보공유 http://okjsp.pe.kr
4
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
5
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
6
1.3 테이블 중첩의 폐해
• 디자인을 위한 테이블 레이아웃
• 테이블 안의 테이블, 그 안의 테이블
– 깊어가는 들여쓰기
• 테이블은 디자인을 위한 장치가 아님
• 디자인 수정은 도구없이는 불가
jsp / servlet 정보공유 http://okjsp.pe.kr
7
1.4 Contents와 Style의 분리
• HTML는 컨텐츠 간의 연결을 위해 시작
• 웹의 구성요소
– Contents : Document
– Style : CSS
– Behavior : JavaScript
jsp / servlet 정보공유 http://okjsp.pe.kr
8
1.5 CSS 효과
•
•
•
•
•
Style 그룹화
반복되는 속성 코드 제거
파일 크기 감소;트래픽 절감 효과
사이트 디자인의 빠른 변환
서버사이드 스크립트의 단순화
– 복잡한 조건 코드 제거
jsp / servlet 정보공유 http://okjsp.pe.kr
9
1.6 기획자, 디자이너, 개발자
•
•
•
•
누가 CSS를 담당할 것인가?
디자인 영역인가?
기획자가 이것까지 신경을 써야 되는가?
개발하기도 바쁜데
jsp / servlet 정보공유 http://okjsp.pe.kr
10
2. CSS 기본 활용
• 2.1 http://www.w3.org/TR/CSS21/
• 2.2 책장사: 실용예제로 배우는 웹표준 (에이콘)
jsp / servlet 정보공유 http://okjsp.pe.kr
11
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
12
Box Models
jsp / servlet 정보공유 http://okjsp.pe.kr
13
Box Models
jsp / servlet 정보공유 http://okjsp.pe.kr
14
Box Models
Margin properties:
'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
and 'margin'
Padding properties:
1
'padding-top', 'padding-right', 'padding-bottom', 'paddingleft', and 'padding'
Border width:
'border-top-width', 'border-right-width', 'border-bottomwidth', 'border-left-width', and 'border-width'
4
2
3
jsp / servlet 정보공유 http://okjsp.pe.kr
15
Visual formatting model
<DIV>
Some text
<P>More text
</DIV>
jsp / servlet 정보공유 http://okjsp.pe.kr
16
Positioning
• position
• display
• float
jsp / servlet 정보공유 http://okjsp.pe.kr
17
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
18
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
19
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
20
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-color
background-image
background-repeat backgroundattachment background-position
4
1
6
1
backgroundattachment
Sets whether a background image is
fixed or scrolls with the rest of the
page
scroll
fixed
4
1
6
1
background-color
Sets the background color of an
element
color-rgb
color-hex
color-name
transparent
4
1
4
1
background-image
Sets an image as the background
url
none
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
repeat
repeat-x
repeat-y
no-repeat
4
1
4
1
jsp / servlet 정보공유 http://okjsp.pe.kr
21
효율적인 웹개발을 위한 방법
• 적절한 역할 분리
• 자바스크립트/css 작업
• java/jsp 개발방법
jsp / servlet 정보공유 http://okjsp.pe.kr
22
적절한 역할 분리
•
•
•
•
비즈니스
프리젠테이션 로직
컨텐츠
스타일
jsp / servlet 정보공유 http://okjsp.pe.kr
23
자바스크립트/css 작업
• html로 작업 후 jsp 파일에 적용
jsp / servlet 정보공유 http://okjsp.pe.kr
24
java/jsp 개발방법
• java는 local 테스트 지향
• jsp 내의 if else 구문 최소화
jsp / servlet 정보공유 http://okjsp.pe.kr
25
네트워크 트래픽 절감을 위한 방법
•
•
•
•
반복되는 부분 공략
들여쓰기 최소화
태그속성 → css
목록 데이터 → javascript 배열
jsp / servlet 정보공유 http://okjsp.pe.kr
26
3. 웹접근성
• 3.1 누구를 위한 웹인가?
http://forums.mozilla.or.kr/viewtopic.php?t=3960
jsp / servlet 정보공유 http://okjsp.pe.kr
27
4. 웹 개발 도구
• 4.1 브라우저 플러그인
• http://www.infoaxia.com/tools/wat/index.html
jsp / servlet 정보공유 http://okjsp.pe.kr
28
참고자료
• 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
jsp / servlet 정보공유 http://okjsp.pe.kr
29