반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

HTML5 기본 Semantic Tag 들 알아보기 -3-

2012. 1. 1. 04:18 | Posted by 솔웅


반응형
오늘 HTML5 기본 Semantic Tag 알아보기 마지막 시간입니다.
나중에 또 좋은 정보를 얻으면 공부하고 여기 정리해 놓겠지만 wiredwiki의 강좌에서는 마지막 입니다.

오늘 다룰 Tag들은 <mark><progress> 입니다.
<mark> 는 의미적인 의미에서 강조를 주는 태그 입니다. 예전에 <strong>은 시각적인 의미에서 강조를 주었거든요.
<mark>를 이용한다고 더 글자가 진해지거나 하지는 않습니다. CSS를 이용해서 처리해야합니다.
그리고 <progress> 태그는 진행바입니다. 다운로드 같은거 받을 때 얼마나 진행됐는지 보여주는 겁니다.

그리고 HTML5에서 새로워진 것 중 하나가 CSS 사용법인데요.
예전엔 CSS를 사용하려면 <head> 안에 넣거나 외부파일로 만든 다음 <head> 안에서 link를 걸어야 됐습니다.
아니면 <body> 내에 있는 다른 Tag 안에서 달아주던가 했는데요.
HTML5에서는 하나의 방법이 더 생겼습니다.
<style scoped> </style> 안에 넣으면 됩니다.

 <!doctype html>
<html lang="en">
<head>
    <title> Dougy's HTML5 Customized Video Player</title>
    <meta charset="utf-8"/>
</head>
<body>
    <p> Welcome to <mark> HTML5 </mark> </p>
    <p> Status: <progress min="0" max="100" value="38"></progress></p>
    <style scoped>
        h1 {color:red;
            font-family:verdana;
            font-size:normal;}
    </style>
    <p>
    <h1> Page Title</h1>
    <p>
    <a href="http://html5.validator.nu/"> http://html5.validator.nu/ </a>
    <p>   
</body>
</html>

실제로 이 3개 태그를 사용한 코드입니다.
화면을 볼까요?

처음에 <mark> 처리 한 것은 배경색이 노란색으로 됐네요. 배울 때는 아무런 변화가 없다고 배웠는데... 제가 테스트하는 브라우저(크롬)에서는 <mark> 를 이용하면 이렇게 노란 배경색이 깔리나 봅니다.

그 다음의 <progress>를 이용한 거구요. 이걸 다이나믹하게 이용하려면 자바 스크립트를 사용해야 되겠죠?

그 다음에 <body> 내에서 CSS 를 적용한 겁니다.

밑에 링크는 html5가 문법적으로 잘 작성됐는지 안 됐는지 알아 볼 수 있는 싸이트 입니다.

참고하세요.

HTML,CSS,JavaScript 로 프로그래밍 할 때 제일 문제가 디버깅,테스트 인데..
지난번에 Sencha Touch 세미나 다녀와서 올린 글에 JavaScript 문법 체크해 주는 싸이트 올렸었던거 같은데요. 여긴 HTML5 입니다.

잘 되는지 한번 저도 사용해 봐야겠습니다.

이런 싸이트가 있다면 디버깅 편하게 할 수 있도록 하는 tool도 있을 것 같은데..
혹시 아시는 분 계시면.. 알려 주세요...

그럼...
반응형