전체메뉴

웹 표준 개발 FAQ

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

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

  • HTML5의 주요기능에는 어떠한 것들이 있나요?

  • HTML5 에는 기존의 HTML 과는 다른 다음과 같은 특징을 가지고 있습니다.


    구분 특징
    Device Access 카메라, 동작센서 등의 H/W 기능을 웹에서 직접적으로 제어
    CONNECTIVITY(Web Socket) 웹 (클라이언트)에서 서버 측과 직접적인 양방향 통신 가능
    3D, GRAPHICS & EFFECTS 다양한 2차원 및 3차원 그래픽 기능을 지원
    Styling Effects(CSS3) 글씨체, 색상, 배경 등 다양한 스타일 및 이펙트 기능 제공
    MULTIMEDIA 비디오 및 오디오 기능을 자체적으로 지원
    OFFLINE & STORAGE 네트워크 미지원 환경에서도 웹 이용을 가능하게 함
    Geo-Location GPS없이도 단말기의 지리적인 위치 정보를 제공
    SEMANTICS 웹 자료에 의미를 부여하여 사용자 의도에 맞는 맞춤형 검색 제공

    그리고 HTML5 설계에 호환성 원칙을 두고 있습니다.



    HTML5 디자인 원칙 : 호환성


     · 콘텐츠의 호환성 : HTML5 이전 버전으로 제작한 콘텐츠도 문제없이 이용 가능해야 한다.


     · 이전 브라우저와의 호환성 : HTML5 가 지원되지 않는 이전 버전의 브라우저에서도 이용 가능해야 한다.


     · 이용 방법의 호환성 : 기존에 HTML 태그 사용법을 최대한 사용가능하도록 해야 한다.


     · 기능의 재사용 : 각각의 브라우저에서만 사용 가능한 기능들을 통합하여 공통적으로 사용할 수 있어야 한다.


     · 혁신보다는 발전을 우선 : HTML5는 새로운 언어를 구현하는 것이 아니므로 이미 사용 중인 HTML을 보다 사용하기 쉽도록 재구성하도록 한다.

  • HTML5의 API는 무엇이 있나요?

  • ▷ 다음의 사항들은 새롭게 사용할 수 있도록 고안된 API입니다.

    API 설명
    Web Storage 웹 브라우저 안에 로컬 저장 공간을 이용해서 데이터를 저장할 수 있다. 오프라인 상태에서도 웹 사이트나 앱을 사용할 수 있도록 해준다.
    Indexed DB 인덱스를 이용해 저장하고 검색할 수 있는 웹 DB를 만든다
    App Cache 쿠키보다 용량이 큰 캐시공간을 두어 일시적인 데이터를 저장할수 있고, 오프라인 상태에서도 웹/앱을 사용할 수 있도록 만든다.
    Audio, Video 별도의 플러그인 없이도 웹상에서 멀티미디어를 재생하고 플레이어를 제어할 수 있다.
    Geolocation 자바스크립트로 만든 웹상에서 픽셀단위의 그래픽을 그리고 조작할 수 있다.
    Web Socket server와 client 사이에 실시간으로 데이터를 주고받을 수 있다.
    Drag and Drop 화면상에서 특정 요소를 끌어 옮길 수 있다.
    Web Worker 시간이 많이 걸리는 작업을 웹 브라우저 백 그라운드에서 실행하게 함으로서 멀티 스레드가 가능하도록 만든다.


    그리고 기존의 API 아래와 같은 사항들을 확장하였습니다.


    HTMLDocument 확장사항


    DOM Level2 HTML 의 HTMLDocument interface를 확장


    getElementsByClassName() Class Name 으로 Element 를 선택할 수 있다.
    innerHTML HTML 또는 XML 문서를 분석하고 직렬화하는 쉬운 방법이다.
    activeElement,hasFocus Element 가 현재 Focus 되어 있는지, "Document" 가 Focus 되어있는지 여부를 확인한다.
    getSelection() 현재 선택되어있는 Object 를 반환한다.

    ▷ HTMLElement 확장사항


     HTML5 의 HTMLElement interface 는 몇 가지 확장사항들이 있습니다.


     · getElementsByClassName()


     · innerHTML


     · classList 는 ClassName 에 편리하게 접근할 수 있는 접근자다. Element 의 Class 들을 조작하기 위해서 has(), add(), remove(), toggle()과 같은 함수를 노출한다.

  • 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>


      <h1>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 및 OGG의 3 가지 비디오형식이 지원 됩니다.

    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한 웹 구성이 가능


    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 HTML5 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 : 혼란을 유발하기 때문에 페지되었고 addr을 대신 사용 할 수 있다.


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


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


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

1

이메일 무단 수집 거부

팝업 닫기

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

닫기
TOP