웹표준 (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>
[행 생성(줄)]
[제목 선언]
[내용 선언]

웹표준 (XHTML + CSS)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie 웹표준 (XHTML + CSS)

Ähnlich wie 웹표준 (XHTML + CSS) (20)

Mehr von ymtech

Mehr von ymtech (20)

웹표준 (XHTML + CSS)