최근 새로운 표준안인 HTML5에 대한 관심이 지대하다. 여러가지 태그(Tag)와 속성을 추가하였고, 다양한 기능, 특히 이미지와 비디오 부분에서 많은 발전이 있었다. 또한, 모바일 플랫폼에서의 가능성을 크게 보고 있다.
캔버스 기능을 테스트 해보았다. 아래의 자바스크립트로 myCanvas라는 ID를 가진 Canvas 엘리먼트에 그림을 그리고 글자를 써보았다.
var elem = document.getElementById('myCanvas');
if (elem && elem.getContext) {
var context = elem.getContext('2d');
if (context) {
context.fillStyle = '#00f';
context.strokeStyle = '#f00';
context.lineWidth = 4;
context.beginPath();
context.moveTo(10, 10);
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);
context.fill();
context.stroke();
context.closePath();
context.fillStyle = '#00f';
context.font = 'italic 30px sans-serif';
context.textBaseline = 'top';
context.fillText ('Hello world!', 100, 100);
context.font = '70px Tahoma';
context.strokeText('This is Canvas Element!', 100, 150);
}
}
Form을 테스트 해보자. 이번 Form 엘리먼트 중에서 맘에 드는 것은 range type, date type등 새로운 타입이 생긴 것과 placeholder라는 속성을 두었다는 것이다.
<input type="search" placeholder="검색어를 입력해주세요." />
라고 설정을 해두었는데, 아래 그림과 같이 구현이 되어있다. 필드에 값이 채워지면 자동으로 없애준다. 전에는 Javascript+CSS로 구현했던 기능이 속성 하나로 구현되니 얼마나 편한지 모르겠다. 각각의 Input 엘리먼트들이 지원해주는 속성에 대해서는 여기를 참조하도록 하자.
<![CDATA[<form method="post">
<fieldset>
<legend>검색</legend>
<input type="search" placeholder="검색어를 입력해주세요." size="30"/>
<input type="submit" value="검 색"/>
</fieldset>
<fieldset>
<legend>Profile</legend>
<dl>
<dt>Name (Text Type)</dt>
<dd><input type="text" required="required" placeholder="Fill me …"/></dd>
<dt>Gender (Radio Type)</dt>
<dd>
<input type="radio" name="gender" id="gd1"/><label for="gd1">Male</label>
<input type="radio" name="gender" id="gd2"/><label for="gd2">Female</label>
</dd>
<dt>Email (Email Type)</dt>
<dd><input type="email" pattern="[^ @]*@[^ @]*"/></dd>
<dt>Homepage (URL Type)</dt>
<dd><input type="url" /></dd>
<dt>Telephone (Tel Type)</dt>
<dd><input type="tel" maxlength="15"/></dd>
<dt>Date of birth (Date Type)</dt>
<dd><input type="date" value="1980-01-01"/></dd>
<dt>Now is... (Datetime Type)</dt>
<dd><input type="datetime" /></dd>
<dt>This month is... (Month Type)</dt>
<dd><input type="month" /></dd>
<dt>This week is... (Week Type)</dt>
<dd><input type="week" /></dd>
<dt>What time is it now? (Time Type)</dt>
<dd><input type="time" /></dd>
<dt>Date of birth[Your country] (Datetime-local Type)</dt>
<dd><input type="datetime-local" size="30"/></dd>
<dt>Age (Number Type - min 0, step 1)</dt>
<dd><input type="number" value="17" min="0" step="1" /></dd>
<dt>Average Grade (Number Type - min 0.5, max 4.5, step 0.5)</dt>
<dd><input type="number" value="3.5" min="0.5" max="4.5" step="0.5" /></dd>
<dt>Inclination (Range Type - min 0, max 2, step 1)</dt>
<dd>Progressive <input type="range" min="0" max="2" step="1"/> Conservative</dd>
<dt>Favorite Color (Color Type)</dt>
<dd><input type="color"/></dd>
<dt>Hobby (Checkbox Type)</dt>
<dd>
<input type="checkbox" name="hobby" id="hb1"/><label for="hb1">Games</label>
<input type="checkbox" name="hobby" id="hb2"/><label for="hb2">Baseball</label>
<input type="checkbox" name="hobby" id="hb3"/><label for="hb3">Reading</label>
</dd>
<dt>Profile Photo (File Type)</dt>
<dd><input type="file"/></dd>
<dt>Introduce yourself! (Textarea)</dt>
<dd><textarea></textarea></dd>
</dl>
</fieldset>
</form>]]>