<script>

function foundItem() {

alert("found!!");

}

</script>

<body>

<a href="javascript: foundItem()" accesskey="n">foundItem</a>

</body>

accesskey 속성은 마우스 등을 쓰지 않는 환경을 위해 링크나 입력 폼에서 키보드의 키 입력만으로 동작을 실행할 수 있도록 accesskey 속성값에 access 할 영어 또는 숫자 한문자를 지정하여 단축키를 설정한다.

accesskey의 실행 방법은 사용자의 OS와 브라우저에 따라 다르다. 특히, 다른 브라우저와는 다르게 IE(인터넷 익스플로러)에서는 <a> 태그에 지정된 accesskey를 실행하면 지정된 링크가 실행되는 것이 아니라, <a> 태그로 포커스가 이동된다. 이때 Enter를 눌러야 지정된 링크가 실행된다.

IE(인터넷 익스플로러에서는 예약어(F, E, V, A, T, H)는 사용 할 수 없다.

* 브라우저별 accesskey 실행 방법

1. Window IE 6/7/8/9 : Alt + accesskey -> 포커스 이동

2. Window Firefox 3 : Alt + Shift + accesskey -> 실행

3. Window Safari 5 : Alt + accesskey -> 실행

4. Window Chrome : Alt + accesskey -> 실행

5. Window Opera 10 : Shift + Esc + accesskey -> 실행

 

이전 포스트를 통해서 javascript 압축방법을 소개한 적이 있다. CSS도 물론 압축이 가능하다. 다음 링크를 확인해보자. 온라인 상에서 바로 결과를 확인할 수 있다. 압축의 원리는 중복된 스타일을 제거하고 공백등 불필요한 문자열을 제거하는 것이다. 


http://www.csscompressor.com/



또는 javascript 압축 툴로도 사용하고 있는 Yahoo의 YUI Compressor 로도 가능하다.


http://yui.github.com/yuicompressor/


웹 폰트는 이전에 포스팅 한 woff(Web Open Font Format, http://www.hizine.net/61)를 이용한다. 아직 모든 브라우저에서 지원하지 않는다. 지원 목록은 다음과 같다.

 

  • Firefox since version 3.6
  • Google Chrome since version 6.0
  • Internet Explorer 9
  • Konqueror since KDE 4.4.1
  • Opera since version 11.10 (Presto 2.7.81)
  • Safari 5.1
  • other WebKit-based browsers since WebKit build 528

 

확인했으면 아래 링크를 방문해서 맘에 드는 폰트를 선택한다.

 

http://www.google.com/webfonts

 

 

나는 예쁜 손 글씨체인 Bonbon 을 선택했다.

 

 

선택했으면 오른쪽 아래에 Quick-use를 클릭하면 내용에 다음과 같이 포함해야 할 css파일과 font-family 이름을 확인할 수 있다.

 

<link href='http://fonts.googleapis.com/css?family=Bonbon' rel='stylesheet' type='text/css'>

 

font-family: 'Bonbon', cursive;

 

 

예제에 나와있는 대로 아래와 css에 추가하거나 inline으로 style 속성에 추가해서 사용할 수 있다.

 

h1 { font-family: 'Metrophobic', Arial, serif; font-weight: 400; }

2014년이나 되야 표준화로 정립될 듯. (엄청 더디게 진행되는 느낌이 많이 든다. 하지만 실제적으로 표준안이 나오기 전에도 사용할 수 있을 정도의 수준은 Q2 이후에는 가능하지 않을까 라고 개인적으로 예상해본다. 2개 이상의 브라우저를 뜻하는 것이 대부분의 사용자들이 사용하고 있는 브라우저일 가능성이 높을 것이고 메이저 브라우저가 지원하면 자연스럽게 경쟁에서 뒤쳐지지 않기 위해 다른 브라우저에서도 빠르게 지원할 가능성이 높다. webkit같은 오픈 소스를 사용한다면 더 적용이 빨라질 거라고 생각한다.)

 

http://www.jopenbusiness.com/mediawiki/index.php/HTML5#HTML5_.ED.91.9C.EC.A4.80.ED.99.94_.EC.9D.BC.EC.A0.95 참고

 

  • 2006.06 : 웹 하이퍼텍스트 워킹그룹(WHATWG) 출범
  • Web Form 2.0, Web Applications 1.0
  • 2007.03 : 새로운 HTML 워킹 그룹 생성
  • 2009.10 : W3C에서 XHTML 전환 실패를 인정함
  • 2011.05 : HTML5 최종 초안 (Last Call Working Draft)
  • 2012.Q2 : HTML5 후보 표준안 (Candidate Recommendation) - 2개 이상의 브라우저에서 테스트 완료
  • 2014.Q1 : HTML5 제안 표준안 (Proposed Recommendation) - 브라우저 업체의 피드백 반영
  • 2014.Q2 : HTML5 최종 표준안 (Recommendation)

 

http://www.zdnet.co.kr/news/news_view.asp?artice_id=20110215174256 기사 참고

HTML 마크업 기술의 발전 과정

 

http://ettrends.etri.re.kr/PDFData/27-4_083-095.pdf 참고

+ Recent posts