웹표준(XHTML+CSS)

1. ㈜유미테크 웹 표준 (XHTML+CSS) (웹상에서 사용하는 기술규격의 표준)

2. ㈜유미테크2㈜유미테크 웹 표준 (XHTML + CSS)  웹 표준이란 : 웹에서 표준적으로 사용하는 기술의 총칭. 어떠한 브라우저 환경에서도 같은 결과가 나타나도록 함  W3C (월드와이드웹 컨소시엄 : www. W3.org / Consortium) - 1994년 10월 설립 - 400개 이상의 기업/기관이 회원 가입 - 국제적 웹 표준 기관  웹표준 역할 분리 - 구조 (HTML, XHTML) : 요소 생성 및 기본 구조 작성 - 표현 (CSS) : 레이아웃 및 스타일 적용 - 동작 (DOM, Script) : 동적인 이벤트 처리, jQuery와 같은 라이브러를 활용한 이벤트 핸들러 분리 1. 웹 표준이란?

3. ㈜유미테크3㈜유미테크 웹 표준 (XHTML + CSS)  컨텐츠와 디자인을 분리 : 수정과 관리가 용이  마크업 용량이 줄어듬  페이지 로딩속도 향상  크로스 브라우징 : 여러 웹 브라우저에서 동일한 페이지 표현  검색엔진의 최적화 (플래시 x, 이미지 자제, 이미지 대체 글자 제공)  웹 접근성 용이 : 웹표준 문서는 최대한 많은 브라우저와 장치에서 읽을 수 있다. 2. 웹 표준의 장점

4. ㈜유미테크4㈜유미테크 웹 표준 (XHTML + CSS)  W3C Validation - http://validator.kldp.org/ - http://validator.w3.org/ 3. 웹 표준 테스트 툴

5. ㈜유미테크5㈜유미테크 웹 표준 (XHTML + CSS)  웹 접근성 - 어떠한 사용자(장애인, 고령자 포함), 어떠한 기술 환경에서도 전문적인 능력 없이 웹 사이트에 모든 정보에 동등하게 접근. 이용할 수 있도록 보장해 주는 것 - 2008년 4월 11월부터 웹접근성 의무화 준수  웹 접근성 품질마크 - 웹 접근성 수준을 인정하는 품질마크를 부여하는 인증제도 - 인증기관 : 한국정보화진흥원 - 수수료 : 인증심사 : 2,000,000 (공공기관, 비영리장애인민간 단체 : 1,000,000) 갱신, 재심사 : 800,000 (공공기관, 비영리장애인 민간단체 : 400,000) 4. 웹 접근성

6. ㈜유미테크6㈜유미테크 웹 표준 (XHTML + CSS) 5. 구조적 마크업 div id=“header” div id=“side bar” div id=“content” div id=“footer” div class=“main” div class=“banner” div class=“main_con” . . . . . . . . .

7. ㈜유미테크7㈜유미테크 웹 표준 (XHTML + CSS)  table의 태그의 오남용 - table 태그는 표에만 사용, 레이아웃 작업 시 빈번한 사용 자제  font, b, I - 글자에 대한 각종 효과는 css 로 처리  link에 대한 자바스크립트로의 처리 - <a href=“javascript:func1()”>  <a href=“b.html” onclick=”” />  폼 전송 기능은 자바스크립트로 전송 - 전송기능은 반드시 type=“submit” 또는 type=“image” 이용 6. 마크업 주의점

8. ㈜유미테크8㈜유미테크 웹 표준 (XHTML + CSS) 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

9. ㈜유미테크9㈜유미테크 웹 표준 (XHTML + CSS) 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은 특정부분에 스타일 줄때 사용!!

10. ㈜유미테크10㈜유미테크 웹 표준 (XHTML + CSS) 전체가 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

11. ㈜유미테크11㈜유미테크 웹 표준 (XHTML + CSS) 10. clear clear : float 설정을 초기화  {clear:both;} 전체가 1000px 200px 600px ※ 결과 : float:left로 연달아 사용하면 옆으로 쭉~ 붙음. No clear 전체가 1000px 200px 600px clear:both; ※ 결과 : clear:both; 를 선언하면 그전에 both의 속성을 무시하고 밑으로 붙음.

12. ㈜유미테크12㈜유미테크 웹 표준 (XHTML + CSS) 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의 일자 회색 경계선)

13. ㈜유미테크13㈜유미테크 웹 표준 (XHTML + CSS) 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;}

14. ㈜유미테크14㈜유미테크 웹 표준 (XHTML + CSS) 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;) …………..

15. ㈜유미테크15㈜유미테크 웹 표준 (XHTML + CSS) 14. 테이블 스타일  <table>  <tr>  <th>이름</th>  <th>나이</th>  </tr>  <tr>  <td>홍길동</td>  <td>20세</td>  </tr>  </table> [행 생성(줄)] [제목 선언] [내용 선언]

16. ㈜유미테크16㈜유미테크 웹 표준 (XHTML + CSS) 15. 특수문자 Character Reference < < > > 공백 “ " & & © © ® ® ™ ™ [마크업] <li><홍길동<</li> <li><임꺽정<</li> [출력] . <홍길동> . <임꺽정>

웹표준(XHTML+CSS)

Du liest eine Vorschau.

Hier ansehen

웹표준(XHTML+CSS)

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (10)

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

Weitere von ymtech (20)

Aktuellste (20)