IE10에서 IE 호환성 모드사용하기

IE8로 넘어 오면서 호환성모드를 ms에서 추가 하였습니다.
아래의 소스와 같은 방식으로 호환성 모드를 동작시킬수가 있습니다.
[html]
<meta http-equiv="X-UA-Compatible" content="IE=9" />
[/html]

헌데 IE10에서 자바스크립트로 태그의 속성을 체크 할경우 문제가 생깁니다.
html5에서 추가된 placeholder같은 IE10에서만 동작하는 속성의 경우 호환성 모드가 추가될 경우 아래와 같은 방법으로는 속성값을 뽑아오지 못하고 undefined를 뿌려주는 문제가 생기게 됩니다.
[html]
<input type="text" id="input" placeholder="ID를 입력해주세요." />

<srcipt type="text/javascripty">
alert(document.getElementById(‘input’)[‘placeholder’]);
//undefined
</script>
[/html]

해결 방법은 아래와 같이 attributes를 사용하여 값을 뽑아오면 되겠습니다.
[js]
alert(document.getElementById(‘input’).attributes[‘placeholder’].value);
[/js]

IE는 10이 되서도 문제를 일으키는군요.ㅠ

CSS Flexbox

여러가지 방법이 있겠지만 Flexbox를 이용한 유동적으로 늘어나고 줄어드는 input박스를 구현해봤습니다.
요즘 모바일 코딩시 전화번호 입력폼, 주민등록번호 입력폼등에서 많이 사용하고있습니다.
좋은 방법이 될지 확신은 안서지만 가장 편하더군요.-_-

더 보기 “CSS Flexbox”

HTML Attribute

datetime

YYYY-MM-DDThh:mm:ssTZD 기준으로 사용
예) 2012-09-19T11:17:20+09:00

  • T는 고정으로 들어가는 부분
  • 시간, 날짜는 2자리수로 표시
  • TZD은 협정 세계시를 따라 한국은 +09:00

사용 태그 : time, del, ins

Demo

안녕 안녕하세요

[html]
<del datetime="2012-09-19T11:17:20+09:00">안녕</del>
<ins datetime="2012-09-19T11:17:20+09:00">안녕하세요</ins>
[/html]

잘 안쓰기에 안외워지는 코드들을 정리해서 올려두는 포스팅입니다.