'분류 전체보기' 카테고리의 글 목록 (12 Page)

2011. 11. 17. 14:23

신선한 Nokia의 새로운 컨셉 폰 동영상

Mobile 2011. 11. 17. 14:23

노키아의 새로운 폰 컨셉... 다양한 센서와 앞면, 뒷면 측면을 다양하게 잘 활용하고 있습니다.
모처럼 신선하고 새로운 컨셉을 볼 수 있습니다.

저작자표시변경금지

Nokia, windows phone

0 0

2011. 11. 14. 09:31

7.10 HTML5 Semantic <aside>

HTML5 2011. 11. 14. 09:31

그 동안의 공백을 깨고 마지막 태그를 설명하려고 합니다.
<ASIDE>태그는 본문 내용에 대한 추가적인 설명이나 혹은 Tip을 설명하기 위해서 사용하는 태그 입니다. 아래 그림과 같이 본문과 별도로 추가적인 언급을 위해서 사용합니다.

<ASIDE>태그는 HTML5의 의미 위주의 웹 (시멘틱 웹) 정신을 잘 설명해 주는 태그라고 할 수 있습니다.
이렇게 해서 마지막 태그까지 잘 설명했습니다.

감사합니다.

김영욱 iwinkey@hotmail.com

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

HTML5 강좌 전체 목록

저작자표시변경금지

html5, HTML5시리즈, Semantic

0 0

2011. 10. 6. 12:30

기존에 웹 문서 안에서 특정 글이나 내용을 표현하기 위한 방법이 딱히 없었습니다. 그래서 이런 경우에는 폭넓게 혹은 암묵적으로 사용했던 방법이 <div class="article">과 같이 <DIV> 태그를 사용하는 방법이 있었습니다.
HTML5에서는 이런 경우에 사용하기 위해서 <ARTICLE>이라는 태그가 따로 준비 되어 있습니다.
<ARTICLE>은 전체 웹 페이지 안에서 특정 내용이나 기사 혹은 글을 표시하기 위해서 제공됩니다.

<body>
<h1>My blog</h1>
<article>

<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>

<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>

<footer>
<a href="?comments=1">Show comments...</a>
</footer>

</article>
<body>

위의 예에서 보는 바와 같이 하나의 <ARTICLE> 요소 안에서 <HEADER><FOOTER>와 같이 완전한 하나의 형식을 구현할 수도 있으며 하나의 웹 페이지 안에서 <ARTICLE>요소가 여러번 반복되어도 상관없습니다.

나중에 특정 앱에서 <ARTICLE> 요소만 찾아서 보여주는 등의 작업을 해도 괜찮은 기사 뷰어 앱을 만들 수 있을 것으로 보입니다.

김영욱 iwinkey@hotmail.com

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

HTML5 강좌 전체 목록

저작자표시변경금지

html5, HTML5시리즈, Semantic

0 0

2011. 10. 6. 08:18

7.8 HTML5 Semantic <nav>

HTML5 2011. 10. 6. 08:18

<NAV>태그는 네비게이션을 위한 부분을 표시하기 위한 태그 입니다. HTML5는 기본적으로 외부 장치나 앱에서 잘 활용되기 위한 목적이 강함니다. 때문에 이 부분이 메뉴이고 이동을 위해서 정의 되었다는 것을 알려주는 것이 필요 합니다.

<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
</nav>

아직까지 <NAV> 태그가 구체적으로 어떻게 사용되는지 보여주는 실 사용예는 찾아보기 어렵습니다만 메뉴등에서 사용하면 나중에 앱에서 이해하기 수월해 질것 같습니다.

김영욱 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. 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

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

검색결과 리스트

분류 전체보기 에 해당되는 글 656건

신선한 Nokia의 새로운 컨셉 폰 동영상

댓글을 달아 주세요

7.10 HTML5 Semantic <aside>

댓글을 달아 주세요

7.9 HTML5 Semantic <article>

댓글을 달아 주세요

7.8 HTML5 Semantic <nav>

댓글을 달아 주세요

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>

댓글을 달아 주세요

카테고리

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함

태그목록

공지사항

최근에 받은 트랙백