"★ 웹표준&웹접근성/XHTML & HTML"에 해당되는 글 - 9건

Post

모바일사이트 전화걸기&문자보내기 링크거는 방법

[ ★ 웹표준&웹접근성/XHTML & HTML ] 2012. 5. 24. 22:23

전화걸기

<a href="tel:02-1234-5678">02-1234-5678로 전화걸기~</a>

 

 

 

문자보내기

<a href="sms:02-1234-5678">02-1234-5678로 문자 보내기</a>

Post

마크업에 관한 오해 "Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip"

[ ★ 웹표준&웹접근성/XHTML & HTML ] 2010. 2. 10. 15:02

출처 : http://blog.creation.net/386



만화 속 내용
- 얼마전 W3C가 XHTML2 활동을 올해 안에 접는다고 발표했습니다.
- 전 솔직히 이 소식이 반가웠습니다.
- 그런데 많은 분들이 XHTML이 끝났다고 오해 하셨습니다.
- 전혀 다른 두 가지 기술을 비슷한 이름으로 썼기 때문에 오해가 생겨난 것입니다.
- 대표적으로 자바스크립트와 자바가 그렇습니다.
- 둘은 완전 달라 사실 햄과 햄스터랑 비슷하죠.
- XHTML2가 바로 그렇습니다.
- XHTML 1.0와 1.1와 XHTML2는 전혀 달라요. 헷갈리시죠?
- XHTML1.0은 HTML4를 XML 문법으로 바꾼 겁니다.
- "태그와 속성을 소문자로 쓴다.속성에 따옴표를 쓴다.태그를 시작했으면 꼭 닫는다. P와 LI 등은 닫는 태그로 BR, IMG 등은 슬래시로"
- XTHML 1.1은 다 똑같은데 단지 XML 문서 형식으로 제공해야 한다는 단서를 달았습니다.
- 근데 XHTML 2는 HTML4와는 아무 관련이 없습니다.
- 호환성은 고려하지 않고 이론적으로 "순수한" 태그 용어를 만들려는 새로운 시도 입니다.
- XHTML 2가 없어진다고 XHTML이 끝장나는 걸까요? 전혀 아닙니다.
- 다양한 의견들을 모아 멋진  결론을 내기 위한 작업이 진행됐습니다.
- 완벽한 문법을 선호하는 분들에게 포맷간 기술적 차이를 설명할 필요도 없습니다.
- Drew의 글에 따르면 XHTML 문법을 선택해야할 중요한 이유가 있습니다.
- "이런 이야기가 나올때 마다 초보자에게 간단한 문법이 쉽다는 가정을 한다. 황당하다. 내 경험에 따르면 규칙이 명확한 문법이 배우고 쓰기 더 쉽다. 난 XHTML을 좋아한다. 속성이 항상 따옴표 안에 있어 읽기 편하고 태그는 항상 닫겨 있다. 이게 예측 가능하고 읽기 쉬워 더 간단하다. - Drew McLelian"
- XHTML 문법이 HTML 보다 더 낫다는 것은 아닙니다.
- 단지 개인적인 선택입니다. 서로 다른 문법을 선호한다고 해서 그게 틀린것은 아니죠.
- 제가 태국 음식을 좋아하고 여러분이 이태리 음식을 좋아하는 차이일 뿐입니다.
- XHTML 2의 죽음이 곧 XHTML 문법의 죽음이 아닙니다.
- 앞으로 태그를 닫고 속성에 따옴표를 표시하실 수 있습니다.
- XHTML 1을 계속 쓰거나 HTML 5을 쓰실 수 있으니까요.
- 그렇습니다. HTML 5는 여러분이 사용하기 편한 방식 모두를 제공합니다. 브루스 박사말을 들어볼까요?
- "난 XHTML 문법을 좋아한다. 소문자로 적고 따옴표를 꼭 치고 태그를 늘 닫는 간단한 방법이다. 깔끔한 모습이 시원한 맥주 한잔을 연상시킨다. 하지만 여러분은 대문자로 태그를 쓰는게 자연스럽고 태그를 닫는 것을 귀찮아할지도 모른다. HTML5에서는 선택 할 수 있다. 새로운 전환점이 되는 이 원리는 여러분이 무엇을 원하고 좋아하든 가능하다. - Bruce Lawson 여러분의 문서를 Application/xhtml+xml 형식으로 제공하게 되면 XHTML5에 충실한 문서입니다.
- 아! 죄송합니다. 또 용어에 혼란을...
- XHTML 2는 XHTML을 위한 것이 아니고 오히려 HTML5에서 살아 있음을 기억해 주세요.
- 글쎄요! 아직 HTML 5가 잘 "지원"되지 않잖아요.
- "지원"의 정의가 뭘까요? 되돌아가 봅시다.
- HTML5는 XHTML2와 달리 하위 호환성이 가능합니다.
- 기존의 XHTML 문서를 간단히 HTML5로 바꿀 수 있습니다.
- 현 문서 선언 바꾼 문서 선언
- 끝났습니다.
- XHTML 2는 죽었지만, XHTML은 영원할 겁니다.
- HTML 5가 있으니까요.
끝

Post

자주 쓰이는 특수문자 코드표

[ ★ 웹표준&웹접근성/XHTML & HTML ] 2010. 1. 11. 16:20

해외사이트 : http://www.elizabethcastro.com/html/extras/entities.html

 

자주 쓰이는 문자참조

 
Description Character Code Entity
non-break space   &#160; &nbsp;
ampersand & &#38; &amp;
quotation " &#34; &quot;
left small quotation ‘ &#8216; &lsquo;
right small quotation ’ &#8217; &rsquo;
less than < &#60; &lt;
greater than > &#62; &gt;
less than or equal ≤ &#8804; &le;
greater than or equal ≥ &#8805; &ge;
not equal ≠ &#8800; &ne;
at @ &#64;
copyright © &#169; &copy;
registered ® &#174; &reg;
trademark ™ &#153;
middle dot · &#183; &middot;
broken vertical bar ¦ &166; &brvbar;
degree ° &#176; &deg;
multiplication × &#215; &times;
division ÷ &#247; &divide;
plus or minus ± &#177; &plusmn;
section § &#167; &sect;
bottom double quote „ &#8222; &bdquo;
alpha α &#945; &alpha;
beta β &#946; &beta;
three dot … &#8230; &hellip;
fraction slash ⁄ &#8260; &frasl;
therefore ∴ &#8756; &there4;

Post

웹표준 엘리먼트 금지사항

[ ★ 웹표준&웹접근성/XHTML & HTML ] 2010. 1. 6. 16:37
출처 : W3C XHTML 규격문 번역본(Trio)


아래 요소들은 그 요소 안에 다음의 특정 요소를 포함할 수 없다.

  • a : 다른 a요소를 포함할 수 없다.

  • pre : img, object, big, small, sub, sup요소를 포함할 수 없다.

  • button : input, select, textarea, label, button, form, fieldset, iframe, isindex요소를 포함할 수 없다.

  • label : 다른 label요소를 포함할 수 없다.

  • form : 다른 form요소를 포함할 수 없다.

Post

MS아웃룩에서 더이상 지원하지 않는 HTML의 기능

[ ★ 웹표준&웹접근성/XHTML & HTML ] 2009. 3. 24. 15:04
이번에 메일링 페이지를 코딩하면서 아웃룩에서 자꾸만 깨지는 현상이 발생해서 몇분이면 끝날 작업을 몇시간 동안 헤맸었습니다.
배경으로 넣은 이미지들이 전부 보이지 않는다던가 이미지 주변으로 공백이 생긴다던가 하는 문제들이 보통이었는데요
오늘 오랜만에 NULI 블로그에 들렀다가 문제점을 알게되었습니다.
MS아웃룩2007에서 HTML의 기능 중 더이상 지원하지 않는 기능들의 목록을 발표했었다고 하네요.
전 그것도 모르고 -ㅅ-;;

아무튼, 앞으로 메일링 페이지 작업시 꼭 주의해야 할 내용이기에 NULI 블로그에서 내용을 일부 퍼왔습니다.

[출처] NHN NULI Blog - Outlook HTML & CSS Validator


MS아웃룩에서 더이상 지원하지 않는 HTML의 기능
  • no support for background images (HTML or CSS)
  • no support for forms
  • no support for Flash, or other plugins
  • no support for CSS floats
  • no support for replacing bullets with images in unordered lists
  • no support for CSS positioning
  • no support for animated GIFs



    • 자세한 내용은 아래 페이지를 참고하면 된답니다.
    Campaign Monitor - Microsoft takes email design back 5 years

    Post

    파일 경로 ; 절대 URI & 상대 URI

    [ ★ 웹표준&웹접근성/XHTML & HTML ] 2008. 8. 25. 16:55

    절대 URI

    http://tpure.tistory.com/page/index.html
    = http://tpure.tistory.com/page/   (O)
    ≠ http://tpure.tistory.com/page   (X) 마지막에 /를 붙이지 않으면 잘못 인식되어 오류가 발생할 수 있음.


    ※ Apache서버라면 .htaccess파일을 아래와 같이 설정하여 파일의 기본값을 index.html이 아닌 main.html로 지정할 수 있다.
    DirectoryIndex main.html


    ※ 기본 파일을 공백으로 구별하여 복수 지정도 가능하다. (지정 순서가 우선순위가 됨.)
    DirectoryIndex index.html index.cgi index.php




    상대 URI

    같은 폴더내의 파일 ⇒ ./index.html = index.htm
    한 단계 위 폴더의 파일 ⇒ ../index.html
    두 단계 위 폴더의 파일 ⇒ ../../index.html
    피리어드(.)는 같은 폴더를 의미 / 슬래시(/)는 폴더의 구별을 의미 / 쌍 피리어드(..)는 한 단계 위의 폴더를 의미


    /index.html
    URI스킴과 책임자 부분이 생략된 것으로 인식되어(웹사이트의 기본 주소) http://tpure.tistory.com/index.html이 참조된다.


    ※base요소를 사용하여 기준 URI를 지정할 수 있다.
    <head>
       <base href="http://tpure.tistory.com/" />
    </head>

    Post

    XHTML 기본 문법 준수사항

    [ ★ 웹표준&웹접근성/XHTML & HTML ] 2008. 8. 21. 21:13
    문서의 html 요소에는 XHTML 네임스페이스를 지정해야 한다.
    <html xmlns="http://www.w3.org/1999/xhtml">


    모든 요소는 완벽하게 내포되어야 한다.
    (X)   <p>잘못된 <b>형식</p>입니다.</b>
    (O)   <p>올바른 <b>형식</b>입니다.</p>


    모든 속성값은 인용부호("또는')로 묶어야 한다.
    (X)   <a href=http://www.empas.com>잘못된 형식</a>
    (O)  <a href="http://www.empas.com">올바른 형식</a>


    모든 요소 및 속성의 이름은 소문자여야 한다.
    (X)   <A HREF=http://www.empas.com>잘못된 형식</A>
    (O)  <a href="http://www.empas.com">올바른 형식</a>


    모든 요소는 닫아야 한다.
    빈 요소의 경우 종료태그를 붙여주거나  /> /앞에 공백 있음로 끝나야 한다.
    빈 요소 : area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta, param
    (X)   <br>한 줄 개행
    (O)  <br>한 줄 개행</br>
    (O)  <br />한 줄 개행


    모든 속성값은 속성이 함께 선언되어야 한다.
    최소화 될 수 없는 속성 : checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly, selected
    (X)   <option value="1" selected>잘못된 형식</option>
    (O)  <option value="1" selected="selected">올바른 형식</option>


    모든 script 및 style요소에는 type 속성이 포함되어야 한다.
    <script type="text/javascript" language="javascript"></script>
    <style type="text/css"></style>


    모든 img 및 area 요소에는 alt 속성이 포함되어야 한다.
    (X)   <img src="logo.gif" />
    (O)  <img src="logo.gif" alt="로고" />


    모든 script 내의 태그는 escape시켜야 한다.
    (X)
    <script type="text/javascript">
        <!--
        document.write("</p>");
        //-->
    </script>

    (O) HTML 4에서는 script 내의 종료태그가 인식이 되므로 역슬래시를 사용해야 한다.
    <script type="text/javascript">
        <!--
        document.write("<＼/p>");
        //-->
    </script>

    (O) XHTML에서는 script와 style 요소들은 #PCDATA 컨텐트를 갖는 것으로 선언되어 <과 &는 마크업의 시작으로 처리되고, &lt;과 &amp; 등은 각각 <과 &로의 개체참조로서 인식되므로 CDATA로 마크업하여 표시하는 게 좋다.
    <script type="text/javascript">
        <! [CDATA[
        <h1>제목</h1>
        ]]>
    </script>


    문서 내의 모든 URL에서는 &를 쓰면 안된다.
    (X)   <a href="doc.cgi?chapter=1&section=2">링크</a>
    (O)  <a href="doc.cgi?chapter=1&amp;section=2">링크</a>
    ※ HTML 문서 내에서만 &를 &amp;로 바꾸어야 하며, 브라우저의 주소창이나 이메일본문에서는 &를 써야 한다.

    Post

    DOCTYPE 선언

    [ ★ 웹표준&웹접근성/XHTML & HTML ] 2008. 8. 21. 19:15

    DTD : Document Type Definition  [ strict / transitional / frameset ]

    문서의 루트 요소 앞에는 공백없이 문서형식 선언이 있어야 하며, 이 선언은 XHTML에 대한 세 DTD파일 중 하나를 참조해야 한다.

    올바른 문서형식 선언을 해주는 것은 다양한 브라우저에 따른 렌더링 차이를 최소화할 수 있기 때문에 매우 중요하다. HTML의 버전에 따라 해석되는 방식이 브라우저에 따라서도 다르기 때문에 이를 지정해 주는 것은 매우 중요하다.


    1. HTML 4.01 표준 문서 형식

    strict
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    transitional
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    frameset
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


    2. XHTML 1.0 표준 문서 형식


    strict
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">

    transitional
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    frameset
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1-frameset.dtd">


    3. XHTML 1.1 표준 문서 형식

    <!DOCTYPE html PUBLIC "-//W3c//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    ※ 현재 상태에서 가장 최상의 브라우저 호환성을 제공해 주는 문서형식은 XHTML 1.0 Transitional을 사용하는 것이다.

    Post

    XHTML 기본구조

    [ ★ 웹표준&웹접근성/XHTML & HTML ] 2008. 8. 21. 18:28

    XHTML : eXtensible HyperText Markup Language
    XML : eXtensible Markup Language
    XSL : eXtensible Style Sheets


    ★ 표준 문서 구조

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns=http://www.w3.org/1999/xhtml xml:lang="ko-KR">
      <head>
        <title></title>
      </head>
      <body>
      </body>
    </html>
    ◀ 이전 1 다음 ▶
    ▲ top
    ▲ top

    티스토리툴바