웹표준 (XHTML + CSS)

㈜유미테크

웹 표준 (XHTML + CSS)

㈜유미테크2 ㈜유미테크 웹 표준 (XHTML + CSS)

웹 표준이란 : 웹에서 표준적으로 사용하는 기술의 총칭 .

어떠한 브라우저 환경에서도 같은 결과가 나타나도록 함

W3C ( 월드와이드웹 컨소시엄 : www. W3.org / Consortium)

- 1994 년 10 월 설립- 400 개 이상의 기업 / 기관이 회원 가입- 국제적 웹 표준 기관

웹표준 역할 분리- 구조 (HTML, XHTML) : 요소 생성 및 기본 구조 작성

- 표현 (CSS) : 레이아웃 및 스타일 적용- 동작 (DOM, Script) : 동적인 이벤트 처리 , jQuery 와 같은 라이브러를 활용한 이벤트 핸들러

분리

1. 웹 표준이란 ?


컨텐츠와 디자인을 분리 : 수정과 관리가 용이

마크업 용량이 줄어듬

페이지 로딩속도 향상

크로스 브라우징 : 여러 웹 브라우저에서 동일한 페이지 표현

검색엔진의 최적화 ( 플래시 x, 이미지 자제 , 이미지 대체 글자 제공 )

웹 접근성 용이 : 웹표준 문서는 최대한 많은 브라우저와 장치에서 읽을 수 있다 .

2. 웹 표준의 장점


W3C Validation

- http://validator.kldp.org/

- http://validator.w3.org/

3. 웹 표준 테스트 툴


웹 접근성- 어떠한 사용자 ( 장애인 , 고령자 포함 ), 어떠한 기술 환경에서도 전문적인 능력 없이 웹

사이트에 모든 정보에 동등하게 접근 . 이용할 수 있도록 보장해 주는 것- 2008 년 4 월 11 월부터 웹접근성 의무화 준수

웹 접근성 품질마크- 웹 접근성 수준을 인정하는 품질마크를 부여하는 인증제도- 인증기관 : 한국정보화진흥원- 수수료 : 인증심사 : 2,000,000 ( 공공기관 , 비영리장애인민간 단체 : 1,000,000)

갱신 , 재심사 : 800,000 ( 공공기관 , 비영리장애인 민간단체 : 400,000)

4. 웹 접근성


5. 구조적 마크업

div id=“header”

div id=“side bar”

div id=“content”

div id=“footer”

div class=“main”

div class=“banner”

div class=“main_con”

.

.

.

.

.

.

.

.

.


table 의 태그의 오남용- table 태그는 표에만 사용 , 레이아웃 작업 시 빈번한 사용 자제

font, b, I

- 글자에 대한 각종 효과는 css 로 처리

link 에 대한 자바스크립트로의 처리- <a href=“javascript:func1()”> <a href=“b.html” onclick=”” />

폼 전송 기능은 자바스크립트로 전송- 전송기능은 반드시 type=“submit” 또는 type=“image” 이용

6. 마크업 주의점


7. css 사용법

외부 스타일 시트 – link 방법 (External Style Sheet)<head>

<link rel=“stylesheet” type=“test/css” href=“sytle.css” />

</head>

내부 스타일 시트 – head 에 정의하는 방법 (Internal Style Sheet)<head>

<style type=“text/css”>

body { margin:0; padding:0}

p {color : red;}

</style>

</head>

HTML 태그내에 스타일 지정 (lnline Sytle) <p style=“color:red;”> 이 문단의 색은 빨강입니다 . </p>

우선순위 : lnline > Internal > External


8. div, p, span 차이점 (block-Level Element 공간 분할 태그 )

<div> <p> : 넓이를 브라우저의 “ 100%” 로 인식 (block-level)

난 div 초록라인입니다 .

<span> : 고유 영역이 없이 내용의 양에 따라 길이가 결정 (inline-level)

난 span 입니다 .

난 span 레드 난 span 태그 블루입니다 .

난 div 블루라인입니다 .

<div style=“background : #92d050”> 난 div 초록라인입니다 .</div><div style=“background : #8eb4e3”> 난 div 블루라인입니다 .</div>

<span style=“background : #ffc000”> 난 span 입니다 .</span><span style=“background : #e46c0a”> 난 span 레드 </span ><span style=“background : #00b0f0”> 난 span 태그 블루입니다 .</span >

※ div, p 는 넓이와 높이를 인식하지만 , span 은 인식하지 못함 ※ div, p 는 줄바꿈이 생기지만 , span 은 줄이 바뀌지 않음

※ 만약 span 에 상하공간을 주고 싶을때는 ‘ display:block’ 속성을 사용 ※ div 는 레이아웃을 지정할때 사용 !!, span 은 특정부분에 스타일 줄때 사용 !!


전체가 1000px

200px 700px

※ 결과 : div 에 각각 float 을 사용하면 한줄에 div 가 표시됨 ※ float 는 center 가 없슴

9. Float 속성 ( 현재행의 왼쪽이나 오른쪽으로 밀어내는 박스 )

float : 크게 left 와 right (display 가 block 속성일때만 가능 !!, inline 은 안됨 )

전체가 1000px

200px

700px

float:left

※ 결과 : div 로 각각 200px 와 800px 를 연달아 사용하면 밑으로 붙음

float:right


10. clear

clear : float 설정을 초기화 {clear:both;}

전체가 1000px

200px 600px

※ 결과 : float:left 로 연달아 사용하면 옆으로 쭉 ~ 붙음 .

No clear

전체가 1000px

200px 600px

clear:both;

※ 결과 : clear:both; 를 선언하면 그전에 both 의 속성을 무시하고 밑으로 붙음 .


11. 박스모델 (box model)

margin : 경계선밖에서 최종경계선까지의 여백 border : 경계선 padding : 컨텐츠와 경계선 사이의 여백

Content

padding

border

margin

표현법 ) margin : 10px; ( 상하좌우 모든 10px 의 여백을 줌 ) padding ※ 동일 margin-top: 10px, margin-left:10px, margin-right:10px, margin-bottom:10px;

margin : 10px 0px; ( 상하 10px, 좌우 0px)

margin : 10px 0px 5px ( 상 10px, 좌우 0px, 하 5px)

margin : 10px 2px 5px 6px ( 상 10px, 우 2px, 하 5px, 좌 6px;)

시계방향으로 적용됨 (top right bottom let )

border : 10px solid gray (10px 의 일자 회색 경계선 )


12. id 와 class 사용법

id 의 기본 구조 -<div id=“ 아이디 이름” >

- 스타일 적용 : # 아이디이름 { 스타일입력 }

- 사용 : 동일 본문 내에서 한번만 사용할 때 씀 - 용도 : id 를 사용하여 DHTML 을 적용시 많이 씀

class 의 기본 구조 - <div class=“ 클래스 이름” >

- 스타일 적용 : . 클래스이름 { 스타일입력 }

- 사용 : 여러 번 중복사용 가능 ex) div, span, input 등에 중복 사용가능 - 용도 : 홈페이지의 일관성을 주는데 사용

<div id=“header”></div>

#header {width:100px…}

<div class=“banner”></div>

.banner {font-size:9px;}


13. 텍스트 스타일

color : 텍스트 색상 ( 일부만 색상 변경시에는 span 사용 )

text-align : left, center, right ( 예 :text-align:center; 텍스트 수평정렬 )

letter-spacing : 자간설정 ( 예 : letter-spacing:10em; 글자와 글자사이의 간격 )

line-height : 행간 설정 ( 예 : line-height:140%; 글자의 높이간격 , 140% 권장 )

text-decoration : 텍스트 밑에 줄긋기 ( 예 : text-decoration:underling)

text-shadow : 텍스트 그림자효과 ( 예 : text-shadow : 5px,5px,5px gray;)

…………..


14. 테이블 스타일

<table>

<tr>

<th> 이름 </th>

<th> 나이 </th>

</tr>

<tr>

<td> 홍길동 </td>

<td>20 세 </td>

</tr>

</table>

[ 행 생성( 줄 )]

[ 제목 선언 ]

[ 내용 선언 ]


15. 특수문자

Character Reference

< <

> >

공백

“ "

& &

© ©

® ®

™ ™

[ 마크업 ]

<li>< 홍길동 <</li>

<li>< 임꺽정 <</li>

[ 출력 ]

. < 홍길동 >

. < 임꺽정 >

Software

웹표준 (XHTML + CSS)