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

jsp / servlet 정보공유 http://okjsp.pe.kr 1

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

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


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


1.3 테이블 중첩의 폐해

• 디자인을 위한 테이블 레이아웃• 테이블 안의 테이블 , 그 안의 테이블

– 깊어가는 들여쓰기

• 테이블은 디자인을 위한 장치가 아님• 디자인 수정은 도구없이는 불가


1.4 Contents 와 Style 의 분리

• HTML 는 컨텐츠 간의 연결을 위해 시작• 웹의 구성요소

– Contents : Document– Style : CSS– Behavior : JavaScript


1.5 CSS 효과

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

– 복잡한 조건 코드 제거


1.6 기획자 , 디자이너 , 개발자

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


2. CSS 기본 활용

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


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 }


Box Models


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


Visual formatting model

<DIV> Some text <P>More text </DIV>


Positioning

• position • display• float


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


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

… …


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


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


효율적인 웹개발을 위한 방법

• 적절한 역할 분리• 자바스크립트 /css 작업• java/jsp 개발방법


적절한 역할 분리

• 비즈니스• 프리젠테이션 로직• 컨텐츠• 스타일


자바스크립트 /css 작업

• html 로 작업 후 jsp 파일에 적용


java/jsp 개발방법

• java 는 local 테스트 지향• jsp 내의 if else 구문 최소화


네트워크 트래픽 절감을 위한 방법

• 반복되는 부분 공략• 들여쓰기 최소화• 태그속성 → css• 목록 데이터 → javascript 배열


3. 웹접근성

• 3.1 누구를 위한 웹인가 ?

http://forums.mozilla.or.kr/viewtopic.php?t=3960


4. 웹 개발 도구

• 4.1 브라우저 플러그인• http://www.infoaxia.com/tools/wat/index.html


참고자료

• 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

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

Documents

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