전체메뉴

웹 표준 개발 FAQ

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

전체 26건 (1페이지/3페이지)

  • HTML5에서 iframe과 프레임이란 무엇인가요?

  • ∎ iframe이란


    페이지 안에 페이지를 삽입하는 방법입니다. 예를 들어 생활코딩 홈페이지인 opentutorials.org에는 유튜브가 삽입되어 있는데, 유튜브를 삽입하는 방법이 바로 iframe을 이용한 것입니다.


    - 회원가입을 하기 위해서 개인 정보를 입력할 때


    - 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때


    - 문법

      <frame src="불러올 웹페이지의 URL" scrolling="스크롤링 허용여부(yes|no|auto)">


        // iframe를 지원하지 않는 브라우저인 경우 대체정보를 제공


      </iframe>



    - src : 불러올 페이지의 URL


    - scrolling : 아이프레임 안에서 스크롤링을 허용할 것인지를 지정


        auto : 스크롤이 필요한 경우만 스크롤바를 노출 (기본 값)


        yes : 스크롤링 허용, 스크롤이 필요 없는 경우도 스크롤바를 노출


        no : 스크롤 하지 않음



    ∎ frame


    하나의 화면에서 여러 개의 페이지를 분할해서 보여줍니다.


      <frameset (cols | rows)="열 혹은 행의 크기(콤마로 구분)">


        <frame src="frame_a.htm" name="프레임의 이름">


      </frameset>


  • HTML5에서 form 태그 및 GET 방식과 POST방식이란 무엇인가요?

  • ∎ 폼(form)이란 사용자의 데이터를 서버에 전송하는 방법입니다. 일반적으로 아래와 같은 작업을 하기 위해서는 폼을 이용합니다.


    - 로그인을 위해서 아이디/비밀번호를 입력할 때


    - 회원가입을 하기 위해서 개인 정보를 입력할 때


    - 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때




    ∎ 폼(form) 문법


    form의 문법은 아래와 같습니다. 태그 안쪽에 텍스트를 입력받는 텍스트 필드나, 원하는 항목을 선택할 수 있는 라디오 버튼 등이 위치합니다.


    이러한 요소들을 컨트롤 (control)이라고 부릅니다. 사용자가 컨트롤을 조작한 후에 전송 버튼을 누르면 태그의 속성인 action에 기술된 URL로 사용자가 입력한 정보를 전송합니다.


    서버는 이 정보를 받아서 저장하거나, 계산된 결과를 보여주는 등의 작업을 수행하게 됩니다.


    - 문법

      <form action="서버로 전송한 데이터를 수신할 URL" method="데이터를 전송하는 방법">


        텍스트 필드, 라디오 버튼, 체크 박스와 같은 컨트롤을 생성하는 태그


      <form>



    - action : 사용자가 입력한 데이터를 전송할 서버의 URL


    - method : 사용자가 입력한 데이터를 전송하는 방법으로 아래와 같은 방식이 있습니다.


        get : action에 입력한 URL에 파라미터의 형태로 전송


        post : header의 body에 포함해서 전송




    ∎ GET과 POST의 차이점


    GET


    - URL에 정보가 담겨서 전송됩니다.


    - 전송할 수 있는 정보의 길이가 제한되어 있습니다.


    - 퍼머링크로 사용될 수 있습니다. → 정보를 식별하는 고유한 식별자.(고유한 주소체계)


    POST


    - header의 body에 담겨서 전송됩니다.


    - URL 상에 전달한 정보가 표시되지 않습니다.


    - GET에 비해서 보안상 약간의 우위에 있습니다.


    - 전송할 수 있는 데이터의 길이 제한이 없습니다.


    - 퍼머링크로 사용할 수 없습니다.


    - 서버 쪽에 데이터의 기록, 삭제, 수정 등의 작업을 명령할 때 사용합니다.


  • HTML5 멀티미디어에서 플러그인이란 무엇인가요?

  • ∎ HTML 플러그인이란 웹 브라우저의 표준 기능을 확장해 주는 프로그램을 의미합니다.


    가장 널리 알려진 플러그인으로는 Java Applet, Flash Player, Pdf Reader 등이 있습니다.


    이러한 플러그인은 object 요소나 embed 요소를 사용하여 HTML 문서에 추가할 수 있습니다.



    ∎ object 요소


    object 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용합니다.


    이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 또 다른 HTML 문서를 삽입할 수도 있습니다.


    - 예제


      <object data="/examples/media/sample_plugins_pdf.pdf" style="width:100%; height:700px"></object>



    또한, object 요소는 이미지를 삽입할 때에도 사용할 수 있습니다.

    - 예제

      <object data="/examples/images/img_flower.png"></object>




    ∎ embed 요소


    embed 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용합니다.


    embed 요소는 오래전부터 사용되어 왔지만, HTML5 이전까지는 HTML 표준이 아니었습니다.


    이 요소는 모든 웹 브라우저에서 동작하며, 객체뿐만 아니라 HTML 문서를 삽입할 수도 있습니다.


    - 예제


      <embed src="/examples/media/sample_plugins_pdf.pdf" style="width:100%; height:700px">



    또한, embed 요소는 이미지를 삽입할 때에도 사용할 수 있습니다.


    - 예제


      <embed src="/examples/images/img_flower.jpg" style="width:350px; height:263px">



    * embed 요소는 HTML5 이전까지는 HTML 표준이 아니었으므로, HTML5에서는 유효하지만, HTML4에서는 유효하지 않습니다.


  • HTML5 API에서 Web Worker란 무엇인가요?

  • ∎ web worker API


    웹 페이지에서 스크립트가 실행되면, 해당 웹 페이지는 실행 중인 스크립트가 종료될 때까지 응답 불가 상태가 됩니다.


    web worker는 스크립트가 웹 페이지의 성능에 영향을 미치지 않도록 백그라운드에서 동작하게 해주는 자바스크립트입니다.


    즉, web worker는 스크립트의 다중 스레드(multi-thread)를 지원합니다.


    따라서 사용자가 웹 페이지를 이용하면서도, 동시에 시간이 오래 걸리는 자바스크립트 작업도 병행할 수 있도록 해줍니다.



    web worker를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

    API 엣지 크롬 파이어폭스 사파리 오페라
    Web Storage 10.0 4.0 3.5 4.0 11.5


    ∎ web worker 지원 여부 확인


    web worker를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 합니다.


    - 문법

      if (typeof(Worker) !== "undefined") {


        // web storage를 위한 코드 부분


      } else {


        // web storage를 지원하지 않는 브라우저를 위한 안내 부분


      }



    ∎ web worker 파일 생성


    web worker의 동작을 확인하기 위해 소수를 찾는 외부 자바스크립트 파일을 만듭니다.


    - 예제

      var n = 1;


      search: while (true) {


        n += 1;


        for (var i = 2; i <= Math.sqrt(n); i += 1)


          if (n % i == 0)


            continue search;


          postMessage(n);


      }


    위의 예제에서 postMessage() 메소드는 HTML 문서에 결과를 전달하기 위해 사용합니다.



    ∎ web worker 객체 생성


    위에서 만든 web worker 파일을 불러올 HTML 파일을 만듭니다.


    - 예제

      var n = 1;


      search: while (true) {


        n += 1;


        for (var i = 2; i <= Math.sqrt(n); i += 1)


          if (n % i == 0)


            continue search;


          postMessage(n);


      }


    위의 예제는 web worker 파일이 존재하지 않으면, 새로운 web worker 객체를 만들어 줍니다.




    ∎ worker 객체와의 연결


    onmessage 이벤트 리스너(event listener)를 통해 web worker 파일과 메시지를 주고받을 수 있습니다.


    - 예제

      webworker.onmessage = function(event) {


          document.getElementById("result").innerHTML = event.data;


      };


    위의 예제에서 web worker 파일이 메시지를 보내면 해당 이벤트 리스너(event listener)가 실행됩니다.


    이 때 web worker 파일이 보낸 정보는 event.data에 저장됩니다.



    ∎ web worker 객체의 실행 종료


    web worker 객체는 생성되고 나서 종료될 때까지 계속해서 메시지를 받을 준비를 합니다.


    따라서 웹 브라우저나 컴퓨터의 자원을 돌려주기 위해서는 terminate() 메소드를 사용하여 web worker를 반드시 종료해줘야 합니다.


    - 예제

      webworker.terminate();




    ∎ web worker 객체의 재사용


    web worker 객체가 종료된 후에는 web worker의 값을 undefined로 설정해야만 web worker 객체를 재사용할 수 있습니다.


    - 예제

      webworker = undefined;




    ∎ web worker 예제


    다음 예제는 앞에서 살펴본 web worker의 동작을 하나의 예제로 보여주는 예제입니다.


    - 예제

      var webworker;


      function startWorker() {


        if(typeof(Worker) !== "undefined") {


          if(typeof(webworker) == "undefined") { webworker = new Worker("/examples/web_worker.js");


      }


          webworker.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; };


        }


      }


      function stopWorker() {


        webworker.terminate();


        webworker = undefined;


      }




  • HTML5에서 darg and drop API란 무엇인가요?

  • ∎ drag and drop API는 웹 페이지 내의 요소를 사용자가 자유롭게 드래그할 수 있도록 설정해줍니다.


    HTML5 이전에 이와 같은 기능을 구현하기 위해서는 엄청나게 많고 복잡한 스크립트를 작성해야 했습니다.


    하지만 HTML5에서는 drag and drop 기능이 표준 권고안에 포함되어 간단하게 사용할 수 있게 되었습니다.


    현재 주요 웹 브라우저들은 모두 이 기능을 지원하며, 따라서 웹 페이지 내의 모든 요소는 드래그될 수 있습니다.


    드래그 앤 드롭 API를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

    API 엣지 크롬 파이어폭스 사파리 오페라
    geolocation 9.0 4.0 3.5 6.0 12.0


    ∎ darg and drop 이벤트란?


    마우스로 객체(object)를 드래그해서 놓을 때까지 여러 단계의 이벤트가 순차적으로 발생하게 됩니다.


    다음 표는 drag and drop시 일어나는 이벤트를 순서대로 보여줍니다.



    ∎ Geolocation API 메소드


    이벤트 설명
    dragstart 사용자가 객체(object)를 드래그하려고 시작할 때 발생함.
    dragenter 마우스가 대상 객체의 위로 처음 진입할 때 발생함.
    dragover 드래그하면서 마우스가 대상 객체의 위에 자리 잡고 있을 때 발생함.
    drag 대상 객체를 드래그하면서 마우스를 움직일 때 발생함.
    drop 드래그가 끝나서 드래그하던 객체를 놓는 장소에 위치한 객체에서 발생함.
    dragleave 드래그가 끝나서 마우스가 대상 객체의 위에서 벗어날 때 발생함.
    dragend 대상 객체를 드래그하다가 마우스 버튼을 놓는 순간 발생함.


    ∎ DataTransfer 객체


    드래그 앤 드롭 이벤트를 위한 모든 이벤트 리스너 메소드(event listener method)는 DataTransfer 객체를 반환합니다.


    이렇게 반환된 DataTransfer 객체는 드래그 앤 드롭 동작에 관한 정보를 가지고 있게 됩니다.



    ∎ draggable 속성


    웹 페이지 내의 모든 요소는 draggable 속성을 사용하여 드래그될 수 있는 객체(draggable object)로 변환될 수 있습니다.



    ∎ ondragstart 속성


    드래그될 수 있는 객체로 만든 후에는 ondragstart 속성을 통해 DataTransfer 객체의 setData() 메소드를 호출합니다.


    setData() 메소드는 드래그되는 대상 객체의 데이터(data)와 타입(data type)을 설정합니다.



    ∎ ondragover 속성


    ondragover 속성은 드래그되는 대상 객체가 어느 요소 위에 놓일 수 있는지를 설정합니다.


    기본적으로 HTML 요소는 다른 요소의 위에 위치할 수 없습니다.


    따라서 다른 요소 위에 위치할 수 있도록 만들기 위해서는 놓일 장소에 있는 요소의 기본 동작을 막아야만 합니다.


    이 작업을 event.preventDefault() 메소드를 호출하는 것만으로 간단히 설정할 수 있습니다.



    ∎ ondrop 속성


    드래그하던 객체를 놓으면 drop 이벤트가 발생합니다.


    ondrop 속성을 이용하여 drop 이벤트에 대한 동작을 설정할 수 있습니다.


    - 예제

      function dragEnter(ev) { ev.preventDefault(); }


      function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }


      function drop(ev) {


        ev.preventDefault();


        var data = ev.dataTransfer.getData("text");


        ev.target.appendChild(document.getElementById(data));


      }

  • HTML5에서 geolocation API란 무엇인가요?

  • ∎ 웹 geolocation API는 사용자의 현재 위치 정보를 가져올 때 사용하는 자바스크립트 API입니다.


    사용자의 위도 및 경도에 관한 정보는 자바스크립트를 이용해 웹 서버로 전송됩니다.


    이것을 이용하면 사용자의 위치를 지도에 표시하거나, 사용자 근처의 상점을 찾아주는 등의 위치기반 서비스를 할 수 있습니다.

    하지만 이러한 정보는 사용자의 사생활을 침해할 가능성이 높으므로, 사용자의 동의 없이는 사용할 수 없도록 하고 있습니다.

    API 엣지 크롬 파이어폭스 사파리 오페라
    geolocation 9.0 5.0-49.0(http)
    50.0 (https)
    3.5 5.0 16.0


    ∎ getCurrentPosition() 메소드란


    getCurrentPosition() 메소드를 이용하면 사용자의 위치에 대한 위도와 경도값을 얻을 수 있습니다.


    이 메소드의 첫 번째 인수로는 가져온 사용자의 위치 정보를 출력하는 함수가 들어갑니다.



    ∎ Geolocation API 메소드


    Method 설명
    getCurrentPosition() 사용자의 현재 위치를 가져옴
    watchPosition() 사용자의 현재 위치를 가져오고 나서, 사용자의 움직임에 따라 지속적으로 위치 정보를 갱신함
    clearWatch() watchPosition() 메소드의 실행을 중지함


    ∎ getCurrentPosition() 메소드의 반환값


    속성 반환값
    coords.latitude 소수로 표현된 위도 값
    coords.longitude 소수로 표현된 경도 값
    coords.accuracy 위도 값과 경도 값의 정확도
    coords.altitude 평균 해수면을 기준으로 하는 고도 값(해발)
    coords.altitudeAccuracy 고도 값의 정확도
    coords.heading 북쪽을 기준으로 현재 진행 방향에 대한 시계방향으로의 각도 값(˚)
    coords.speed 초당 이동한 미터 수를 나타내는 속도 값(초속)
    timestamp 위치 정보를 가져온 시간을 나타냄.

    - 예제

      function findLocation() {


        if (navigator.geolocation) {


          navigator.geolocation.getCurrentPosition(showYourLocation);


        } else {


          loc.innerHTML = "이 문장은 사용자의 웹 브라우저가 Geolocation API를 지원하지 않을 때 나타납니다!";


        }


      }

  • HTML5 API에서 Web Storage란 무엇인가요?

  • ∎ 웹 스토리지


    - 웹 스토리지 (web storage)


    서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능입니다.
    웹 스토리지와 쿠키의 기능 자체는 유사하지만, 쿠키는 약 4KB까지 밖에 저장 공간을 이용하지 못하는 반면에 웹 스토리지는 약 5MB까지 저장 공간을 이용할 수 있습니다.



    웹 스토리지에는 로컬 스토리지(local Storage)와 세션 스토리지(session Storage)가 있습니다.
    로컬 스토리지와 세션 스토리지는 각각의 고유한 특성이 있으며, 프로그래머의 필요에 따라 선택적으로 사용됩니다.



    -로컬 스토리지


    로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지됩니다. 브라우저 자체에 반영구적으로 데이터가 유지되지만, 도메인 (domain)이 다른 경우에는 로컬 스토리지에 접근할 수 없습니다.



    -세션 스토리지


    세션 스토리지는 각 세션마다 데이터가 개별적으로 저장됩니다. 예를 들어, 브라우저에서 여러개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장되는 것입니다. 세션 스토리지는 로컬 스토리지와 다르게 세션을 종료하면 데이터가 자동으로 제거되며, 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없습니다.



    ∎ 웹 스토리지와 쿠키


    웹 스토리지 API는 기존 쿠키(cookie)의 문제점을 극복하기 위해 웹 브라우저가 직접 데이터(data)를 저장할 수 있게 해줍니다.



    HTML5 이전에는 응용 프로그램이 데이터를 서버에게 요청할 때마다 매번 쿠키(cookie)라는 곳(4KByte)에 그 정보를 저장하여 통신합니다. 개인 형태 정보를 수집한 쿠키들이 통신 시 노출될 수 있는 등 보안에 취약합니다. 하지만 웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있도록 해줍니다. 웹 스토리지는 최소 5MB 이상의 많은 공간을 가지고 있으며, 이 정보는 절대 서버로 전송되지 않습니다.



    이러한 웹 스토리지는 오리진(origin)마다 단 하나씩만 존재합니다.
    오리진(origin)이란 도메인(domain)과 프로토콜(protocol)의 한 쌍으로 이루어진 식별자입니다.
    따라서 하나의 오리진에 속하는 모든 웹 페이지는 같은 데이터(data)를 저장하며 또한 같은 데이터에 접근할 수 있습니다.



    웹 스토리지를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

    API 엣지 구글 파이어폭스 사파리 오페라
    Web Storage 8.0 4.0 3.5 4.0 11.5

    ∎ 웹 스토리지 지원 여부 확인


    웹 스토리지를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 합니다.


    <문법>

      if (typeof(Storage) !== "undefined") {


        // web storage를 위한 코드 부분


      } else {


        // web storage를 지원하지 않는 브라우저를 위한 안내 부분


      }



    ∎ 웹 스토리지 객체


    웹 스토리지 API는 사용자가 데이터를 저장할 수 있도록 두 가지 객체를 제공합니다.


    - localStorage 객체 : 보관 기한이 없는 데이터를 저장할 수 있는 객체


    - sessionStorage 객체 : 하나의 세션(session)만을 위한 데이터를 저장하는 객체



    * localStorage 객체는 보관 기한이 없는 데이터를 저장합니다.


    따라서 브라우저 탭이나 창이 닫히거나, 컴퓨터를 재부팅 해도 저장된 데이터는 없어지지 않습니다.



    * sessionStorage 객체는 하나의 세션(session)만을 위한 데이터를 저장합니다.


    따라서 사용자가 브라우저 탭이나 창을 닫으면 이 객체에 저장된 데이터는 사라집니다.

  • HTML5 API에서 Application Cache 란 무엇인가요?

  • ∎ application cache API


    application cache API는 웹 응용 프로그램을 캐시(cache) 하여, 인터넷 접속 없이 사용자가 접근할 수 있게 해줍니다.



    따라서 application cache를 사용하면 웹 응용 프로그램의 오프라인 버전을 쉽게 만들 수 있습니다.



    application cache를 사용해서 생기는 장점은 다음과 같습니다.



    - 오프라인 접속 : 사용자가 웹 응용 프로그램을 오프라인(off-line)으로도 사용할 수 있습니다.


    - 속도 : 캐시(cache)된 자원은 빠르게 로드(load)할 수 있습니다.


    - 서버의 부하 감소 : 웹 브라우저는 서버의 자원에 변동이 있을 때만 자원을 갱신하면 됩니다.



    application cache를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

    API 엣지 구글 파이어폭스 사파리 오페라
    application cache 10.0 4.0 3.5 4.0 11.5

    ∎ cache manifest 파일


    application cache를 사용하기 위해서는 먼저 cache manifest 파일을 작성해야 합니다.


    cache manifest 파일은 웹 브라우저에 캐시(cache) 해야 할 파일과 캐시하지 말아야 할 파일을 알려줍니다.



    이러한 mainfest 파일은 다음과 같이 세 개의 세션(session)으로 이루어집니다.



    - CACHE MANIFEST : 처음 다운로드한 이후에 계속 캐시할 파일들을 기록합니다.


    - NETWORK : 서버와의 접속이 필요한 파일들을 기록하며, 이 파일들은 절대로 캐시되지 않습니다.


    - FALLBACK : 파일에 접속할 수 없을 때에 대체할 파일들을 기록합니다.



    ∎ 캐시(cache)의 갱신


    웹 브라우저는 다음과 같은 경우가 발생하면 캐시(cache)의 정보를 갱신하게 됩니다.



    - 사용자가 웹 브라우저의 캐시를 강제로 지웠을 경우


    - application cache가 프로그램 때문에 갱신됐을 경우



    - cache manifest 파일이 수정됐을 경우


    한 번 캐시 되면 서버상의 파일을 수정해도, 웹 브라우저는 사용자 측에 캐시 되어 있는 버전의 파일만을 보여줍니다.


    따라서 서버상의 파일을 수정한 후에는 반드시 웹 브라우저가 캐시를 갱신하도록 만들어야 합니다.



    이 때 가장 많이 사용되는 방법이 cache manifest 파일 내의 주석 부분을 수정하는 것입니다.


    일반적으로 갱신 날짜 및 버전 정보를 주석으로 표시하고, 이 부분을 수정하여 웹 브라우저가 캐시를 갱신하도록 유도합니다.


  • HTML5 문서페이지에 CSS를 적용시키는 방법은 무엇인가요?

  • 1. 내부 스타일 시트


    HTML문서내에서 <head>와 </head>사이에 스타일을 정의하는 방법입니다.


      <head>
        <style type="text/css">
        <!--
          body {font-size:9pt;}
        //-->
        </style>
      </head>

    HTML문서마다 스타일을 매번 지정해 주어야 하지만, 한 문서에만 해당되는 스타일을 지정할때 사용하면 됩니다.



    2.외부 스타일 시트


    css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다.


      <link rel="stylesheet" type="text/css" href="mystyle.css">

    이 방법의 장점은 홈페이지 전체의 스타일을 일관성있게 유지하면서 변경시에도 일괄적으로 변경되므로 홈페이지 제작의 효율성을 극대화 할 수 있습니다.


    반면 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경우가 있습니다. 그리고 외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 css파일을 관리하는 노하우가 필요합니다.


    그럼에도 불구하고 전문적인 홈페이지를 만들려면 외부 스타일 시트를 적극적으로 활용해야 합니다.



    3.HTML태그내에 스타일 지정


    위의 방법들에 비해서 적용범위가 더욱 좁아진 형태입니다. 스타일을 적용하고 싶은 HTML태그안에서 정의하는 방법입니다.


      <p style="color:gray;">이 문단의 색상은 회색으로 지정됩니다.</p>

    내용과 스타일의 분리 그리고 이로 인한 스타일 일괄변경의 효율성 측면으로 볼때는 바람직하지 않는 방법입니다.


    그러나 위의 소스에서도 보듯이 직관적으로 사용이 가능하다는 장점이 있습니다.


  • HTML5의 설계원칙은 무엇인가요?

  •  HTML5는 다음과 같이 호환성, 실용성, 상호운용성, 보편적 접근성을 염두하고 설계해야 합니다.



    ▷ 호환성


    호환성이란 하드웨어나 소프트웨어를 다른 종류의 컴퓨터나 장치에서도 변경하지 아니하고, 그대로 사용할 수 있는 성질로서 다음과 같은 특징을 지닙니다.


    · 첫째 , 콘텐츠의 호환성입니다. 콘텐츠의 호환성은 HTML5 이전 버전에서 제작된 콘텐츠도 문제없이 구동되는 것을 말합니다.

    · 둘째 , 이전 브라우저와의 호환성입니다. 이전 브라우저와의 호환성은 HTML5가 지원되지 않은 이전 버전의 브라우저에서도 이용할 수 있는 것을 말합니다.

    · 셋째 , 기능의 재사용입니다. 각 브라우저에서 구현된 서로 다른 기능들을 HTML5라는 이름 아래 공통된 사양으로 정의하여 브라우저들간의 호환성을 가져야 합니다.

    · 넷째 , 이용방법의 호환성입니다. 이는 기존에 사용하던 HTML Tag의 사용법을 그대로 사용할 수 있어야 함을 의미합니다.

    · 다섯째 , 혁신보다는 발전을 우선시 한다는 점입니다. HTML5의 버전업은 새로운 MarkUP Languege를 구현하는 것이 아니라 기존에 존재하던 HTML의 개량을 우선시 합니다.



    ▷ 실용성


    실용성이란 실제적인 쓸모가 있는 성질이나 특성을 말하는 것으로서 웹 현장에서 필요로 하는 것들을 중점적으로 진행해야 합니다. 이러한 중점적 우선순위는 사용자, 개발자, 브라우저 개발자, 사양서, 이론상의 순수함의 순서로 하며, 보안성을 고려하며 새로운 사양을 개발해야 합니다.



    ▷ 상호운용성


    상호운용성이란 웹 개발자가 브라우저의 차이를 의식하지 않더라도 HTML5를 적용한 브라우저라면 똑같이 동작하도록, 가능한 쓸데없이 복잡한 것들은 없애는 원칙을 말합니다.

    예를 들어 개발자가 HTML5로 작성된 프로그램은 최대한 간단하게 작성해야 하며, 인터넷 익스플러로, 파이어폭스, 크롬, 사파리 등과 같이 어떠한 브라우저에서 동작이 되어야 합니다.



    ▷ 보편적 접근성


    마지막으로 보편적 접근성은 모든 사람이 다양한 조건의 환경에서 다양한 장치를 이용하여 웹 콘텐츠에 접근할 수 있도록 보장하는 것을 말합니다.

    여기서 말하는 다양한 조건의 환경이란 신체적 조건은 물론 외부 환경까지도 포함하며, 다양한 장치는 하드웨어와 소프트웨어까지 포함된 범주를 가집니다. 따라서 데스크 탑 환경의 웹 브라우징 장치나, 모바일 기기, 그리고 장애인들이 사용하는 보조기는 보편적 접근성의 다양한 정치에 해당된다 할 수 있습니다.




    HTML5의 설계 원칙은 HTML5의 사용자 또는 개발자라면 반드시 알아야 하는 사항들입니다.

123

이메일 무단 수집 거부

팝업 닫기

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

닫기
TOP