2011.09.21 08:30

지금 설명해 드릴 Color 속성도 아직은 Opera 11만 지원하고 있는 기능입니다.

<label for="background-color">Choose a calor for background :</label>
<input id="background-color" type="color" />


현재 지원하는 웹 브라우저는 Opera 11 뿐 입니다.
Browsers Color input Support
IE 9
Firefox 4
Safari 5
Chrome 8
Opera 11

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
저작자 표시 변경 금지
신고
2011.09.20 12:30
웹상에서 달력을 한 번 출력하려면 엄청난 양의 Java Script를 사용해야 구현이 가능 했습니다. HTML5의 웹 폼에서는 달력을 출력할 수 있는 태그가 별도로 제공되기 때문에 훨씬 간단하게 구현이 가능 합니다.

<input id="meeting" type="date" value="2011-01-13"/>

다만 글을 쓰고 있는 이 시점에서는 지원하는 웹 브라우저가 Opera 11 밖에 없다는 것이 특이한 점입니다.

Browsers Date Time Support
IE 9
Firefox 4
Safari 5
Chrome 8
Opera 11

일반적으로 Date를 사용하면 아래와 같은 모양이 됩니다.


여기에 약간의 변화를 준다면 Week, Month, Time도 사용 가능합니다.

<input type="week" ...

<input type="month" ...

<input type="time" ...

 

Attributes Descriptions
value Value is the default value of the input box when a page is first loaded. This is a common attribute for <input> element regardless which type you are using.
min Minimum Date or time
max Maximum Date or time
step Step scale factor. Different type of input has its own default "step" value.
  • Date - default is 1 day
  • Week - default is 1 week
  • Month - default is 1 month
  • Time - default is 1 minute
  • DateTime - default is 1 minute
  • Local DateTime - default is also 1 minute

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
저작자 표시 변경 금지
신고
2011.09.20 08:30

Number 필드는 이름에서 볼 수 있듯이 숫자 입력을 편하게 하기 위해서 제안된 태크 입니다. 다른 웹 폼들도 대부분 그러하지만 Number 도 모바일 같이 입력이 제한된 환경에서 유용하게 사용됩니다. 
 
<input id="movie" type="number" value="0"/>

숫자를 입력하기 위해서 제안된 용도에 맞게 이 항목을 선택하게 되면 모바일 환경과 같이 입력기가 별도로 뜰 때에는 숫자를 입력하기 위한 용도의 입력기가 나타 납니다. 

 Number는 단순히 숫자 입력을 요구하기 위한 용도로 사용되지는 않습니다. 숫자 이외에 다른 문제는 입력을 거부하거나 지정된 범위를 벗어나는 숫자의 입력을 거부하는 용도로도 활용 될 수 있습니다.

Attributes Descriptions
value Value is the default value of the input box when a page is first loaded. This is a common attribute for <input> element regardless which type you are using.
min Obviously, the minimum value you of the number. I should have specified minimum value to 0 for my demo up there as a negative number doesn't make sense for number of movie watched in a week.
max Apprently, this represents the biggest number of the number input.
step Step scale factor, default value is 1 if this attribute is not specified.


일반적인 데스크탑 환경에서는 Chrome, Opera에서 Number 태그가 사용 가능합니다. Number 객체 옆에는 숫자를 올리거나 내일 수 있는 버튼이 함께 붙어 있습니다. Step 속성은 숫자를 높이거나 낮출 때 사용하는 버튼을 눌렀을 때 증가 혹은 감소되는 양을 지정하기 위한 속성입니다.

Browsers Render "Number" input as Spinner
IE 9
Firefox 4
Safari 5 ✓ (in Mac OS, but not Windows)
Chrome 8
Opera 11

Attributes Descriptions
value Value is the default value of the input box when a page is first loaded. This is a common attribute for <input> element regardless which type you are using.
min Obviously, the minimum value you of the number. I should have specified minimum value to 0 for my demo up there as a negative number doesn't make sense for number of movie watched in a week.
max Apprently, this represents the biggest number of the number input.
step Step scale factor, default value is 1 if this attribute is not specified.

Java Script에서 Number 객체를 활용 할 때에는 stepUp(), steopDown(), valueAsNumber 등의 속성을 사용할 수 있습니다.

  • spinner.stepUp(x) - x being the value you want to increase in the field.
  • spinner.stepDown(x) - x being the value you want to decrease in the field.
  • spinner.valueAsNumber - return value of input as floating point number instead of string.
  • 하지만 역시 웹 폼의 기능들은 모바일 환경에서 제일 유용합니다.


    김영욱 iwinkey@hotmail.com

    현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
    올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


    HTML5 강좌 전체 목록
    1. HTML5 DocType의 정의
    2. HTML5 Header stuff
    3. Audio
    4. Video
    5. Canvas
      Canvas: Rectangle
      Canvas: Shadow
      Canvas: Path
      Canvas: Image
      Canvas: Text
    6. Web form 2.0
      Input Attr: Placeholder
      Input Attr: Autofocus
      Input Attr: Required field
      Input Attr: DataList
      Input Type: Search
      Input Type: Email, URL, Phone
      Input Type: Range
      Input Type: Number
      Input Type: Date
      Input Type: Color
    7. Towards Semantic Web
      Semantic <mark>
      Semantic <time>
      Semantic <meter>
      Semantic <progress>
      Semantic <section>
      Semantic <header>
      Semantic <footer>
      Semantic <nav>
      Semantic <article>
      Semantic <aside>
    저작자 표시 변경 금지
    신고
    2011.09.19 12:30

    Range는 특정 범위 값을 입력할 때 사용하는 필드입니다. 역시나 Range 역시 입력 환경이 제한적인 모바일 환경에서 사용이 특히 유용합니다. 그래서인지 지금 우선 지원하는 브라우저들도 모바일 환경에 강한 브라우저 들입니다.
     Range의 사용방법은 아래와 같습니다.

    <input id="test" type="range"/>

    아래와 같이 사용했을 때 현재 지원하는 브라우저에서 보여지는 모습입니다.


    현재 이 Range를 지원하는 웹 브라우저는 Chrome, Safari, Opera 등입니다.
    Browsers Render Range input as Slider
    IE 9
    Firefox 4
    Safari 5
    Chrome 8
    Opera 11

    Range를 사용하기 위해서는 몇 가지 속성을 더 정확하게 써주는것이 좋습니다. 현재 값이나 최대 값, 최소 값 같은 것들입니다.

    <input id="slider1" type="range" min="100" max="500" step="10" />

    Attribute Descriptions
    value Value is a common attribute of "Input" element. The value can be any valid floating point number, not neccessary must be an integer number. Default value is minimum value plus half of the maximum value.
    min Minimum value of the range. Default minimum value is 0.
    max Maximum value of the range. Default maximum value is 100.
    step This is Step scale factor of the slider, default value is 1 and only allowing integer number unless minimum value is non integer number.
    list List is the DataList in the past lesson. Datalist can be incorporated into Range type input, however, none of the browser has implemented this feature as of writing.

    김영욱 iwinkey@hotmail.com

    현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
    올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


    HTML5 강좌 전체 목록
    1. HTML5 DocType의 정의
    2. HTML5 Header stuff
    3. Audio
    4. Video
    5. Canvas
      Canvas: Rectangle
      Canvas: Shadow
      Canvas: Path
      Canvas: Image
      Canvas: Text
    6. Web form 2.0
      Input Attr: Placeholder
      Input Attr: Autofocus
      Input Attr: Required field
      Input Attr: DataList
      Input Type: Search
      Input Type: Email, URL, Phone
      Input Type: Range
      Input Type: Number
      Input Type: Date
      Input Type: Color
    7. Towards Semantic Web
      Semantic <mark>
      Semantic <time>
      Semantic <meter>
      Semantic <progress>
      Semantic <section>
      Semantic <header>
      Semantic <footer>
      Semantic <nav>
      Semantic <article>
      Semantic <aside>
    저작자 표시 변경 금지
    신고
    2011.09.19 08:30
    Email, Phone, URL등 정형화된 입력 유형의 입력을 도와주는 타입이 HTML5에서 추가 되었습니다. 입력하려는 내용이 구체적으로 명시되면서 입력을 적극적으로 도와 줄 수 있게 되었는데 주로 입력이 불편한 모바일 환경에서 적극적으로 활용되고 있습니다.
     아래와 같이 email, url, tel 등 타입을 명시하게 되면 HTML5를 지원하는 웹 브라우저는 여기에 적합한 입력기 형태를 노출해 줍니다. 현재로는 주로 모바일 환경에서 이를 지원하도록 되었습니다.

    <input id="email" type="email"/>
    <input id="website" type="url"/>
    <input id="phone" type="tel" />



    아래는 안드로이드 계열의 폰과 iOS계열의 스마트 폰에서 위의 폼을 접근했을 때 유형 별로 어떤 입력기가 출력되는지를 볼 수 있습니다.


    김영욱 iwinkey@hotmail.com

    현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
    올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


    HTML5 강좌 전체 목록
    1. HTML5 DocType의 정의
    2. HTML5 Header stuff
    3. Audio
    4. Video
    5. Canvas
      Canvas: Rectangle
      Canvas: Shadow
      Canvas: Path
      Canvas: Image
      Canvas: Text
    6. Web form 2.0
      Input Attr: Placeholder
      Input Attr: Autofocus
      Input Attr: Required field
      Input Attr: DataList
      Input Type: Search
      Input Type: Email, URL, Phone
      Input Type: Range
      Input Type: Number
      Input Type: Date
      Input Type: Color
    7. Towards Semantic Web
      Semantic <mark>
      Semantic <time>
      Semantic <meter>
      Semantic <progress>
      Semantic <section>
      Semantic <header>
      Semantic <footer>
      Semantic <nav>
      Semantic <article>
      Semantic <aside>

    저작자 표시 변경 금지
    신고
    2011.09.15 12:30
    Search 타입은 텍스트 필드와 크게 다를 바 없어 보이지만 검색어 입력에 조금더 편의를 준다는 점에서 차이가 있습니다. 그렇다고 해서 아주 대단한 정도는 아니고 단어를 입력할 때 검색어를 지울 수 있는 버튼이 추가로 제공된다는 정도의 차이 입니다.

    <input id="mysearch" type="search" />

    아무래도 크게 중요한 기능이 아니어서 그런지 아직 많은 웹 브라우저에서 지원하지는 않고 있습니다.


    Browsers Tweak search box?
    IE 9 Beta
    Firefox 4
    Safari 5
    Chrome 8
    Opera 9

    지원하는 웹 브라우저를 보면 Safari 5, Chrome 8 정도인데 지원하는 웹 브라우저의 특징을 보면 모바일 기능이 강력한 웹 브라우저들 입니다.


    Search와 함께 Placeholder를 함께 사용하는 것도 가능합니다.

    <label for="mysearch2">Enter your search string here : </label>
    <input id="mysearch2" type="search" placeholder="search">


    김영욱 iwinkey@hotmail.com

    현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
    올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


    HTML5 강좌 전체 목록
    1. HTML5 DocType의 정의
    2. HTML5 Header stuff
    3. Audio
    4. Video
    5. Canvas
      Canvas: Rectangle
      Canvas: Shadow
      Canvas: Path
      Canvas: Image
      Canvas: Text
    6. Web form 2.0
      Input Attr: Placeholder
      Input Attr: Autofocus
      Input Attr: Required field
      Input Attr: DataList
      Input Type: Search
      Input Type: Email, URL, Phone
      Input Type: Range
      Input Type: Number
      Input Type: Date
      Input Type: Color
    7. Towards Semantic Web
      Semantic <mark>
      Semantic <time>
      Semantic <meter>
      Semantic <progress>
      Semantic <section>
      Semantic <header>
      Semantic <footer>
      Semantic <nav>
      Semantic <article>
      Semantic <aside>
    저작자 표시 변경 금지
    신고
    2011.09.15 10:39

    DataList는 네이버나 구글에서 볼 수 있는 실시간 검색어 제안과 같은 역할을 담당합니다. 텍스트 박스에 키워드를 입력하는 순간 미리 입력되어 있는 내용과 입력하면 추천 키워드로 제안해 줍니다.

    DataList도 아직 모든 브라우저에서 공통적으로 지원되지 않습니다. 현재는 FireFox 4와 Opera 11만 지원됩니다.

    Browsers Datalist Support
    IE 9
    Firefox 4
    Safari 5
    Chrome 8
    Opera 11

    사용하는 방법은 아래와 같이 간단합니다. <datalist>태그를 사용하고 <datalist> </datalist>사이에 <option> 태그를 입력하면 됩니다.

    <datalist id="country">
      <option value="Afghanistan">
      <option value="Albania">
      <option value="Algeria">
      <option value="Andorra">
      <option value="Angola">
    </datalist>

    김영욱 iwinkey@hotmail.com

    현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
    올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


    HTML5 강좌 전체 목록
    1. HTML5 DocType의 정의
    2. HTML5 Header stuff
    3. Audio
    4. Video
    5. Canvas
      Canvas: Rectangle
      Canvas: Shadow
      Canvas: Path
      Canvas: Image
      Canvas: Text
    6. Web form 2.0
      Input Attr: Placeholder
      Input Attr: Autofocus
      Input Attr: Required field
      Input Attr: DataList
      Input Type: Search
      Input Type: Email, URL, Phone
      Input Type: Range
      Input Type: Number
      Input Type: Date
      Input Type: Color
    7. Towards Semantic Web
      Semantic <mark>
      Semantic <time>
      Semantic <meter>
      Semantic <progress>
      Semantic <section>
      Semantic <header>
      Semantic <footer>
      Semantic <nav>
      Semantic <article>
      Semantic <aside>
    저작자 표시 변경 금지
    신고
    2011.09.14 12:30
    Required filed는 입력을 강제화 시킬 수 있는 항목을 지정할 때 사용할 수 있습니다. 이 역시도 기존에 Java Script를 사용해서 이미 많이 사용하던 기능 중의 하나 입니다.
     HTML5에서는 아래와 같이 Required 속성을 사용 할 수 있습니다.

    <form>
    <label for="movie">What is your favorite movie : </label>
    <input name="movie" type="text" required />
    <input type="submit" value="Submit"/>
    </form>

     만약 입력하지 않고 Submit 버튼을 누르게 되면 웹 브라우저는 사용자에게 입력을 요구 합니다.



    사용하기 따라서 굉장히 편리한 기능이긴 하지만 아직까지 입력을 요구할 때 메시지를 설정하는 부분이 없고 지금은 FireFox와 Opera 9 만 지원하고 있어서 사용이 제한적입니다.

    IE 9
    Firefox 4
    Safari 5
    Chrome 8
    Opera 9

    1. HTML5 DocType의 정의
    2. HTML5 Header stuff
    3. Audio
    4. Video
    5. Canvas
      Canvas: Rectangle
      Canvas: Shadow
      Canvas: Path
      Canvas: Image
      Canvas: Text
    6. Web form 2.0
      Input Attr: Placeholder
      Input Attr: Autofocus
      Input Attr: Required field
      Input Attr: DataList
      Input Type: Search
      Input Type: Email, URL, Phone
      Input Type: Range
      Input Type: Number
      Input Type: Date
      Input Type: Color
    7. Towards Semantic Web
      Semantic <mark>
      Semantic <time>
      Semantic <meter>
      Semantic <progress>
      Semantic <section>
      Semantic <header>
      Semantic <footer>
      Semantic <nav>
      Semantic <article>
      Semantic <aside>

    저작자 표시 변경 금지
    신고
    2011.09.14 08:30

    로그인 화면 같은데서 기본적으로 포커스가 아이디 쪽으로 맞추어져 있는 것을 본 적이 많을 것 같습니다. Autofocus는 기본적으로 기존에는 Java Script를 사용해서 설정했지만 HTML5에서는 이 조차도 하나의 속성으로 제공하고 있습니다.

    <label for="name">Your name goes here :</label><input id ="name" type="text" autofocus/>

    Autofocus는 위에서 보는 바와 같이 해당 태그 뒤에 그냥 autofocus라고 명시하면 바로 동작이 됩니다.

    Browsers Autofocus Support
    IE 9 Beta
    Firefox 4
    Safari 4.0
    Chrome 3.0
    Opera 10



    하지만 Autofocus도 현재는 Internet Explorer 9은 지원하지 않고 있습니다.  그래서 여전히 Java Scriptm를 사용하는 방식도 한동안 사용할 수 밖에 없는 상황입니다.

    <script>
    function testAttribute(element, attribute) {
      var test = document.createElement(element);

      if (attribute in test) {
        return true;
      }
      else
        return false;
      }

      window.onload = function() {
      if (!testAttribute('input', 'autofocus'))
        document.getElementById('Text2').focus();
      //for browser has no autofocus support, set focus to Text2.
    }
    </script>
    <label for="Text1">Support Autofocus :</label><input id ="Text1" type="text" autofocus/> <br />
    <label for="Text2">No Autofocus Support :</label><input id ="Text2" type="text" />

    김영욱 iwinkey@hotmail.com

    현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
    올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


    HTML5 강좌 전체 목록

    1. HTML5 DocType의 정의
    2. HTML5 Header stuff
    3. Audio
    4. Video
    5. Canvas
      Canvas: Rectangle
      Canvas: Shadow
      Canvas: Path
      Canvas: Image
      Canvas: Text
    6. Web form 2.0
      Input Attr: Placeholder
      Input Attr: Autofocus
      Input Attr: Required field
      Input Attr: DataList
      Input Type: Search
      Input Type: Email, URL, Phone
      Input Type: Range
      Input Type: Number
      Input Type: Date
      Input Type: Color
    7. Towards Semantic Web
      Semantic <mark>
      Semantic <time>
      Semantic <meter>
      Semantic <progress>
      Semantic <section>
      Semantic <header>
      Semantic <footer>
      Semantic <nav>
      Semantic <article>
      Semantic <aside>
    저작자 표시 변경 금지
    신고
    2011.09.08 12:30
    Placeholder라는 텍스트 박스에 미리 희미하게 입력되어 있어서 사용자들의 입력을 도와주는 기능을 말합니다. 아래 그림은 국내 모 포탈의 화면으로 아이디와 비밀번호의 입력을 자연스럽게 유도하고 있습니다.

     


    이런 Placeholder를 구현하기 위해서는 기존에는 Java Script를 사용하는 방법만이 유일했지만 HTML5에서는 기본적으로 Placeholder를 제공합니다.

    <label for="first_name">First Name</label> : <input id="first_name" placeholder="First name goes here">


    그런데 아직 Placeholder는 IE에서는 지원되지 않고 있다. 그래서 당분간은 Java Script를 사용하는 방법이 유지되어야 할 것 같습니다.
    Browsers Placeholder Support
    IE 9
    Firefox 3.7
    Safari 4.0
    Chrome 4.0
    Opera 11

    Java Script를 활용하는 소스는 아래 소스를 참조하면 됩니다.

    <label for="demo">Placeholder demo</label> : <input id ="demo" placeholder="Support Placeholder" />

    <script>
    function testAttribute(element, attribute)
    {
      var test = document.createElement(element);
      if (attribute in test)
        return true;
      else
        return false;
    }

    if (!testAttribute("input", "placeholder"))
    {
      window.onload = function()
      {
        var demo = document.getElementById("demo");
        var text_content = "No Placeholder support";

        demo.style.color = "gray";
        demo.value = text_content;

        demo.onfocus = function() {
        if (this.style.color == "gray")
        { this.value = ""; this.style.color = "black" }
      }

      demo.onblur = function() {
      if (this.value == "")
        { this.style.color = "gray"; this.value = text_content; }
        }
      }
    }
    </script>


    김영욱 iwinkey@hotmail.com

    현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
    올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


    HTML5 강좌 전체 목록
    1. HTML5 DocType의 정의
    2. HTML5 Header stuff
    3. Audio
    4. Video
    5. Canvas
      Canvas: Rectangle
      Canvas: Shadow
      Canvas: Path
      Canvas: Image
      Canvas: Text
    6. Web form 2.0
      Input Attr: Placeholder
      Input Attr: Autofocus
      Input Attr: Required field
      Input Attr: DataList
      Input Type: Search
      Input Type: Email, URL, Phone
      Input Type: Range
      Input Type: Number
      Input Type: Date
      Input Type: Color
    7. Towards Semantic Web
      Semantic <mark>
      Semantic <time>
      Semantic <meter>
      Semantic <progress>
      Semantic <section>
      Semantic <header>
      Semantic <footer>
      Semantic <nav>
      Semantic <article>
      Semantic <aside>
    저작자 표시 변경 금지
    신고