2011/09/26 에 해당되는 글 4건

  1. 2011.09.26 7.4 HTML5 Semantic <progress> (3)
  2. 2011.09.26 7.3 HTML5 Semantic <meter>
  3. 2011.09.26 7.2 HTML5 Semantic <time>
  4. 2011.09.26 7.1 HTML5 Semantic <mark> (4)
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 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. 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
  7. 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 3
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 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. 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
  7. 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 강좌 전체 목록

  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. 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
  7. 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: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 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. 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
  7. 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 4
  • 2011.09.22 13:09

    비밀댓글입니다

  • 민쓰 2011.11.24 16:15

    처음 공부하는 사람인데요..^^ 다른 자료나 책에서는 <strong>태그의 경우 시각적으로뿐만이 아니라 의미적으로도 강조한다고 주로 쓰여있는데 이 글의 맨 윗부분에서는 시각적으로만 강조한다고 쓰여있어서요.. <mark>의 경우가 시각적으로만 강조한다고..
    어떤게 맞는지 궁금해서요...

    • winkey 2011.11.30 08:27 신고

      Strong 태그가 시각적으로 볼드 효과만 내는게 맞습니다. ^^

  • dissertation in business 2012.03.30 16:13

    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.

1