전체메뉴

웹 표준 개발 FAQ

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

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

  • HTML5

  • 다음의 사항들은 HTML5에서 새롭게 사용할 수 있도록 고안된 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 를 반환한다.

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

    · getElementsByClassName()

    · innerHTML

    · classList 는 ClassName 에 편리하게 접근할 수 있는 접근자다.

    Element 의 Class 들을 조작하기 위해서 has(), add(), remove(), toggle()과 같은 함수를 노출한다.

  • W3C 웹 접근성 그룹에 새 회원사 참가

  • <p><br></p><p class="0" align="center" style="margin-bottom: 0px; color: rgb(102, 102, 102); letter-spacing: 0pt; font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; text-align: center;"><font face="나눔바른고딕, NanumBarunGothic, NanumBarunGothicOTF"><span style="font-size: 16px;">웹 표준은 W3C에서 권고한 표준안을 이용하여</span></font></p><p class="0" align="center" style="margin-bottom: 0px; color: rgb(102, 102, 102); letter-spacing: 0pt; font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; text-align: center;"><font face="나눔바른고딕, NanumBarunGothic, NanumBarunGothicOTF"><span style="font-size: 16px;">웹 페이지를 제작합니다.</span></font></p><div style="color: rgb(102, 102, 102); letter-spacing: normal; font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px;"><font face="나눔바른고딕, NanumBarunGothic, NanumBarunGothicOTF"><span style="font-size: 16px;"><br style="margin: 0px; padding: 0px;"></span></font></div><p class="0" align="center" style="margin-bottom: 0px; color: rgb(102, 102, 102); letter-spacing: 0pt; font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; text-align: center;"><font face="나눔바른고딕, NanumBarunGothic, NanumBarunGothicOTF"><span style="font-size: 16px;"><br style="margin: 0px; padding: 0px;"></span></font></p><p class="0" align="center" style="margin-bottom: 0px; color: rgb(102, 102, 102); letter-spacing: 0pt; font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; text-align: center;"><font face="나눔바른고딕, NanumBarunGothic, NanumBarunGothicOTF"><span style="font-size: 16px;">여기서 W3C란?</span></font></p><p class="0" align="center" style="margin-bottom: 0px; color: rgb(102, 102, 102); letter-spacing: 0pt; font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; text-align: center;"><font face="나눔바른고딕, NanumBarunGothic, NanumBarunGothicOTF"><span style="font-size: 16px;">"국제 웹 표준화 기구의 하나"</span></font></p><p class="0" align="center" style="margin-bottom: 0px; color: rgb(102, 102, 102); letter-spacing: 0pt; font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; text-align: center;"><font face="나눔바른고딕, NanumBarunGothic, NanumBarunGothicOTF"><span style="font-size: 16px;"><u><b>W</b></u>orld <u><b>W</b></u>id <u><b>W</b></u>eb <u><b>C</b></u>onsorticum의 약자입니다.</span></font></p><p class="0" align="center" style="margin-bottom: 0px; color: rgb(102, 102, 102); letter-spacing: 0pt; font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; text-align: center;"><font face="나눔바른고딕, NanumBarunGothic, NanumBarunGothicOTF"><span style="font-size: 16px;">여기서 3은 무엇인가 하는 분이 계실텐데</span></font></p><p class="0" align="center" style="margin-bottom: 0px; color: rgb(102, 102, 102); letter-spacing: 0pt; font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; text-align: center;"><font face="나눔바른고딕, NanumBarunGothic, NanumBarunGothicOTF"><span style="font-size: 16px;">간단하게 W가 3번들어가서 W3C입니다~</span></font></p><p class="0" align="center" style="margin-bottom: 0px; color: rgb(102, 102, 102); letter-spacing: 0pt; font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; text-align: center;"><font face="나눔바른고딕, NanumBarunGothic, NanumBarunGothicOTF"><span style="font-size: 16px;"><br style="margin: 0px; padding: 0px;"></span></font></p><p class="0" align="center" style="margin-bottom: 0px; color: rgb(102, 102, 102); letter-spacing: 0pt; font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; text-align: center;"><font face="나눔바른고딕, NanumBarunGothic, NanumBarunGothicOTF"><span style="font-size: 16px;">국제공인단체가 아닌 기업들이 참여하고 있는 연맹을 말합니다.</span></font></p><p class="0" align="center" style="margin-bottom: 0px; color: rgb(102, 102, 102); letter-spacing: 0pt; font-family: 돋움, Dotum, Helvetica, sans-serif; font-size: 12px; text-align: center; clear: none; float: none;"></p><p><br style="color: rgb(102, 102, 102); font-family: "Nanum Gothic", sans-serif; font-size: 14px; letter-spacing: normal;"><br style="color: rgb(102, 102, 102); font-family: "Nanum Gothic", sans-serif; font-size: 14px; letter-spacing: normal;"><br></p>

  • 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에서 상호작용하는 요소들은 무엇이 있나요?

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

    ∎<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 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 - 음소거 설정





  • HTML/CSS 와 HTML5/CSS3 의 차이점이 무엇인가요?

  • 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로
    CSS입니다. HTML5/CSS3은 기존 버전에서 기존 기능보다 업그레이드 된 버전으로서 CSS3은 모듈 기반으로 개발되고 있다는 점이 차이점입니다.

  • Audio 객체란?

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

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


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

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


     

    예제

    <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의 차이점

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

    <o:p></o:p>

    Contents Model(콘텐츠 모델)

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

    HTML5 이전의 문서

    <o:p></o:p>

    HTML5 문서

    Block Level Element

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

    <o:p></o:p>

    lnline Element

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

    Contents Model

    <Header>

    </Header>

    <article>

    </article>

    <Footer>

    </Footer>

    <o:p></o:p>

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

    <o:p></o:p>

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

    <o:p></o:p>

    Syntax(구문)

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

    <o:p></o:p>

    - Encoding

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

    HTML5Encoding : <meta charset="UTF-8">

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

    <o:p></o:p>

    - 그래픽 언어의 사용

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

    <o:p></o:p>

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

  • bootstrap

  • bootstrap은 익숙하신 분들이 많으실텐데요.
    반응형 웹사이트를 개발하기 위해 필요한 UI 프레임워크이죠.
    그럼 사용하기 위한 설정을 해보겠습니다.
    우선 터미널에서 npm i bootstrap jquery popper.js --save를 입력해줍니다.
    그럼 package.json에 boostrap과 jquery, popper.js 모듈이 추가된 걸 확인하실 수 있습니다.

    "dependencies": {
        "bootstrap": "^4.1.3",
        "jquery": "^3.3.1",
        "popper.js": "^1.14.6",
        "vue": "^2.5.17"
      },
    

    그런 다음 src 디렉토리의 main.js 파일을 열어서

    import Vue from 'vue'
    import App from './App.vue'
    import 'bootstrap'
    import 'bootstrap/dist/css/bootstrap.min.css'
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')
    

    위와 같이 import해주면 bootstrap을 사용하기 위한 설정이 끝납니다.
    간단하죠?

    여기서 알아둬야 할 부분들은
    - npm i [npm 모듈 이름] --save로 필요한 라이브러리 모듈을 설치할 수 있으며, 설치한 모듈은 package.json에서 확인할 수 있다.
    - 그리고 main.js 파일에서 모듈을 import하면 라이브러리를 사용할 수 있다 정도입니다.
    참고로 main.js에서는 전역으로 사용할 라이브러리에 대해 참조하는게 좋습니다. 특정 페이지에서 필요한 경우 해당 컴포넌트에서 import하여 사용할 수 있습니다. 자세한 사용법은 npm [라이브러리 명]으로 검색하셔서 설정하는 방법을 참조하시면 좋을 듯 합니다. 

  • html5 Audio 객체란?

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



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


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



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




    예제


    <audio controls>



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



    </audio>

    <Audio 태그 예제>


    브라우저 지원

    요소

    크롬

    익스폴로러

    파이어폭스

    사파리

    오페라

    <audio>

    4.0

    9.0

    3.5

    4.0

    10.5


    Audio 객체의 속성

    속성 이름

    설명

    src

    재생하려는 음악 파일 경로

    volume

    음악의 음량

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

    currentTime

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


    Audio 객체의 메서드

    메서드 이름

    설명

    play()

    음악을 재생

    pause()

    음악을 일시정지



123

이메일 무단 수집 거부

팝업 닫기

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

닫기
TOP