영욱닷컴(http://youngwook.com)

2011. 9. 28. 08:30

7.7 HTML5 Semantic <footer>

HTML5 2011. 9. 28. 08:30

<FOOTER>는 웹 문서의 하단에 주로 저작권 정보나 서비스 제공자 정보 등을 제공하는 부분을 의미 합니다. 너무 간단한 거라.. 길게 설명하기도 어렵습니다.
하지만 <HEADER>의 경우와 마찬가지로 <ARTCLE> <SECTION>등의 요소의 마지막에 사용 할 수도 있습니다만 아직 어떻게 활용할 지는 좀 더 고민해 봐야할 것 같습니다.

<!DOCTYPE HTML>
<HTML><HEAD>
<TITLE>The Ramblings of a Scientist</TITLE>
<BODY>
<H1>The Ramblings of a Scientist</H1>

<ARTICLE>
<H1>Episode 15</H1>
<VIDEO SRC="/fm/015.ogv" CONTROLS PRELOAD>
<P><A HREF="/fm/015.ogv">Download video</A>.</P>
</VIDEO>
<FOOTER> 
<P>Published <TIME PUBDATE DATETIME="2009-10-21T18:26-07:00"></TIME></P>
</FOOTER>
</ARTICLE>

<ARTICLE>
<H1>My Favorite Trains</H1>
<P>I love my trains. My favorite train of all time is a Kof.</P>
<P>It is fun to see them pull some coal cars because they look so
dwarfed in comparison.</P>
<FOOTER> 
<P>Published <TIME PUBDATE DATETIME="2009-09-15T14:54-07:00"></TIME></P>
</FOOTER>
</ARTICLE>

<FOOTER> 
<NAV>
<P><A HREF="/credits.html">Credits</A>-
<A HREF="/tos.html">Terms of Service</A> -
<A HREF="/index.html">Blog Index</A></P>
</NAV>
<P>Copyright © 2009 Gordon Freeman</P>
</FOOTER>

</BODY>
</HTML>

김영욱 iwinkey@hotmail.com

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

HTML5 강좌 전체 목록

저작자표시변경금지

html5, HTML5시리즈, Semantic

0 0

2011. 9. 27. 12:30

7.6 HTML5 Semantic <header>

HTML5 2011. 9. 27. 12:30

<HEADER>는 해당 문서의 머릿글을 표시하기 위해서 사용합니다. 위의 글처럼 메인 타이틀이 되는 부분들을 여기에서 활용합니다. 사용할 때에는 제목과 같은 정보만 사용하는게 아니라 간단한 설명을 함께 넣는 것이 좋습니다.

<article>
<header>
<h1>Military Offers Assurances to Egypt and Neighbors</h1>
Published : <time datetime="2011-02-13" pubdate>February 13 2011</time>)
</header>
<p>
CAIRO - As a new era dawned in Egypt on Saturday,
the army leadership sought to reassure Egyptians and
the world that it would shepherd a transition to civilian
rule and honor international commitments like the peace treaty with Israel.
</p>
</article>

하지만 <HEADER>는 문서 전체의 머릿글로도 활용할 수 있지만 각 섹션이나 아티클에도 사용할 수 있다고 합니다. 어떻게 사용하고 활용해야 하는지 아직 마땅한 권장 사항은 없기 때문에 가급적 혼란을 피하기 위해서 문서 전체의 머릿글로 활용하는 것이 좋지 않을까 하는 생각입니다.

<section>
<header>
    <h1>Application</h1>
    <h2>Paid iphone apps</h2>
    </hgroup>
</header>

<ul>
    <li>Education</li>
    <li>Entertainment</li>
    <li>Family</li>
    <li>Games</li>
    <li>News and Weather</li>
</ul>
</section>

김영욱 iwinkey@hotmail.com

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

HTML5 강좌 전체 목록

저작자표시변경금지

html5, HTML5시리즈, Semantic

0 1

business management dissertation 2012.03.30 16:04 ADDR EDIT/DEL REPLY
Your post is very informative. I admire your efforts. I will keep on coming here to see new updates .Thanks for sharing this information.

2011. 9. 27. 08:30

7.5 HTML5 Semantic <section>

HTML5 2011. 9. 27. 08:30

<SECTION> 태그는 문서 내에서 같은 의미의 구역을 나눌 때 사용합니다. 여기서 주의해야 할 것이 구역을 나누는 기준은 콘텐츠이지 레이아웃은 아닙니다. 즉 내용이 같은 묶음을 만들어 낼 때 사용하는 것이 <SECTION>이라고 할 수 있습니다. 하나의 웹 문서는 여러개의 <SECTION>으로 구성할 수 있으며 이떻게 <SECTION>을 잘 나누어 주게 되면 나중이 해당 문서를 다양하게 활용하거나 각종 디바이스의 소프트웨어가 적절히 이용하기 좋아지는 장점이 있습니다.

<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>

<section>
<h1>Taste</h1>
<p>They taste lovely.</p>

<section>
<h1>Sweet</h1>
<p>Red apples are sweeter than green ones.</p>
</section>

</section>

<section>
<h1>Color</h1>
<p>Apples come in various colors.</p>
</section>
</body>

<SECTION>위의 예처럼 중첨해서 사용할 수도 있지만 권장하지는 않습니다. 이렇게 중첩이 많이 된다면 나중에 이 문서를 이해하는데 어려움이 있을 수 있기 때문에 가급적이면 중첩된 구조는 만들지 않는 것이 좋습니다.

어떻게 보면 이런거 없이도 지금껏 웹 문서를 잘 만들고 활용해 왔는데 왜 갑자기 귀찬하게 의미를 나누는지 궁금해 질 수도 있지만 시맨틱 웹의 장점은 약간의 귀찮음 보다 더 많이 있기 때문에 꼭 의미 있는 집합을 <SECTION>으로 나누어 주면 좋을 듯 합니다.

김영욱 iwinkey@hotmail.com

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

HTML5 강좌 전체 목록

저작자표시변경금지

html5, HTML5시리즈, Semantic

0 0

2011. 9. 26. 16:00

7.4 HTML5 Semantic <progress>

HTML5 2011. 9. 26. 16:00

진행률을 나타낼 때 사용하는 것이 Progress bar입니다. 주로 파일 복사등에서 흔히 볼 수 있지만 웹 상에서 특정 작업의 진행율을 보여주거나 업무 진척등을 일목요연하게 보여주는 용도로도 흔히 사용할 수 있습니다. 위와 같이 Progress를 활용하고자 할 때에는

Progress of Task A : <progress value="60" max="100">60%</progress>

와 같이 표현하면 60%의 진행률을 보여줄 수 있습니다.
아직까지 Progress는 Chrome 8 버전 이상 혹은 Opera 11 이상만 지원되고 있습니다.

Browsers	Progress element support
IE 9 Beta
Firefox 4
Safari 5
Chrome 8	✓
Opera 11	✓

실시간으로 특정 그래프를 조정하고 싶다면 역시 방법은 Java Script를 사용하는 방법이 있습니다. Java Script에서 진행율을 표현하고 싶으면

<section>
<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>

<script>
var progressBar = document.getElementById('p');

function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
}
</script>
</section>

과 같이 활용할 수 있습니다.

김영욱 iwinkey@hotmail.com

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

HTML5 강좌 전체 목록

저작자표시변경금지

html5, HTML5시리즈, Semantic

0 3

Penny Stock 2012.01.19 11:43 ADDR EDIT/DEL REPLY
나는 페니 주식에 대한 응용 프로그램 작업
이 자바 스크립트 정보를 주셔서 감사합니다
H2ksj 2012.02.07 14:58 ADDR EDIT/DEL REPLY
Semantic <header> 의 링크가 Semantic <progress>로 잡혀있습니다.
- winkey 2012.02.07 22:05 신고 EDIT/DEL
  감사합니다. 링크 오류를 바로 잡았습니다. ^^

2011. 9. 26. 12:30

7.3 HTML5 Semantic <meter>

HTML5 2011. 9. 26. 12:30

<METER>는 이름 그대로 특정한 수치를 나타낼 때 사용하는 태그 입니다. 점수, 백분률, 무게 등 다양한 형태의 수치를 모두 표현할 수 있으며 해당 되는 수치가 어떤 범위에서 어떠한 기대치를 원래 가지고 있었는지를 표현할 수 있습니다.

이렇게 이야기 하면 다소 어려운 느낌이 들 수도 있습니다만 실제로 사용하는 방법은 아주 간단합니다.

아래와 같이 표현하면 최소값이 0이고 최대값이 100 사이에서 95를 가진 값을 표현 할 수 있습니다.

Science : <meter min="0" max="100" value="95">95 of 100</meter>

제가 글을 쓰고 있는 현재 <METER> 태그는 Chrome과 Opera만 지원되고 있습니다.

Browsers	Render meter element as gauge
IE 9 Beta
Firefox 4
Safari 5
Chrome 8	✓
Opera 11	✓

<METER> 태그와 함께 사용할 수 있는 속성은 아래와 같습니다.

Attributes	Descriptions
value	You need to specify a value in number in order to use "meter" element. This is an mandatory attribute, No excuse! The number can be integer or floating point number.
min	Minimum value of meter element. If unspecified, it will be Zero (0).
max	Maximum value of meter element. If unspecified, it will be One (1).
low	This is optional unless you wish to indicate the low value of the range.
high	This is optional unless you wish to define high value of the range.
optimum	This is completely optional. This attribute is for specifying an optimum point of a range.

위의 속성중에서 optimum 속성은 원래 기대했던 기대치를 표현 할 때 사용할 수 있습니다.

김영욱 iwinkey@hotmail.com

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

HTML5 강좌 전체 목록

Canvas
Canvas: Rectangle
Canvas: Shadow
Canvas: Path
Canvas: Image
Canvas: Text

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

Towards Semantic Web
Semantic <mark>
Semantic <time>
Semantic <meter>
Semantic <progress>
Semantic <section>
Semantic <header>
Semantic <footer>
Semantic <nav>
Semantic <article>
Semantic <aside>

저작자표시변경금지

html5, HTML5시리즈, Semantic

0 0

2011. 9. 26. 09:47

7.2 HTML5 Semantic <time>

HTML5 2011. 9. 26. 09:47

HTML5는 의미적인 접근이 중요하게 부각되고 있습니다. 그래서 의미를 표현하는 태그들이 다수 추가되었습니다. 그 중의 하나가 바로 <TIME> 태그 입니다.
일반적으로 "2011-09-26" 이렇게 표기하면 사람 눈에는 이게 날짜로 보일지 몰라도 기계적으로 이해하는 것은 많은 어려움이 따를 뿐 아니라 잘 못 이해될 여지도 많습니다.

날짜 혹은 시간 타입이라는 것을 명시적으로 표현할 수 있게 해주는 것이 바로 <TIME> 태그 입니다.

내 <TIME datetime="2000-07-02">생일</TIME>에는 많은 축하를 받습니다.

위와 같이 생일에 <TIME>으로 날짜 값을 표현해서 걸어고 있는 것을 볼 수 있습니다.
또 다른 표현 방법을 보면

나는 아침 <TIME>07:00</TIME>에 수영하러 갑니다.

아침 시간인 07:00분이 시간으로 명확하게 인식할 수 있게 되었습니다.

김영욱 iwinkey@hotmail.com

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

HTML5 강좌 전체 목록

저작자표시변경금지

html5, HTML5시리즈, Semantic

0 0

2011. 9. 26. 09:46

7.1 HTML5 Semantic <mark>

HTML5 2011. 9. 26. 09:46

기존에 HTML 작성시 특정한 단어나 일부분을 강조하고 싶을 때 기존에는 <STRONG> 태그를 많이 사용하셨을 것입니다. 하지만 <STRONG>태그의 경우 해당 부분을 시각적으로 강조하는 역할만 부여되어 있는 상태 입니다.
그래서 의미적으로 강조하고 싶으시다면 <MARK> 태그를 사용하기 바랍니다.

Basically, it is used to bring the reader's attention to <mark>a part of the text</mark>

<MARK>태그의 경우는 의미적인 강조는 해주지만 시각적인 효과는 없기 때문에 시각적인 효과를 함께 주고 싶으면 CSS를 이용해서 효과를 줄 수 있습니다.

mark { background-color:#ff9; color:#000; font-style:normal; font-weight:bold; }

김영욱 iwinkey@hotmail.com

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

HTML5 강좌 전체 목록

저작자표시변경금지

html5, HTML5시리즈, Semantic

0 4

2011.09.22 13:09 ADDR EDIT/DEL REPLY
비밀댓글입니다
민쓰 2011.11.24 16:15 ADDR EDIT/DEL REPLY
처음 공부하는 사람인데요..^^ 다른 자료나 책에서는 <strong>태그의 경우 시각적으로뿐만이 아니라 의미적으로도 강조한다고 주로 쓰여있는데 이 글의 맨 윗부분에서는 시각적으로만 강조한다고 쓰여있어서요.. <mark>의 경우가 시각적으로만 강조한다고..
어떤게 맞는지 궁금해서요...
- winkey 2011.11.30 08:27 신고 EDIT/DEL
  Strong 태그가 시각적으로 볼드 효과만 내는게 맞습니다. ^^
dissertation in business 2012.03.30 16:13 ADDR EDIT/DEL REPLY
It’s a very informative article.I am happy to read all this stuff.you are doing a great job. I admire your efforts. Thanks for sharing this article.

2011. 9. 22. 09:55

7. HTML5 Towards Semantic Web

HTML5 2011. 9. 22. 09:55

1990년 팀 버네스 리의 의해서 태어난 월드 와이드 웹을 우리는 사랑하고 있습니다. 물론 그가 인터넷을 만들어 낸 것은 아니지만 HTML과 HTTP 프로토콜에 크게 기여를 한 것은 사실입니다.
그때 당시는 하이퍼링크로 연결된 웹 세상을 만들어 내는 것이 중요한 이슈였다면 지금은 의미가 부여된 의미 있는 웹 문서를 만드는 것에 많은 사람들이 관심을 기울이고 있습니다. HTML5에서는 새로운 레벨의 태그를 통해서 의미를 전달하려고 하고 있습니다.

새로운 레벨의 의미를 전달하기 위한 태그들로 아래와 같은 요소들이 추가 되었습니다. 아래 태그들은 글 안에서 새로운 의미를 부여할 수 있습니다.

<MARK>
<TIME>
<METER>
<PROGRESS>

문서의 구조 안에서 새로운 의미를 부여하기 위한 태그들도 함께 추가 되었습니다.

<SECTION>
<HEADER>
<FOOTER>
<NAV>
<ARTICLE>
<ASIDE>

앞으로 관련된 태그들을 하나씩 살펴 보도록 하겠습니다.

김영욱 iwinkey@hotmail.com

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

HTML5 강좌 전체 목록

저작자표시변경금지

html5, HTML5시리즈, Semantic

0 2

2011.09.21 13:57 ADDR EDIT/DEL REPLY
비밀댓글입니다
- winkey 2011.09.22 09:57 신고 EDIT/DEL
  바빠서 미처 못적었네요.. 급 수습..

2011. 9. 21. 08:30

6.10 HTML5 Input Type: Color

HTML5 2011. 9. 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 강좌 전체 목록

저작자표시변경금지

html5, HTML5시리즈, Web Form

0 0

2011. 9. 20. 12:30

6.9 HTML5 Input Type: Date

HTML5 2011. 9. 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 강좌 전체 목록

저작자표시변경금지

html5, HTML5시리즈, Web Form

0 1

cosmos 2012.03.15 11:45 ADDR EDIT/DEL REPLY
<input type = "date"> 해보니깐 안되는데 왜 그럴까요? 크롬에서도 안되고 파이어폭스에서도 안되고 ....

영욱닷컴(http://youngwook.com)

검색결과 리스트

2011/09 에 해당되는 글 29건

7.7 HTML5 Semantic <footer>

댓글을 달아 주세요

7.6 HTML5 Semantic <header>

댓글을 달아 주세요

7.5 HTML5 Semantic <section>

댓글을 달아 주세요

7.4 HTML5 Semantic <progress>

댓글을 달아 주세요

7.3 HTML5 Semantic <meter>

댓글을 달아 주세요

7.2 HTML5 Semantic <time>

댓글을 달아 주세요

7.1 HTML5 Semantic <mark>

댓글을 달아 주세요

7. HTML5 Towards Semantic Web

댓글을 달아 주세요

6.10 HTML5 Input Type: Color

댓글을 달아 주세요

6.9 HTML5 Input Type: Date

댓글을 달아 주세요

카테고리

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함

태그목록

공지사항

최근에 받은 트랙백