블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 달린 댓글

'html5'에 해당되는 글 3건

  1. 2013.03.04 [HTML5] Progress Bar CSS입히기 (2)
  2. 2009.04.10 HTML5 Gallery (4)
  3. 2008.03.27 IE8에서의 자바스크립트





<progress> 요소는 HTML5 에 새로이 추가된 시맨틱 태그입니다.

각 브라우저별로 별도로 디스플레이되는 관계로 디자인 하기가 까다로운것이 사실입니다.

이번에는 이러한 Progress 요소에 CSS를 입히는 방법에 대해서 알아보도록 하겠습니다.


그전에 디자이너라면 알아두어야할 Progress Bar 디자인 35 를 먼저 읽어 보시길 권합니다.



간단한 방법

원본: http://www.hongkiat.com/blog/html5-progress-bar/



마크업

Progress 요소는 다음과 같이 마크업을 작성합니다.


<progress value="10" max="100">

     <strong>Progress : 10% </strong>

</progress>  


일반적으로 위와같이 작성하였을 경우 윈도우와 OS X에서 보이는 화면은 다음과 같이 브라우저 디폴트로 저장됩니다.

굵게 표현된 부분은 Progress Bar의 fall back (대체) 요소로 사용합니다. Progress bar를 지원하지 않는 브라우저를 위한 것인것은 대부분들 다 아시죠?





스타일시트 작성


progress {  

    background-color: #f3f3f3;  

    border: 0;  

    height: 18px;  

    border-radius: 9px;  

}  


그러나 위와 같이 작성하여도 아래와 같이 각 브라우저별로 다르게 화면에 출력됩니다.





파이어폭스에서는 Progress Bar에 스타일은 적용되나 애니메이션이나 Progress Bar의 Value에는 스타일이 적용되지 않으며, 크롬브라우저와 사파리 브라우저는 브라우저의 기본 스타일 및 OS플랫폼의 스타일이 제거되고 Webkit Style이 적용됩니다.


웹킷계열의 브라우저에서는 위의 마크업이 다음과 같이 본연의 요소와 값 요소로 해석됩니다.

<progress>  

    ┗ <div> ::-webkit-progress-bar  

         ┗ <div>::-webkit-progress-value  



따라서 스타일시트도 다음과 같이  Progress 본연의 스타일과 Value값을 별도로 작성해 주셔야 합니다.


progress::-webkit-progress-bar {  

    /* style rules */  

}  

progress::-webkit-progress-value {  

    /* style rules */  



파이어폭스의 경우에는 웹킷계열과 같게 Vendor-prefix 및 가상선택자를 사용하지만 아래와 같이 하나만 쓰는것이 다릅니다.


progress::-moz-progress-bar {  

    /* style rules */  

}   



결론적으로 Progress Bar의 스타일시트를 바꾸시려면 다음과 같이 작성합니다.


progress {  

    /* style rules */  

}  

progress::-webkit-progress-bar {  

    /* style rules */  

}  

progress::-webkit-progress-value {  

    /* style rules */  

}  

progress::-moz-progress-bar {  

    /* style rules */  

}  




애니메이션 처리


애니메이션 처리의 경우 Progress bar의 min 값과 max값을 계산하여 자바스립트로 구현합니다.

jQuery라이브러리를 이용하여 구현할 경우 다음과 같이 마크업을 작성합니다.

0에서 시작하여 max=100 까지 애니메이션을 구현합니다.


<progress id="progressbar" value="0" max="100"></progress>  


스크립트는 setInterval을 이용하여 부드러운 효과를 주기위해 (1000 / max) * 5 ms 마다 구현하도록 합니다.


$(document).ready(function() {  

    var progressbar = $('#progressbar'),  

        max = progressbar.attr('max'),  

        time = (1000/max)*5,      

        value = progressbar.val();  

  

    var loading = function() {  

        value += 1;  

        addValue = progressbar.val(value);  

          

        $('.progress-value').html(value + '%');  

  

        if (value == max) {  

            clearInterval(animate);                      

        }  

    };  

  

    var animate = setInterval(function() {  

        loading();  

    }, time);  

}; 



최종소스 다운로드

source.zip





Progress bar 지원브라우저 현황


 CanIUse.com, 에 따르면 HTML5 progress 요소는 아래 브라우저에서 지원합니다: Firefox 16+, Chrome 8+, Safari 6+ and Opera 11+.









고급 CSS 먹이기

출처: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/




소스다운로드:

progressbar.zip






Reference Site






HTML5의 FileAPI 과 Drag and Drop, XMLHttpRequest 2 를 이용한 파일업로드, 다운로드시 유용하게 사용하시길 바랍니다. ^^*





'Publisher > HTML/HTML5' 카테고리의 다른 글

[HTML5] Progress Bar CSS입히기  (2) 2013.03.04
SVG와 CANVAS사이의 선택  (16) 2010.03.09
HTML5 Gallery  (4) 2009.04.10
웹페이지 소스보기 금지  (0) 2008.08.19
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2013.03.04 15:57 신고 아즈키  댓글주소  수정/삭제  댓글쓰기

    간만에 포스팅하셨네요.ㅎ
    그동안 잘 지내셨는지 모르겠네요. 좋은 하루되셔요 ㅎㅎ

HTML5 Gallery

Publisher/HTML/HTML5 / 2009. 4. 10. 20:18


아직 Editors Draft (2009년 4 월 8일) 중인 HTML5로 된 사이트를 한곳에 모아둔 사이트가 있어서 소개한다.
(데꾸벅 주: 헉 아직 Working Draft상태인줄 알았는데 이 포스트를 작성하다가 링크를 걸기위해 찾아갔더니만 Editor's Draft 상태이다. W3C의 고무줄 스케줄:로드맵 에 따르면 이미 권고안으로 확정되어야 하지만 최소한 Working Draft상태가 올해안에 안끝날줄 알았는데....  조만간.. HTML5로 또 한번 IT쪽이 떠들썩 하겠군~~~)

사이트 주소 : http://html5gallery.com/






구글크롬, IE8, 7, Firefox3, Opera 에서도 깨짐없이 잘 보이고 있다.
HTML소스를 열어보니 <section>, <nav>, <header> 태그들이 보이고 CSS는 3.0 스펙으로 처리되어 있다.
한가해 질때 각각의 사이트 소스를 분석해 보는것도 괜찮을듯 하다.




아래사이트는 HTML5 스펙으로 구성된 사이트들이다... 즐감 하시길...
http://www.tableless.com.br/
http://jacobrask.net/
http://willworkforart.net/
http://a.deveria.com/
http://www.codedread.com
http://www.thatstandardsguy.co.uk/
http://openscriptures.org/
http://www.thewatchmakerproject.com
http://theccaa.net
http://rebathoregon.com/
http://shepherd-interactive.com/
http://weston.ruter.net/
http://richclarkdesign.com
http://chipbarm.com
http://camendesign.com/
http://www.aneventapart.com/
http://www.uxlondon.com/
http://intertwingly.net/blog/

가까운 시일내에 데꾸벅 블로그도 HTML5 + CSS3로 도배를.. 크크~








'Publisher > HTML/HTML5' 카테고리의 다른 글

[HTML5] Progress Bar CSS입히기  (2) 2013.03.04
SVG와 CANVAS사이의 선택  (16) 2010.03.09
HTML5 Gallery  (4) 2009.04.10
웹페이지 소스보기 금지  (0) 2008.08.19
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2009.04.15 09:15 신고 후루룩짭짭  댓글주소  수정/삭제  댓글쓰기

    오오...
    코드가 더 직관적이고 이해하기 쉽게 되겠네요.
    html5 태그에 맞추어 자바스크립트 프레임워크 쪽은 어떻게 대응하고 있는지도 궁금해 지네요.
    ^^;

    • 2009.04.15 19:21 신고 데꾸벅  댓글주소  수정/삭제

      자바스크립트쪽에는 별로 대응할께 없어보이네요..
      이전 태그도 다 지원하고 어차피 브라우저 엔진에 의존적이니깐 HTML5라고 별반 다르지 않을듯 싶네요~

  2. 2010.04.24 12:23 dana  댓글주소  수정/삭제  댓글쓰기

    링크에 마우스 올리면 깜박이는 이거는 어케 만들어요? html 인가요? 아님 css인가요?
    초보라서 너무 예뻐서요 컬러도 이쁘고 좀 갈켜주세요^^

    • 2010.04.27 02:35 신고 데꾸벅  댓글주소  수정/삭제

      ㅎㅎ 주소창에 아래주소 넣고 쳐보세요
      http://cfs.tistory.com/blog/plugins/RainbowLink/rainbow.js

      js 파일 하나 다운로드 하죠? 그거 그냥 집어넣어시면 됩니다.

      javascript로 CSS를 조작하는겁니다.

원본출처 : John Resig's Blog


사용자 삽입 이미지

IE8이 출시된지 2주일이 지난 지금 이전 브라우저에서 정상적으로 동작되던 스크립트들이 IE8에서는 안되는 경우가 있다. 예를 들면 XMLHttpRequest를 통한 전송부분이나 <object>.getElementsByTagName("*")부분일 것이다.







브라우저 특징에 대한 John Resig(이 사람 누군지 알죠?? jQuery)의 생각들을 집어본다.

W3C: querySelector

CSS 선택자(id,class선택자들..)를 쉽게 찾을수 있게 해주는 querySelector가 표준이다. IE8의 경우 CSS2.1을 지원하며 CSS3는 아직 지원하지 않는다.. 아직 표준확정이 되지 않은 CSS3를 지원한다는건...


HTML 5 부분!

HTML5 호환은 환상적인 스펙의 향상이다.

HTML 5: window.location.hash

이미 대부분의 브라우저에서는 지원하고 있지만 ajax에서 뒤로가기 버튼문제에 대해 해결하기 위해 window.loaction.hash를 지원한다. 또한 hashchanged란 이벤트도 지원한다.
window.location.hash는 페이지 URL에 대해 변경된 내용을 저장하는것이다.

HTML 5: postMessage

postMessage는 서로다른 프레임간 통신하는 방법인데 IE8, Opera9, Firefox3,Webkit등에서 앞으로 지원할 예정이라 한다. IE8같은 경우 postMessage를 쓰면 화면자체의 Section부분만 바로 통신하여 가져올수 있으니... 점점 간단해 지겠군효~~


HTML 5: Offline Events

IE8과 Firefox3만 지원하는 기능으로써 자바스크립트를 통해 커넥션을 감지할수 있는 쉬운방법이다.

XDomainRequest

아주 재미있는 기능으로 이기능에 대해선 MS에서 작성한 문서를 참조하기 바란다. 데꾸벅도 설명하기 힘들다.. ㅠ.,ㅠ;

이후 글은 원문에서 찾아보시길...
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요