Transcript 웹 표준화의 필요성
2008. 8. 22
정보통신연구소
김종관
웹표준 이란?
2
World Wide Web Consortium (W3C)
http://www.w3c.org
국제적인 웹 기술 표준 기구
W3C SPEC : HTML, XHTML, CSS등
표준화 단계
Draft Working Draft Candidate Recommendation
Recommendation
웹 표준화의 필요성
3
표준을 준수하지 않고, 특정 운영체제와 특정 브라우저에 종
속적인 웹 사이트 및 웹 어플리케이션 개발
Internet Exploer 6
Fire Fox
웹 표준화의 필요성
시각 장애인도 웹 컨텐츠를 인식할 수 있도록 이미지에 대체
텍스트를 제공
<img src=“url.htm” alt=“대체 텍스트”>
4
웹 표준화의 필요성
5
다양한 사용자
시각장애인, 청각장애인 등 장애인
노인, 어린이 등 특수계층
다양한 장치
PDA, 휴대폰 등 여러 휴대기기
다양한 브라우저(IE, FireFox, Opera, Safari 등)
웹의 접근성 향상이 목표
웹접근성 향상 방법
6
7
XHTML
Extensible Hypertext Markup Language
HTML 어휘 + XML 문법
XHTML이 주목받는 이유
여러 휴대용 장치 호환 가능
서로 다른 브라우저들이 동일한 것을 보여줌
HTML과 XHTML 차이점
파일 제일 앞 부분에 DTD 선언을 제공해야 함
<!DOCTYPE PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "">
<html>요소 안에 네임스페이스에 대한 참조를 포함시켜야 함
<html xmlns="http://www.w3.org/1999/xhtml">
<head>와 <body> 요소를 생략 불가
<head> 안의 첫번째 요소는 반드시 <title>이어야 함
태그나 특성 이름들은 반드시 소문자로 써야 함
8
HTML과 XHTML 차이점
태그들의 내포관계가 확실해야 함
<p>This is a <i>bad example.</p></i>
<p>This is a <i>good example.</i></p>
종료 태그를 생략할 수 없음
<img src="http://sample.com/wrong.jpg">
<img src="http://sample.com/right.jpg" />
특성값들은 따옴표로, 단축형 표기는 허용되지 않음
바른 표현 : <input checked="checked">
틀린 표현 : <input cheked>
9
HTML과 XHTML 차이점
script 및 style 요소에는 type 속성이 포함되어야 한다.
<script type="text/javascript” language="javscript"></script>
<style type="text/css"></style>
문서 내 URL에서 &를 쓰면 안 된다.
<!—에러! --> <a href="foo.cgi?chapter=1§ion=2">...</a>
<!—적합! --> <a href="foo.cgi?chapter=1&section=2">...</a>
10
11
<table>, <div> Tag
Div와 Table의 적절한 사용
Div는 레이아웃을 짤때 사용하는 태그
Table은 표를 구성할때 써야 할 태그
Div를 쓰는 이유
코드 경량화, 웹사이트의 성능 향상
유지보수가 쉬움
12
CSS(Cascading Style Sheet)
HTML은 마크업 언어이고 문서의 구조를 나타내는 언어
H1~H6태그
CSS 사용 목적은 문서의 내용과 문서의 표현을 분리하는 것
HTML, XML에 style(글자, 여백, 색깔) 등을
적용하기 위해서 사용하는 언어
13
CSS(Cascading Style Sheet)
CSS 기본 형태
선택자(selector)와 선언문(declaration)두 부분으로 구성
선택자 - 규칙을 어디에 적용할 것인지를 지정
선언문 - 속성 이름과 속성값으로 구성하여 규칙의 내용을 기술
기본 형태
14
CSS 선택자(Selectors)
타입 선택자
HTML 요소에 스타일을 지정할 때 사용
h1 { font-size: 24pt; font-weight: bold }
조건 선택자
선택자1에 포함된 선택자2에 대한 설정
ui li { font-color: red }
클래스 선택자
지정 클래스 속성의 값을 가진 모든 요소에 적용
p.foo {margin:1px; padding: 5px}
<p class=“foo”> ...... </p>
15
CSS 선택자(Selectors)
ID선택자
지정한 ID속성값을 갖는 요소에 적용되는 스타일 지정
#wrap { width: 300px; padding: 0; margin: 0 }
<div id="wrap"> ...... </div>
그룹 선택자
한꺼번에 여러 선택자에 대해 스타일을 적용할 때 사용
쉼표(,)로 구분하여 선택자를 표기
img, table { background: #fff ; color: #000;}
16
CSS 선택자 & 속성
일반 선택자
모든 요소에 적용되는 스타일을 지정할 때 사용
*로 표시합니다.
* { margin: 0; padding: 0; }
중요 속성
font – 폰트 관련 스타일 지정
text - 텍스트 정렬, 들여쓰기 등 단어나 문단관련 스타일
margin, padding – 여백 관리
background – 배경과 관련된 스타일 지정
17
Margin & Padding 차이점
이글과 아래의 margin이란 글사이에 흰색으로 차이가 있음
margin 바깥쪽 여백이 생긴다
글과 아래의 padding이란 글사이에 하늘색으로 차이가 있음
padding 안쪽 여백이 생긴다
18