Skip to content

웹 표준 #
Find similar titles

Structured data

Category
Computer science

웹 표준 #

웹 표준이란? #

  • 웹상에서 지켜야 하는 표준적인 규칙이라고 할 수 있다. 국제 표준화 단체인 W3C(World Wide Web Consortium)에서 지정한 표준안을 지키며 웹사이트를 제작하는 것이다.

웹 표준 준수의 장점 #

수정, 관리 #

  • (X)HTML, CSS가 따로 분리하여 웹사이트를 제작한다면 수정 시 CSS의 수정만으로도 손쉽게 디자인의 수정이 가능하여 시간, 비용의 절감 효과가 있다.

하위·상위호환성 #

  • 올바른 (X)HTML과 CSS로 페이지 제작 시 하위, 상위 버전의 브라우저에서도 해당 콘텐츠가 적절하게 나타난다.

웹 접근성 #

  • 노인, 일반인, 장애인 등의 다양한 사용자가 다양한 접근 환경에서 접근할 때도 어려움 없이 접근 가능한 페이지를 만들 수 있다.

웹 콘텐츠 접근성 가이드 라인 #

인지성 #

  • 인터페이스 요소는 사용자들이 인지할 수 있도록 그들에게 표시될 수 있어야 한다.
  • 콘텐츠에 대체 텍스트를 음성, 기호 등과 같은 형태로 제공해야 한다.
  • 사용자들이 더욱 쉽게 보고 들을 수 있는 전경에서 배경을 분리한 콘텐츠를 만들어야 한다.
  • 시간을 바탕으로 한 미디어에 대한 대안을 제공해야 한다.
  • 보와 구조의 손실 없이 콘텐츠를 다른 방식(예를 들면 더욱 간단한 형태로)들로 표현할 수 있어야 한다.

운용성 #

  • 사용자 인터페이스 요소와 탐색은 운용 가능해야 한다.
  • 키보드로 모든 기능을 사용할 수 있도록 해야 한다.
  • 읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야 한다.
  • 알려진 방법으로 발작을 일으킬 수 있는 콘텐츠를 디자인하지 않아야 한다.
  • 사용자가 탐색하고, 콘텐츠를 찾고 그들이 어디에 위치하는지를 알 수 있도록 도와주는 방법을 제공해야 한다.

이해성 #

  • 정보와 사용자 인터페이스 운용은 이해할 수 있어야 한다.
  • 텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.
  • 웹 페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야 한다.
  • 사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.

내구성 #

  • 콘텐츠는 보조 기술을 포함한 넓고 다양한 사용자 에이전트에 의존하여 해석될 수 있도록 충분히 내구성을 가져야 한다.
  • 보조 기술을 포함한 현재 및 미래의 사용자 에이전트의 호환성을 극대화해야 한다.

문서 구조 #

  • 해당 페이지의 기본정보를 포함하는 head와 본문을 포함하는 body를 가진다.

표준 엘리먼트 사용 #

  • 비표준 엘리먼트 (font, center, strike, u, s, applet, basefont, dir, isindex, xmp )를 사용하지 않는다.
  • 모든 요소는 완벽하게 중첩되어야 한다.
  • <p>This is a <strong>bad</p>example</strong> (X)
  • <p>This is a <strong>good</strong>example</p> (O)
  • 모든 속성값은 속성이 함께 선언되어야 한다.
  • <option value="wrong" selected>bad example</option> (X)
  • <option value="right" selected="selected">good example</option> (O)
  • 모든 요소와 속성은 소문자여야 한다.
  • 모든 속성값은 인용 부호("") 안에 표기한다.
  • 부위인식자의 모든 NAME 속성을 ID 속성으로 변경한다.
  • 구버전 브라우저들의 호환성을 위해 id와 name 속성을 혼용해서 사용한다.
  • 모든 요소는 닫아야 한다.
  • Empty 엘리먼트도 닫아주어야 한다. (단, HTML 4.01 은 제외)
  • text나 URL, script에 포함된 특수 문자는 escape 시킨다.
  • <a href="http://tab.search.daum.net/dsa/search?nil_profile=g&nil_searchtitle=1&w=knowledge&q=">bad example</a> (X)
  • <a href="http://tab.search.daum.net/dsa/search?nil_profile=g & a m p ; nil_searchtitle=1 & a m p ; w=knowledge & a m p ; q=">good example</a> (O)

DTD인코딩 #

  • 브라우저에게 웹페이지의 문서종류를 알려주는 선언문으로, 해당 문서의 최상단에 선언한다. 올바른 화면표시(Rendering)를 하기 위해 반드시 필요하다. 브라우저들의 렌더링을 표준에 맞춰 렌더링하게끔 하므로 다양한 환경에서 상호 운용성을 보장할 수 있다.
  • <!DOCTYPE
  • 현재문서는
  • html
  • 일반적으로 html이나 xhtml으로, 최상위 엘리먼트는 html이므로 html로 작성
  • PUBLIC
  • PUBLIC 또는 SYSTEM을 설정, PUBLIC(국제적 공용문서) / SYSTEM(내부적, 제한적 문서)
  • "-//W3C//DTD XHTML 1.0 Transitional//EN"
  • 비공인 인증인 W3C 기관에 의해 XHTML1.0을 transitional 방식의 영어 공용어를 출력하며
  • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 참조할 DTD 문서는 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 이다.
  • Strict
  • 선언된 (x)HTML 버전의 문법과 구조를 정확하게 사용한다. 지원하지 않는 엘리먼트를 사용해서는 안 된다
  • Transitional
  • 과도기적으로 사용하기 위한 선언으로, strict보다 유연하다. 선언된 버전 이외의 문법과 구조를 허용한다
  • Frameset
  • Transitional 속성과 더불어, frameset(iframe, frame)을 지원한다.
  • frameset은 문서의 구조에 관한 엘리먼트이기 때문에, transitional에서 frameset을 사용해도 화면표시가 일어난다. 따라서 사실상 frameset은 transitional과 동일하게 취급된다

Strict DTD 금기 사항 #

  • a : 다른 a 엘리먼트들을 포함할 수 없다
  • pre : img, object, big, small, sub 또는 sup 엘리먼트들을 포함할 수 없다.
  • button : input, select, textarea, label, button, form, fieldset, iframe 또는 isindex 엘리먼트들을 포함할 수 없다.
  • label : 다른 label 엘리먼트들을 포함할 수 없다.
  • form : 다른 form엘리먼트들을 포함할 수 없고, input 엘리먼트를 직접 사용할 수 없고, 반드시 div,p 엘리먼트와 같은 블록 레벨 요소로 감싸주어야 한다.
  • body : text/img를 직접 사용할 수 없고, 반드시 div,p 엘리먼트와 같은 블록 레벨 요소로 감싸주어야 한다.
  • blockquote : text는 div,p 엘리먼트와 같은 블록 레벨 요소로 감싸주어야 한다.

Strict DTD 사라진 속성 #

  • align : table 관련 태그에서만 허용됨(col, colgroup, tbody, td, tfoot, th, thead, tr).
  • language
  • background
  • bgcolor
  • border : table 태그에서만 허용됨.
  • height : img, object 태그에서만 허용됨.
  • hspace
  • name : HTML 4.01 Strict에서는 허용되고, XHTML 1.0 Strict에서는 form, image 태그를 제외하고 허용됨.
  • noshade
  • nowrap
  • target
  • text, link, vlink, alink
  • vspace
  • width : img, object, table, col, colgroup 태그에서만 허용됨.

Strict DTD 필수 속성 #

  • <map name="CDATA" >
  • <area alt="%Text;">
  • <img src="%URI;" alt="%Text;" >
  • <param name="CDATA">
  • <form action="%URI;">
  • <optgroup label="%Text;">
  • <textarea rows="NUMBER" cols="NUMBER" >
  • <base href="%URI;">
  • <meta contect="CDATA" >
  • <style type="%ContentType;">
  • <script type="%ContentType;">
  • <applet width="%Length;" height="%Length;" >

인코딩 선언 #

  • 기본 인코딩 : 기본적으로 모든 HTML 문서는 utf-8을 기본 인코딩으로 사용한다.
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • 예외 : 기존 서비스가 EUC-KR로 되어있는 상태에서 추가적인 문서를 작성할 때에는 해당 인코딩을 따른다.
  • <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

Block/Inline Element #

Block Element #

  • 줄을 바꿔 각각 독립된 줄에 표시된다.
  • 별도의 CSS 컨트롤이 없다면 해당 문서 크기만큼의 너비를 가지며, 문서의 위에서부터 차곡차곡 쌓이는 형태로 표시된다.
  • 인라인 요소와 텍스트 혹은 또 다른 블록요소를 포함할 수 있다.
  • Mozilla Developer Network : Block Element

Inline Element #

  • 다른 인라인 요소와 같은 줄에 표시된다.
  • 별도의 CSS컨트롤이 없다면 해당 문서의 좌측부터 우측으로 나열되는 형태로 표시된다.
  • 또 다른 인라인 요소와 텍스트를 포함할 수 있으나, 블록요소를 포함할 수는 없다.
  • Mozilla Developer Network : Inline Element

참고 사이트(출처) #

Incoming Links #

Related Data Sciences #

Suggested Pages #

0.0.1_20140628_0