전체메뉴

웹 표준 개발 FAQ

아이콘
웹 표준 개발 관련 질문과 답변을 확인 하실 수 있습니다.

전체 6건 (1페이지/1페이지)

  • HTML 과 XHTML의 특징과 차이점은 ?

  • XHTML 이란

    - X tensible Hyper Text Markup Language 의 약자입니다.


    - HTML과 거의 동일합니다.                                                                                                   


    - HTML보다 엄격합니다.                                                                                           


    - XML 애플리케이션으로 정의 된 HTML입니다.                                                       


    - 모든 주요 브라우저에서 지원됩니다.                                                 

     

    HTML과의 가장 중요한 차이점:


    문서구조


    - XHTML DOCTYPE은 필수입니다.


    - <html>xmlns 속성은 필수입니다.


    - <html>, <head>, <title> <body>는 필수입니다.



    XHTML 요소


    - XHTML 요소는 올바르게 중첩 되어야 합니다.

    ) <b><i>This text is bold and italic</i></b> ( O )

    <b><i>This text is bold and italic</b></i> ( X )


    - XHTML 요소는 항상 닫아야 합니다.


    <p>This is a paragraph</p>

    <p>This is another paragraph</p> ( O )

     

    <p>This is a paragraph

    <p>This is another paragraph ( X )


    - XHTML 요소는 소문자여야 합니다.

    <body>

    <p>This is a paragraph</p>

    </body> ( O )

     

    <BODY>

    <P>This is a paragraph</P>

    </BODY> ( X )


    - XHTML 문서에는 하나의 루트 요소 가 있어야 합니다.


    XHTML 속성


    - 속성 이름은 소문자여야 합니다.


    - 속성 값은 인용해야합니다.


    - 속성 최소화는 금지되어 있습니다.


    HTML에서 XHTML로 변환하는 방법

     

    1. 모든 페이지의 첫 줄에 XHTML <! DOCTYPE> 추가


    2. 모든 페이지의 html 요소에 xmlns 속성 추가


    3. 모든 요소 이름을 소문자로 변경


    4. 빈 요소를 모두 닫습니다.


    5. 모든 속성 이름을 소문자로 변경


    6. 모든 속성 값 인용



  • HTML5에서 의미 요소는 무엇입니까?

  • 의미없는 <div> 태그로 구성된 문서의 구조를 개선하기 위해 HTML5에서는 태그만 보고도 문서를 쉽게 이해할 수 있도록 의미를 가지는 새로운 시맨틱 요소 또는 시맨틱 태그를 도입했다. 여기서 시맨틱(Semantic)'이란의미를 갖는다 는 뜻으로 , 각 태그가 스스로 의미를 지닌다는 뜻이다.

     

    많은 웹 사이트에서는 탐색, 머리글 및 바닥 글을 나타내는 <div id = "nav"> <div class = "header"> <div id = "footer">와 같은 HTML 코드가 포함되어 있습니다.

     

    HTML5는 웹 페이지의 다른 부분을 정의하기위한 새로운 의미 요소를 제공합니다.

     

    HTML5 <section> 요소

    <section>요소는 문서의 섹션을 정의합니다.

    섹션은 일반적으로 제목이 있는 주제별 콘텐츠 그룹입니다.

    홈페이지는 일반적으로 소개, 컨텐츠 및 연락처 정보를 위해 섹션으로 분할 될 수 있습니다.

     

    )

    <section>

    <hi>WWF</h1>

    <p>The World Wide Fund for Nature (WWF) is ....</p>

    </section>

     

    HTML5 <article> 요소

    <article> 요소는 독립적이고 독립적인 컨텐츠를 지정합니다.

    기사는 독자적으로 이해해야하며, 웹 사이트의 나머지 부분과 독립적으로 읽을 수 있어야 합니다.

     

    <article> 요소를 사용할 수 있는 예 :

    포럼 게시물

    블로그 게시물

    신문 기사

     

    )

    <article>

    <h1>What Does WWF Do?</h1>

    <p>WWF's mission is to stop the degradation of our planet's natural environment,

    and build a future in which humans live in harmony with nature.</p>

    </article>

     

    HTML5 <header> 요소

     

    <header>요소는 문서 또는 섹션 헤더를 지정한다.

    <header>요소는 입문 콘텐츠에 대한 컨테이너로 사용되어야한다.

    <header>한 문서에 여러 요소 가있을 수 있습니다 .

     

    )

    <article>

    <header>

    <h1>What Does WWF Do?</h1>

    <p>WWF's mission:</p>

    </header>

    <p>WWF's mission is to stop the degradation of our planet's natural environment,

    and build a future in which humans live in harmony with nature.</p>

    </article>

     

    HTML5 <footer> 요소

     

    <footer>요소는 문서 또는 섹션의 바닥 글을 지정합니다.

    <footer>요소는 포함 된 요소에 대한 정보를 포함해야합니다.

    바닥 글에는 일반적으로 문서 작성자, 저작권 정보, 이용 약관 링크, 연락처 정보 등이 포함됩니다.

    <footer>한 문서에 여러 요소 가있을 수 있습니다 .

     

    )

    <footer>

    <p>Posted by: Hege Refsnes</p>

    <p>Contact information: <a href="mailto:someone@example.com">

    someone@example.com</a>.</p>

    </footer>

     

     

    HTML5 <nav> 요소

    <nav>요소는 탐색 링크의 집합을 정의합니다.

    문서의 모든 링크가 <nav>요소 내부에있는 것은 아닙니다 . <nav>요소는 주요 탐색 링크 블록에만 사용됩니다.

     

    )

    <nav>

    <a href="/html/">HTML</a> |

    <a href="/css/">CSS</a> |

    <a href="/js/">JavaScript</a> |

    <a href="/jquery/">jQuery</a>

    </nav>

     

    HTML5 <aside> 요소

    <aside>요소가 (a 사이드 등)에 저장되는 내용을 제외하고 어떤 콘텐츠를 정의한다.

    <aside>내용은 주변의 내용에 관련되어야한다.

     

    )

    <p>My family and I visited The Epcot center this summer.</p>

     

    <aside>

    <h4>Epcot Center</h4>

    <p>The Epcot Center is a theme park in Disney World, Florida.</p>

    </aside>

     

    HTML5 <figure> <figcaption> 요소

    그림 캡션의 목적은 이미지에 시각적 설명을 추가하는 것입니다.

    HTML5에서는 이미지와 캡션을 <figure> 요소 로 그룹화 할 수 있습니다 .

     

    )

    <figure>

    <img src="pic_trulli.jpg" alt="Trulli">

    <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>

    </figure>

     

    <img>요소는 이미지를 정의하는 <figcaption> 요소는 캡션을 정의한다.

     

    의미 요소가 필요한 이유

    HTML4에서는 개발자가 고유 한 ID / 클래스 이름을 사용하여 머리글, 상단, 하단, 바닥 글, 메뉴, 탐색, 기본, 컨테이너, 내용, 기사, 사이드 바, 상단 탐색 등의 요소를 스타일링했습니다.

    이로 인해 검색 엔진이 올바른 웹 페이지 컨텐츠를 식별 할 수 없었습니다.

    새로운 HTML5 요소 ( <header> <footer> <nav> <section> <article>)를 사용하면 더 쉬워 질 것입니다.

    W3C에 따르면 시맨틱 웹 (Semantic Web)"애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용 할 수있다"고 말했다.

     

    아래는 HTML5의 새로운 의미 요소의 목록입니다.

    Tag

    Description

    <article>

    Defines an article

    <aside>

    Defines content aside from the page content

    <details>

    Defines additional details that the user can view or hide

    <figcaption>

    Defines a caption for a <figure> element

    <figure>

    Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

    <footer>

    Defines a footer for a document or section

    <header>

    Specifies a header for a document or section

    <main>

    Specifies the main content of a document

    <mark>

    Defines marked/highlighted text

    <nav>

    Defines navigation links

    <section>

    Defines a section in a document

    <summary>

    Defines a visible heading for a <details> element

    <time>

    Defines a date/time

     

    브라우저 지원

     

    Chrome

    Edge

    Firefox

    Safari

    Opera

    Yes

    Yes

    Yes

    Yes

    Yes

     

    HTML5 의미 요소는 모든 최신 브라우저에서 지원됩니다.

  • html5 Video 객체란?

  • <video> 요소는 동영상 콘텐츠를 포함하기 위해서 사용하며 , src 속성이나 <source> 요소를 이용해 여러 개의 동영상 소스 중 하나를 표시하도록 할 수 있습니다.


    html5에는 MP4, WebM OGG3 가지 비디오형식이 지원 됩니다.


    Browser

    MP4

    WebM

    Ogg

    Internet Explorer

    YES

    NO

    NO

    Chrome

    YES

    YES

    YES

    Firefox

    YES

    YES

    YES

    Safari

    YES

    NO

    NO

    Opera

    YES(from Opera 25)

    YES

    YES




    File Format

    Media Type

    MP4

    video/mp4

    WebM

    video/webm

    Ogg

    video/ogg


    <video src="videofile.mp4" poster="posterimage.jpg">
     HTML5 <code>video</code> 요소를 지원하지 않는 구형 웹 브라우저를 사용 중입니다.
     <a href="http://outdatedbrowser.com/ko">최신형 브라우저로 업데이트</a> 하세요.
    </video>


    <!-- picture, audio, video 요소의 다중 미디어 리소스를 지정하기 위해 사용하는 예시 -->      
    <video src="videofile.mp4" poster="posterimage.jpg" controls>
     <source src="videofile.webm" type="video/webm">
     <source src="videofile.ogg" type="video/ogg">
     <source src="videofile.mov" type="video/quicktime">
     HTML5 <code>video</code> 요소를 지원하지 않는 구형 웹 브라우저를 사용 중입니다.
     <a href="http://outdatedbrowser.com/ko">최신형 브라우저로 업데이트</a> 하세요.
    </video>

    video 요소를 이용할 때 동영상을 보기 전에 포스터를 보여주고 싶다면 poster="posterimage.jpg"와 같이 정의해 줄 수 있으며구형 브라우저 사용자를 위해 가이드를 해줄 수도 있습니다


    ∎ video 속성값에는 다음과 같은 것이 있습니다.
      ∙ src - 비디오 파일 경로
      ∙ poster - 포스터 이미지 경로
      ∙ preload - auto(기본값), 브라우저를 미리 읽어와서 사용자 경험 향상(메타데이터 / 비디오 다운로드) 시키기 위한 설정 [none , metadata, auto]
      ∙ controls - 재생 컨트롤 표시 설정
      ∙ autoplay - 자동 재생설정
      ∙ loop - 반복설정
      ∙ muted - 음소거 설정





  • HTML5에서 상호작용하는 요소들은 무엇이 있나요?

  • <details>, <summary>, <menu> 요소 등이 존재합니다.

     

    <details>요소는 HTML5에 새롭게 추가된 요소로서 세부사항을 표시한다. 이 요소를 사용하면 세부사항을 선택적으로 보여줄 수 있다. 사용자가 요약(summary)을 선택하면 숨겨져 있던 세부사항이 나타나도록 구성하는 기법인데 W3C에서는 디스클로저 위젯(disclosure widget)이라고 부르고 있다.

    <details>

        <summary>Copyright 1999-2011.<summary>

        <p> - by Refsnes Data. All Rights Reserved.</p>

        <p>All content and graphics on this web site are the property of the company Refsnes Data. </p>

    </details>

     

    지원 현황


    Internet Explorer

    Chrome

    Firefox

    Safari

    Opera

    No

    YES

    No

    SF6

    No


    <summary>요소는 요약(SUMMARY)을 표시한다 여기에서의 요약은 details 요소로 제공되는 세부사항에 대한 요약 또는 제목을 의미한다.
    "요약-세부라는 관계를 제대로 전달하기 위해서는 details 요소 다음에 곧바로 summary 요 소가 이어져야 한다.

    위의 details 요소 참조

     

    menu 요소는 메뉴(MENU)를 표시한다. 주로 메뉴바, 툴바, 컨텍스트 메뉴등에서 사용된다.

     

    <menu type="toolbar">

    <li> <menu label="File">

    <button type="button" onclick="file_new()">New...</button>

    <button type="button" onclick="file_open()">Open...</button>

    <button type="button" onclick="file_save()">Save</button>

    </menu>

    </li>


    <li>

    <menu label="Edit">

    <button type="button" onclick="edit_cut()">Cut</button>

    <button type="button" onclick="edit_copy()">Copy</button>

    <button type="button" onclick="edit_paste()">Paste</button>

    </menu>

    </li>

    </menu>

     

     

    ∎type 속성

     type 속성은 메뉴 타입을 지정한다. 이 속성에 의해 menu 요소의 표현 형태가 결정되는데 아직 menu 요소를 지원하는 브라우저가 없어서 어떻게 표현되는지 정확하게 알 수 없다.

    ∙type="list" : 속성값을 list로 지정하면 리스트 메뉴가 만들어진다. 리스트 메뉴의 리스트는 일반적인 항목으로 구성된 리스트가 아니라 명령어 리스트이다. 이 값이 기본값이다.

    ∙type="context" : 속성값을 context로 지정하면 컨텍스트 메뉴가 만들어진다. 마우스 우측버튼을 눌렀을 때 나타나는 메뉴처럼 컨텍스트 메뉴는 특정 상황을 지원하기 위한 명령어 리스트만으로 구성된 메뉴를 의미한다.

    ∙type="toolbar" : 속성값을 toolbar로 지정하면 툴바 메뉴가 만들어진다. 툴바는 자주 이용하는 명령어를 별도로 모아두는 곳이다.

    ∎label 속성

    label 속성은 메뉴 이름을 지정한다. 이 속성은 서브 메뉴를 포함하고 있는 메뉴에 적용된다.

  • HTML5 Audio 객체란?

  • <audio> 태그는 음악 또는 기타 오디오 스트림과 같은 사운드를 정의합니다.

    현재 <audio> 요소에 지원되는 파일 형식은 MP3, WAV 및 OGG의 3 가지입니다.

    <audio> 태그는 HTML5의 새로운 기능입니다.

    <audio>와 </ audio> 사이의 텍스트는 <audio> 태그를 지원하지 않는 브라우저에 표시됩니다.


    예제 


    <audio controls>


       <source src="파일.mp3" type="audio/mpeg"/>


    </audio>


    브라우저 지원

    요소

    크롬

    익스폴로러

    파이어폭스

    사파리

    오페라

    <audio>

    4.0

    9.0

    3.5

    4.0

    10.5


    Audio 객체의 속성

    속성 이름

    설명

    src

    재생하려는 음악 파일 경로

    volume

    음악의 음량

    음량조절은 0부터 1까지 소수점 단위로 조절할 수 있다. (:0.5)

    currentTime

    음악의 현재 위치(초 단위)


    Audio 객체의 메서드

    메서드 이름

    설명

    play()

    음악을 재생

    pause()

    음악을 일시정지

  • HTML4와 HTML5의 차이점


  • HTML4와 HTML5의 차이점은 크게 Contents Model(콘텐츠 모델), Syntax(구문),Language(언어) ,API 세가지로 나눌 수 있습니다.


    Contents Model(콘텐츠 모델)
    - HTML 이전에는 복잡한 구성을 하고 페이지를 만들었다면, HTML5 문서부터는 균형잡히고한눈에 보기 쉽도록 작성이 가능해졌습니다.

    HTML5 이전의 문서

     

    HTML5 문서

    Block Level Element

    <div>, <p>, <h1>, <h2>

     

    lnline Element

    <img>,<input>,<i>,<b>

    Contents Model

    <Header>

    </Header>

    <article>

    </article>

    <Footer>

    </Footer>

     

    Tree형태의 계층구조를 이루는 Outline 구성

     

    기존보다 더 Sementic한 웹 구성이 가능

     

    기존보다 더 Sementic한 웹 구성이 가능

    Syntax(구문) 

    - 이전보다 간소화 된 구문으로 개발자들에게 개발 편의를 제공합니다.DOCTYPE는 HTML 문서라면 최상단에 반드시 위치해야 합니다.


    - Encoding

      기존의 Encoding : <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      HTML5의 Encoding : <meta charset="UTF-8">

      기존 문자셋과 비교해 보면 무척 간단해 진 것을 알 수 있습니다.


    - 그래픽 언어의 사용

      Html5 에서는 수식기술언어 MathML, 그래픽언어 SVG 등을 사용할 수 있습니다.


    *SVG(Scalable Vector Graphics)는 2차원 그래픽을 표현하기 위해 XML을 기반으로 만들어진 언어로서 W3C(World Wide Web Consortium)에 의해 제안된 XML 그래픽 표준입니다.

    Language(언어)

    기존의 막연하고 무의미했던 Contents들이 한 층 더 유용한 정보로 변환되었습니다.

    요소

    설명

    Header

    문서의 Header 를 나타낼 때 사용한다.

    Footer

    문서의 Footer 를 나타낼 때 사용한다.

    Nav

    문서내에 Navigation 요소가 있을 때 사용한다.

    Section

    문서의 영역을 구성하며, 문서 구조를 구성하는 H1~H6 와 함께 사용한다.

    Article

    뉴스기사나 블로그 article 과 같은 독립된 Contents 를 표시할 때 사용한다.

    Aside

    주요 컨텐츠 이외의 참고가 될 수 있는 컨텐츠를 구성할때 사용한다.

    Figure

    그림, 비디오와 같은 포함된 컨텐츠의 Caption 을 표시할때 사용한다.

    Figcaption

    캡션에 사용한다.

    추가된 요소

    요소

    설명

    Audio, Video

    HTML 5 Element 중 관심이 집중되는 Element 중 하나다.

    멀티미디어 컨텐츠를 표시하는 데 사용한다.

    Embed

    Plugin 컨텐츠를 표시할 때 사용한다.

    Mark

    별도로 표시한 문자를 표시하는데 사용한다.

    Progress

    작업 진행상황을 나타낼 때 사용한다.

    Meter

    측정값을 표시할 때 사용한다.

    Time

    날짜, 시간을 표시할 때 사용한다.

    Ruby, rt, rp

    Ruby 언어를 나타낼 때 사용한다.

    Canvas

    Bitmap Graphic을 표시할 때 사용한다.

    Command

    사용자가 호출할 수 있는 명령어를 표시하는데 사용한다

    details

    사용자 요청에 따라 얻은 콘트롤이나 추가적인 정보를 표시하는데 사용한다.

    Datalist

    List Attribute 와 함께 사용하여 ComboBox 를 만들때 사용한다.

    Keygen

    키쌍(Key pair)을 생성할 때 사용한다.

    Output

    스크립트 계산 결과 같은 실행결과를 표시하는데 사용한다.

    폐지된 요소

    폐지된 요소

    내용

    표현을 다루는 요소

    basefont

    big

    center

    font

    strike

    tt

    사용성, 접근성을 해치는 요소

    frame

    frameset

    noframes

    자주 사용 안되거나 혼란을 주거나 다른 요소로 대체 가능한 요소

    acronym : 혼란을 유발하기 때문에 폐지되었고 abbr을 대신 사용할 수 있다.

    applet : object 요소가 대신할 수 있기 때문에 폐지되었다.

    isindex : 대신 폼 서식을 사용할 수 있고 폐지되었다.

    dir : ul 요소를 사용하도록 폐지되었다.

1

이메일 무단 수집 거부

팝업 닫기

본 웹사이트에 게시된 이메일 주소가 전자우편수집 프로그램이나 그밖의 기술적장치를 이용하여 무단으로 수집되는 것을 거부하며, 이를 위반시 정보통신망 이용촉진 및 정보보호등에 관한 법률에 의해 처벌 받을 수 있습니다.

닫기
TOP