전체메뉴

웹 표준 개발 FAQ

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

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

  • 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