전체메뉴

웹 표준 개발 FAQ

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

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

  • HTML5에서 추가된 태그 중에서 콘텐츠 그룹화 태그(Grouping content Tag)는 무엇인가요?

  • ∎ 콘텐츠 그룹화 태그에서 추가된 태그는 <figure>, <figcation>태그가 있습니다.


    <figure>태그는 캡션을 붙일 대상을 지정합니다.

    <figure>태그는 이미지, 다이어그램, 비디오, 텍스트 단락과 같은 멀티미디어 요소를 묶을 수 있으며 태그 안에 <img>태그나 <code>태그와 같은 다른 태그도 사용이 가능합니다.

    <figure> 태그의 사용법은 다음과 같이 <figure>엘리먼트로 시작해서 캡션을 붙일 요소를 지정하고 </figure>엘리먼트로 종료합니다.

    다음 <figcaption>태그는 <figure> 태그를 사용하여 지정한 대상에 캡션 내용을 붙이는 태그입니다.

    <figcaption>태그는 꼭 사용해야 하는 태그는 아니지만 사용할 때에는 반드시<figure>태그 다음에 사용해야 합니다.

    <figcaption> 없이 <figure>태그를 사용하는 것은 브라우저에게 미디어가 있다는 것을 알려주기 위한 것입니다.

    <figcaption> 태그의 사용법은 다음과 같이 <figcaption> 엘리먼트로 시작해서 내용을 적고 </figcaption>엘리멘트로 종료합니다.

    figure 실습


  • HTML5에서 추가된 태그 중에서 텍스트 태그(Text-level semantics Tag)는 무엇인가요?

  • ∎ 텍스트 태그에서 추가된 태그는 <bdi>,<mark>,<ruby>,<time>, <wbr>이 있습니다.


    <bdi>는 텍스트 방향을 주위와는 별도로 표시하도록 지시하는데 사용하며, 사용자가 텍스트의 방향성을 모를 때 사용하면 유용한 태그로 브라우저가 <bdi> 태그의 텍스트를 보고 방향성을 판단하여 화면에 출력하게 됩니다.

    그러나 자동으로 텍스트방향을 제어하다 보니 해석 오류로 인해 비정상적으로 출력될 수도 있기 때문에 w3c는 <bdi>태그의 사용을 텍스트의 방향성을 정말 알 수 없고, 서버 쪽에서 사용할 수 있는 더 좋은 알고리즘이 없을 때 최후의 보루로 사용하기를 권하고 있습니다.

    다음과 같이 한글과 영어 그리고 아랍어의 인사말을 <bdi>태그로 묶으면 이러한 결과창이 나옵니다. 한글과 영어 그리고 아랍어의 인사말이 정확히 적혀있어 결과창의 인사말도 그대로 출력되는 것을 확인할 수 있습니다.


    bdi 실습


    <mark>는 텍스트를 하이라이트 형태로 표시하며 특정한 단어나 일부분을 강조하고 싶을 때 사용하는 태그입니다.

    보통은 텍스트의 배경을 형광색으로 표시하는데 크롬 브라우저의 경우에는 노란색으로 배경을 표시하며, 텍스트의 배경색은 <style>태그를 사용 바꿀 수 있습니다.

    예제를 통해 <mark>태그의 사용법에 대해 자세히 알아보겠습니다. 예제에서는 주어진 문장 속에 있는 우유를 마크로 묶었습니다.

    그리고 그 결과값을 확인해 보니 우유의 배경이 노란색으로 바뀐 것을 볼 수 있습니다.

    <style> 태그를 이용하여 배경색을 바꾸는 방법도 익혀두면 유용하게 사용할 수 있습니다.


    mark 실습


    <ruby>는 동아시아 타이포그래피에 사용되는 루비 주석을 지정하는데 사용되는 태그입니다.

    <ruby> 태그에는 <rt>나 <rp>태그를 하나 이상 포함하게 되는데 <rt>는 작은 글씨를 주석으로 나타내는 태그이며, <rp>태그는 <rt>태그를 지원하지 않는 브라우저에서 괄호 안에 주석을 표현하게 하는 태그입니다.

    브라우저에서 <rt>태그를 지원한다면 <rp> 태그의 값은 표시되지 않습니다. 예제의 화면은 대한민국 한글 표기를 한자표기 위에 주석으로 나타내는 소스입니다.

    결과창을 보니 대한민국이라는 한글이 한자 위에 주석으로 표시된 것을 볼 수 있습니다.

    소스에서는 rp값으로 양쪽 괄호를 사용하였는데, 만약 브라우저에서 <rt>태그를 지원하지 않는다면 이 소스의 결과는 다음과 같이 괄호 안에 주석을 표시하게 됩니다.


    ruby 실습


    <time>은 HTML 문서 내의 날짜 및 시간을 선언하는데 사용됩니다. 하지만 웹 문서에서 날짜나 시간을 자동으로 표시해주는 것은 아닙니다.

    <time>태그를 사용하는 이유는 <time>를 사용하면 모든 브라우저에서 해당 내용을 정확히 인식할 수 있기 때문입니다.

    그리하여 검색 사이트에서 검색 대상을 날짜나 시간으로 제한했을 때 원하는 정보를 검색할 수 있게 해줍니다.

    datetime속성을 이용하여 날짜와 시간 모두를 인식하게 할 것인지 아니면 날짜와 시간을 각각 따로 인식하게 하거나 정확하게 인지할지를 지정할 수 있습니다.

    다음과 같이 시간요소를 <time> 태그로 묶어서 사용하며, 결과 창은 다르지 않게 표시되지만 브라우저에서는 10시를 시간요소로 인식하고 있음에 의미가 있습니다.


    time 실습


    <wbr>은 강제로 원하는 위치에서 줄 바꿈을 하고자 할 때 사용되는 태그입니다.

    강제로 줄 바꿈을 한다는 것은 <nobr>태그 안에서 사용됨을 의미합니다.

    <nobr> 태그는 화면 크기에 따라 줄이 바뀌는 것을 방지하는 태그로 이 태그를 사용하면 화면 밖의 내용은 스크롤을 사용하여 나타냅니다.

    이때 <wbr> 태그를 사용하면 원하는 위치에서 줄 바꿈을 할 수 있으며, <wbr> 태그로 묶인 부분부터 줄이 바뀐다는 점을 유의해서 위치를 조정하면 됩니다.

    예제를 통해 살펴보겠습니다. 다음은 <nobr> 태그와 <wbr> 태그를 이용한 소스입니다.

    결과 창을 보면 <wbr> 태그로 묶인 부분부터 줄이 바뀌어 나타난 것을 확인할 수 있습니다.


    wbr 실습


  • HTML5에서 추가된 태그 중에서 폼 태그(Form Tag)는 무엇인가요?

  • ∎ HTML5가 등장하면서 새로운 태그들이 추가 되었습니다.


    새로운 태그들이 등장하면서 사용자가 프로그램 코드를 작성하기가 더 편리해졌고, 문서의 구조도 기존과는 큰 차이가 없습니다.


    폼 태그에서 새롭게 추가된 태그는 <datalist>, <keygen>, <meter>, <output>, <progress>입니다.


    <datalist>는 <input>태그와 함께 사용하며 미리 정의된 옵션의 드롭 다운 목록을 지정할 때 사용합니다.


    다음과 같이 소스를 입력하면 이런 결과창이 나오게 되며 네모 칸에 마우스를 가져가서 클릭을 하면 다음과 같이 option value로 지정했던 목록들이 아래로 나열됩니다.


    목록들 중에 하나를 선택하면 빈 칸에 선택한 목록이 자동으로 채워집니다.


    datalist 실습


    <keygen>은 인증서 관리 시스템과 웹 폼을 처리하는 데 사용되며, 보안 키를 생성하고 공개 키를 제출합니다.


    이때, 개인 키는 로컬에 저장되고 공개 키는 서버로 전송됩니다. 의 대표적인 속성으로 Keytype, Name, Challenge가 있습니다.


    Keytype은 생성된 키의 형식을 지정하는 속성으로 기본값은 RSA로 설정됩니다. Name은 엘리먼트의 이름이며 Challenge는 공개키와 함께 전송되는 챌린지 문자열을 나타내는 속성입니다.


    keygen 실습


    <meter>는 알려진 범위 내에서 스칼라 측정 또는 소수 값을 나타내는데 사용되며, 웹 페이지에 그래픽 형식에서 데이터를 표시 할 때 유용한 태그입니다.


    <meter> 태그는 익스플로러와 사파리에서는 실행되지 않음에 유의해야 합니다.


    다음과 같이 소스창에 meter 태그를 이용하면 이러한 결과 창이 뜨게 됩니다. 예제에서는 두 개의 meter 태그를 사용하였는데, 첫 번째 meter 태그의 meter 값은 2이며 최소값은 0이고 최대값은 10입니다.


    이것을 meter 태그를 이용해 0~10 중 2값 만큼을 그래프로 나타낸 것입니다. 다음 두 번째 줄의 meter태그는 100% 중 60%만 그래프로 나타낸 것입니다.


    meter 실습


    <output>은 스크립트에 의해 수행 계산의 결과를 나타내는 태그입니다.


    <output> 태그를 사용해도 화면에는 다르게 표시되지 않지만 이 태그로 묶인 부분이 일반 텍스트가 아닌 계산의 결과 값이라는 것을 브라우저에서 정확히 인식할 수 있습니다.


    <output> 태그에서 많이 사용되는 속성은 for와 name으로 for는 계산에 사용되는 요소들의 ID를 지정하며 name은 엘리먼트의 이름을 지정하는 속성입니다.


    <output> 태그는 다음과 같이 <output [속성=“속성 값”]> 내용 </output>으로 사용합니다.


    output 실습


    <progress>는 작업의 진행 상황을 나타내는 태그입니다. Progress의 속성은 value와 맥스가 있습니다.


    Value는 작업이 얼마나 진행되었는지를 나타내며, max는 작업이 완료되는 양을 나타내는 속성입니다. 이 두 속성 모두 부동 소수점으로 표현합니다. 다음과 같은 소스를 입력하면 이러한 결과창이 뜨게 됩니다.


    예제에서는 value 값을 680으로 max 값을 1000으로 했으며, 그것을 1000의 680만큼의 진행상황을 그래프로 표시되었습니다.


    progress 실습

  • HTML5에서 jetty를 이용한 WebSocket 서버를 구현하는 방법은 무엇인가요?

  • ∎ 어플리케이션에 Servlet Container 이외도 여러 가지 서버 기능을 내장할 수 있는 jetty 라이브러리를 이용해 WebSocket 서버를 구현하는 코드에 대한 뼈대를 정리합니다.

    WebSocket는 HTML5에서 지원하는 기능으로 서버와 클라이언트는 연결되어 있는 상태에서 상호간에 데이터를 주고니 받거니 할 수 있는 기술입니다.

    WebSocket은 그 막강한 통신 기능에 비해 서버와 클라이언트의 코드가 매우 작습니다.



    먼저 서버 단의 코드입니다. Server를 구동하는 클래스와 WebSocket를 통해 접속하는 클라이언트를 나타내는 Session 범위의 클래스인데, 먼저 Server를 구동하는 클래스는 아래와 같습니다.


       import org.eclipse.jetty.server.Server;


       import org.eclipse.jetty.server.handler.ContextHandler;


       import org.eclipse.jetty.websocket.server.WebSocketHandler;


       import org.eclipse.jetty.websocket.servlet.WebSocketServletFactory;


       public class test_webSocket {


           public static void main(String[] args) {


               Server server = new Server(8080);


               


               WebSocketHandler wsHandler = new WebSocketHandler() {


                   @Override


                   public void configure(WebSocketServletFactory factory) {


                       factory.register(MyEchoSocket.class);


                   };


               };


               ContextHandler context = new ContextHandler();


               context.setContextPath("/echoServer");


               context.setHandler(wsHandler);


               


               server.setHandler(context);


               try {


                   server.start();


                   server.join();


               } catch (Exception e) {


                   e.printStackTrace();


               }


           }


       }


    그리고 다음은 서버에 접속하는 클라이언트(Session 객체로 구분) 마다 생성되는 Echo 기능을 갖는 MyEchoSocket 클래스입니다.


       import org.eclipse.jetty.websocket.api.Session;


       import org.eclipse.jetty.websocket.api.WebSocketListener;


       public class MyEchoSocket implements WebSocketListener {


           private Session outbound;


           


           public MyEchoSocket() {


               System.out.println("class loaded " + this.getClass());


           }


           @Override


           public void onWebSocketConnect(Session session) {


               this.outbound = session;        


           }


           @Override


           public void onWebSocketError(Throwable cause)


           {


               cause.printStackTrace(System.err);


           }


           @Override


           public void onWebSocketText(String message)


           {


               if ((outbound != null) && (outbound.isOpen()))


               {


                   String echoMessage = outbound.hashCode() + " : " + message;


                   outbound.getRemote().sendString(echoMessage, null);


               }


           }


           @Override


           public void onWebSocketBinary(byte[] payload, int offset, int len)


           {


               //.


           }


           @Override


           public void onWebSocketClose(int statusCode, String reason)


           {        


               System.out.println("Close, statusCode = " + statusCode + ", reasone = " + reason);


               this.outbound = null;


           }    


       }


    요즘 웹이 그렇듯이 WebSocket 기술은 Binary 데이터도 주고 받을 수 있다는 것을 알 수 있습니다.

    중요한 것은 클라이언트 하나가 접속을 하면 위의 클래스가 매번 생성된다는 것이고, 클라이언트는 Session 객체를 통해 나타내지며,

    이 객체를 통해 데이터를 주고 받을 수 있습니다.



    서버를 살펴봤으니, 이제 클라이언트 코드를 살펴보겠습니다.


       <meta charset="utf-8">


           <title></title>


       


       


           <form>


               <input id="messageField" type="text">


               <input onclick="sendMsg();" value="send" type="button">


           </form>


           


        <div id="msg-box" style="width:500px;height:400px;background:#eee;overflow:auto;margin-top:5px;"></div>


       


           <script>


               ...


           </script>


    윗 부분에 들어가는 js 코드는 다음과 같습니다.


      var webSocket = new WebSocket("ws://localhost:8080/echoServer/");


            var msgField = document.getElementById("messageField");


            var divMsg = document.getElementById("msg-box");


            function sendMsg() {


                var msgToSend = msgField.value;


                webSocket.send(msgToSend);


                divMsg.innerHTML += "<div style="color:red">Client> " + msgToSend + "</div>";


                msgField.value = "";


            }


            webSocket.onmessage = function (message) {


                divMsg.innerHTML += "Server> : " + message.data;


            }


            webSocket.onopen = function () {


                alert("connection opened");


            }


            webSocket.onclose = function () {


                alert("connection closed");


            }


            webSocket.onerror = function (message) {


                alert("error: " + message);


            }


  • HTML5에서 로컬파일을 자유롭게 읽을 수 있는 File API는 무엇인가요?

  • ∎ HTML5에서 제공하는 기능 중 File API가 있습니다.

    로컬에 저장된 파일을 읽을 때 사용되는 API입니다. ArrayBuffer와 DataView와 함께 사용하여 바이너리(Binary) 데이터를 읽을 수 있습니다.

    특히나 로컬에 저장된 물리적인 파일을 File이라는 클래스를 통해 접근할 수 있는데 이 File은 Blob를 상속받으며, 이 Blob의 slice 함수를 사용하면 대용량의 파일 전체 내용을 메모리에 올리지 않고도 필요한 부분만을 올려 사용할 수 있다는 매우 큰 장점을 갖습니다.

    이러한 HTML5의 기능 중 하나인 File API에 대한 설명을 예제를 통해 살펴보도록 하겠습니다. 먼저 File API를 사용하기 위해서는 읽을 파일을 지정해야 하는데, 보안상의 이유로 사용자가 특정한 행위를 통해 지정된 파일만을 제한하여 사용할 수 있습니다.

    여기서 말하는 사용자의 특정 행위는 2가지로 다음과 같습니다.



    - 파일 선택 대화상자를 통해 읽을 파일을 사용자가 선택


    - 사용자가 드래그 앤 드랍(Drag & Drop)으로 읽을 파일을 선택



    여기서는 파일 선택 대화상자를 통해 읽을 파일을 사용자가 선택하는 방법으로 File API에 대해 살펴보도록 하겠습니다. 파일 선택 대화상자를 웹에서 사용하기 위해서는 다음의 코드에서 2번째줄의 HTML Tag가 필요합니다.

    파일선택선택된 파일 없음

    즉, TYPE 속성이 file인 INPUT 태그를 사용하는데 accept 속성을 이용해 선택할 파일의 확장자에 대한 필터링을 지정할 수 있습니다.

    아울러 multiple 속성을 지정하면 파일을 여러 개를 다중으로 선택할 수 있습니다. 실행해 보면 다음과 같은 결과를 볼 수 있는데, 찾아보기 버튼을 클릭하여 파일 선택 대화상자까지 표시한 상태입니다.



    앞서 코드에서 1번 줄을 보면 BODY에 onload 이벤트에 대해 load() 함수가 지정된 것을 볼 수 있습니다. 이 load() 함수에 대한 코드는 다음과 같습니다.


       function load() {


           if(!(File && FileReader && FileList && Blob)) {


               alert("Not Supported File API");


           }




           document.getElementById("inputFile").onchange = function () {


               var file = this.files[0];


               var name = file.name;


               var size = file.size;


               var reader = new FileReader();




               reader.onload = function () {


                   var aBuf = this.result; // ArrayBuffer


                   var dView = new DataView(aBuf);




                   var validFlag = dView.getUint8(0);


                   var year = dView.getUint8(1);


                   var month = dView.getUint8(2);


                   var day = dView.getUint8(3);


                   var numRecords = dView.getInt32(4, true);


                   var numHeaders = dView.getInt16(8, true);






               };




               var blob = file.slice(0, 1000);


               reader.readAsArrayBuffer(blob);


           };


       }



    코드는 짧지만 상당히 많은 내용을 담고 있습니다. 각각 살펴보면 다음과 같습니다.



    2번 코드는 해당 웹브라우저가 File API를 지원하는지 검사합니다.

    전역 객체로써 window에 대해 File API에서 제공하는 속성은 File, FileReader, FileList, Blob 정도입니다.

    그리고 6번 코드는 앞서 파일 선택 대화상자를 통해 파일을 지정했을 때 발생하는 이벤트인 onchange에 대한 함수를 지정하고 있습니다.7번 코드에서는 사용자가 선택한 파일을 File 타입의 객체를 얻습니다.

    그리고 이 객체를 통해 파일명, 파일크기를 각각 8번과 9번 코드를 통해 얻을 수 있습니다. 10번 코드에서 생성한 FileReader 객체는 실제 파일의 내용을 읽어와 해석(Parsing)하기 위해 사용하는 객체입니다. 12번 코드에서는 이 FileReader 객체의 onload 이벤트 함수를 지정하고 있는데요.

    바로 이 onload 이벤트 함수가 실행되는 시점은 실제 물리적인 파일로부터 데이터를 메모리에 모두 성공적으로 올릴 때입니다. 여기서 중요한 부분은 실제 물리적인 파일로부터 데이터를 메모리에 올릴때, 파일의 내용 전체를 올릴 수도 있고 위의 예제처럼 파일의 시작에서부터 총 1000바이트만을 올릴 수도 있다는 것입니다.

    26번 코드가 바로 파일의 시작에서부터 총 1000바이트를 올리기 위해 BLOB 객체를 생성한 것입니다. 27번 코드는 이 BLOB 객체를 통해 실제 메모리에 올리라는 함수 호출인데요, 이 함수의 이름(readAsArrayBuffer)처럼 메모리에 올린 데이터를 ArrayBuffer 타입으로 처리할 수 있도록 합니다. 이미 언급했듯이 성공적으로 메모리에 지정한 데이터를 올리게 되면 12번 코드에서 지정한 onload 이벤트가 호출됩니다.

    이 onload 이벤트에 지정한 함수를 살펴보면, 먼저 13번 코드에서 메모리에 올린 데이터(청크(Chunk)라고 함)를 ArrayBuffer 타입의 객체로 얻습니다. 그리고 이 ArrayBuffer 객체를 이용하여 DataView 타입의 객체를 생성합니다. 이처럼 ArrayBuffer에서 DataView로 변경하는 이유는 DataView가 메모리 덩어리로부터 쉽게 원하는 타입의 값을 읽어올 수 있는 함수를 제공하기 때문입니다. 바로 16번 코드에서부터 21번 코드에서 보이는 getUint8이나 getInt32 그리고 getInt16인데 이 함수는 1개 또는 2개의 인자를 갖습니다.

    공통적으로 첫번째 인자는 메모리에 올라간 데이터에서 읽어올 위치이고 두번째는 2바이트 이상의 데이터를 읽어왔을 경우에 엔디안(Endian) 처리를 어떻게 할 것인가 입니다. 이 인자를 지정하지 않거나 false로 지정하면 Big Endian인데, 위의 예제에서는 true를 주어 Little Endian으로 해석하라고 지시하고 있습니다.



    이처럼 HTML5에서 제공하는 File API를 이용하여 바이너리(Binary) 차원에서 원하는 데이터를 원시 타입 단위로 읽어올 수 있는 것을 볼 수 있습니다.


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


      }

이메일 무단 수집 거부

팝업 닫기

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

닫기
TOP