NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


CSS Bar Graph. Horizontal. Vertical. Star Rating.

본문 건너 뛰기

목록(ul) 요소를 이용하여 CSS로 모양을 낸 수직 막대 그래프 입니다. 이 예제를 새 창으로 보기
목록(ul) 요소를 이용하여 CSS로 모양을 낸 수평 막대 그래프 입니다. 이 예제를 새 창으로 보기
다양한(p, ul, ol, dl) 요소에 콘텐츠로 포함되어 CSS로 모양을 낸 인라인 수평 막대 그래프 입니다. 이 예제를 새 창으로 보기
배경 이미지와 CSS로 모양을 낸 별점 그래프 입니다. 이 예제를 새 창으로 보기

이 밖에 더 많은 예제들이 OUIF | XEUI 페이지에 링크되어 있습니다.

분류: CSS,웹 접근성,웹 표준 | 2010년 3월 17일, 21:23 | 정찬명 | 댓글: 49개 |
트랙백URI - http://naradesign.net/wp/2010/03/17/1233/trackback/

49개의 댓글이 있습니다.

  1. delos island 댓글:

    브라보~!!!

  2. 트루 댓글:

    이게.. 가능..합니..까?;; 멋집니다..+_+

  3. 깡군 댓글:

    이런것까지.. 역시 CSS의 힘은 대단합니다.~~

  4. 쿠크다스 댓글:

    띠옹이네요.

  5. 김무건 댓글:

    background 로 배경그림을 입력하고, 1%단위 표시까지 별점으로 나타낼 수 있겠군요.
    그런데 ul, dl 으로 마크업했다는게 더 사랑스러워 보입니다 +_+

  6. 정찬명 댓글:

    @김무건
    별점 그래프가 따로 준비되어 있는데 같이 보여드리면 좋겠군요. 별점을 새로 추가 했습니다. 감사합니다. ^^

  7. 박순길 댓글:

    +_+ 할 말이 없습니다.

  8. 익명 댓글:

    감사합니다..오…
    생각 못했던 부분이라..더욱 감사합니다~^_^

  9. 정찬명의 생각…

    어제 포스팅 했던 그래프에 수평 그래프와 별점 그래프 추가 업데이트….

  10. 신현석 댓글:

    이렇게 블로그에 소개한 글 하단에 http://naradesign.net/ouif/ 링크도 추가해 놓으면 어떨까요? 저도 혹시 있나 찾아보다가 정리된 페이지가 있는 것을 발견했거든요. 우연히 검색하다 발견하시는 분들에게도 도움이 많이 될 것 같습니다.

  11. 정찬명 댓글:

    @신현석
    아직 정리가 다 된게 아니라서 준비가 되면 공개 하려고 했는데 미리 공개하는것도 좋겠네요. 좋은 의견 감사합니다. ^^

  12. 세이군 댓글:

    http://naradesign.net/wiki/UI_library 페이지에서 발견을 했었는데 ouif로 바뀌면서 사라진게 하나 발견되었습니다. Vertical Align 관련 예제인데요. 추가해주세요.

  13. 정찬명 댓글:

    @세이군
    수직 정렬에 관한 예제는 다른 예제들과 달리 어떤 콤포넌트나 모듈로 분류가 안되서 제외 했었는데요. 넣는게 좋을까요? ^^ (고민 좀 해 보고 되도록이면 넣는 방향으로 다음주에 시행 하겠습니다 ㅎㅎ) 의견 감사합니다.

  14. […] CSS Bar Graph. Horizontal. Vertical. […]

  15. oyster 댓글:

    항상 너무 좋은글 잘 보고 가요~ 감사해요^^

  16. 정찬명 댓글:

    @oyster
    긍정적인 피드백에 저도 감사합니다. ^^

  17. hellen 댓글:

    싸이트를 다니면서 댓글 절대!!!! 안남기는데요.
    여긴 꼭 남기고 싶습니다.

    뭐~ 공부하러 매일매일 들어오고…. 또, 도용(??)하러와서 퍼가는데 인사는 드려야할꺼 같아서요.

    전 디자이너인데요. 이렇게 CSS나 다른부분에 디자인에 심열을 기울인 작품들을 만날수 있는 유일한 싸이트라 생각됩니다.

    항상 감사한 마음으로… 열심히 활용하고 있습니다.
    자주자주 좋은글 부탁드립니다.

  18. 정찬명 댓글:

    @hellen
    제가 디자인 센스는 별로 없지만 좋게 봐주셔서 감사합니다. ^^

  19. ryun 댓글:

    현재 작업하는 것 중에 그래프가 있었는데, 며칠만 더 빨리 확인했다면 일을 더 수월하게 할 수 있었을 것 같아 늦게 본게 아쉬워요. 하지만 남은 것들을 처리 하는데 도움이 될 것 같아요. 감사드립니다.^^

  20. 정찬명 댓글:

    @ryun
    제가 조금 늦었죠~ (개콘버전) ^^ 남은 작업 즐겁게 마무리 하시길 빌께요!

  21. 엘렌 댓글:

    우와~ 너무 멋지십니다^^

  22. 정찬명 댓글:

    @엘렌
    별로 대단한게 아니라서 참 뻘쭘 하네요. ㅎㅎ

  23. 초식동물 댓글:

    와아..

    별로 대단한 게 아니고,

    진정 대단하세요!!

  24. 정찬명 댓글:

    @초식동물
    소스 코드 뜯어보시면 아시겠지만 진정 별거 없습니다. ㅎㅎㅎ

  25. 초식동물 댓글:

    말이 계속 물고 물리는 것 같지만;;

    별 거 아닌 걸로 별 거를 만드는 게 대단하다고 생각해요.^^

  26. 정찬명 댓글:

    @초식동물
    그렇게 봐주시면 저야 뭐 감사할 따름이지요. ㅎㅎ

  27. 댓글:

    꺄오~
    완전완전 멋지십니다!!
    연습고고~!!

  28. 정찬명 댓글:

    @소
    알고보면 CSS 참 쉽다는걸 느끼실꺼예요. ㅎㅎ

  29. 칠전팔기 댓글:

    CSS 배우러 이곳저곳 돌아다니던 중 발견해서 자주 구경을 왔었어요. 참 깔끔하게 만드시는 것 같습니다.

    그런데 예제에 있는 소스를 사용하려면 CSS viewer 같은 것으로 봐야 하는지요? 아니면 다른 방법이 있는데 제가 모르는 것인지요? 초보적인 질문 죄송하지만 제가 워낙 초보라 잘 몰라서 그러니 양해해 주시면 감사하겠습니다.

  30. 정찬명 댓글:

    @칠전팔기
    이 예제를 새 창으로 보기 링크를 클릭하신 다음 소스보기를 하시면 다음과 같이 CSS 파일을 링크하고 있는 코드가 보이실꺼예요.

    [link rel=”stylesheet” type=”text/css” href=”vGraph.css”/]

    vGraph.css 파일을 내려받으시면 됩니다. 그런데 제가 상대 경로를 사용하고 있기 때문에 HTML 문서의 생략된 URL(http://naradesign.net/ouif/uio/graph/***/) 과 함께 연결해서 웹 브라우저 주소창에 넣고 접근해 보세요. 브라우저에 따라 화면에 코드가 직접 열리는 경우도 있고. 다운로드 되는 경우도 있으며. 다운로드 후 드림위버와 같은 편집기를 통해서 파일이 열리는 경우도 있습니다.

    예를 들면 첫 번째 예제의 HTML과 CSS 경로는 다음과 같습니다.

    http://naradesign.net/ouif/uio/graph/vertical/xhtml.html
    http://naradesign.net/ouif/uio/graph/vertical/vGraph.css

  31. 익명 댓글:

    Inline Bar Graph에 position: realtive 는 왜 있는건가요??
    position: realtive 가 넘 많아서 궁금하네요 ㅎㅎ

  32. 정찬명 댓글:

    @익명
    그러게요. 필요 없는 속성입니다. 모두 지워서 업데이트 했습니다. 고맙습니다. ^^

  33. 박경희 댓글:

    안녕하세요.
    JQUERY로는요 원으로된 그래프는 못만드는건 가요?
    다덜 불가능하다고 들하네요. 스크립트로는 절 대 안된다고 하는데요.
    플래쉬로나 가능할거라고 하네요.
    정말 그런건 가요?

  34. 정찬명 댓글:

    @박경희
    못하는게 아니라 아마 안하는거라고 생각합니다.

  35. 박경희 댓글:

    블러그에 이미지 올렸는데요.
    http://blog.naver.com/batomusu/130104757824
    이런것두 가능한가요?
    혹 샘플루 해주실 수는 없나요?

  36. 박경희 댓글:

    제가 원하는 디자인으로 안되고 이상한 구리구리한 프로그램으로 하는걸루
    밖에 안된다고해서 짜증이 나서요.
    저좀 도와주셔요.
    예전에 선생님한테 표준배울때 자바스크립트 하시는 김태곤 선생님 연락처를 잃어버렸어요.

  37. 정찬명 댓글:

    html5, canvas, svg, jquery visualize를 이용하면 각종 그래프 표현이 가능하다고 합니다. http://wonsuk73.tistory.com/m/9

  38. 박경희 댓글:

    이건 제가 바라던 그모양은 불가능한것 같은데요. T.T
    게다가 저희는 html5는 안쓴다고 퍼블리셔가 안될것 같다고 하네요.

  39. ssang 댓글:

    최고십니다 ^^b

  40. 승승 댓글:

    와 멋지네요 진짜 필요했던건데 감사합니다.

  41. 익명 댓글:

    잘 보고 갑니다~ ^^

  42. 백명훈 댓글:

    안녕하세요..
    ‘Vertical Bar Graph’에 대해 궁금한게 있어서요..ㅎㅎ
    일반적으로 하는 로 해서
    css는 div에 position:relative; 를 주고
    p에 position:absolute; bottom:0; height:20%; 을 주는 방식도 있는데
    위 소스처럼 하신 이유가 코딩의 다양한 방식을 얘기하신건지..
    아님 다른 이유가 있으신지 궁금해서요..
    직접 작성하신 소스에서 padding-top과 vertical-align을 이용한 방법은 전혀 몰랐던..ㄷㄷ 또 신기해서 많이 놀랬습니다ㄷㄷㄷ

  43. 정찬명 댓글:

    @백명훈
    다른 이유는 없구요. 여러 가지 방식 중에 하나의 방법을 사용한 것 뿐입니다. 뭐 정답이라는게 있는 것은 아니니까요. ^^;

  44. 익명 댓글:

    진짜 멋지세요 저한테 너무 꼭 필요했어요 ㅠㅠㅠㅠ
    정말 감사합니다!

  45. 익명 댓글:

    그래프 기능 찾아보다가 발견했는데 진짜 유용한거 같아요.
    감사합니다

  46. 익명 댓글:

    감사합니다.^^
    제가 찾던거에요…ㅎ 퍼갈게요~~~^^
    감사합니다.

  47. white space nowrap 댓글:

    오래된 글이라 답변이 있을지 모르겠습니다. ㅠㅠ
    먼저 정말 찾던 것이라 너무나 감사합니다.
    초보 퍼블리셔인데요. 그냥 퍼가는 것 보다는 익히는데 방점을 두고 유심히보고 따라해봤는데요.
    어쩌면 간과하고 넘어갈 수 있는
    inline, vertical-align 다시 되짚어 보는 계기가 되었습니다.
    그런데 단하나~! ‘Vertical Bar Graph’ 에서
    white-space: nowrap; 어떤 특징이..
    bar를 뒤짚는 효과를 줄 수 있는지 이해가 잘안되서요. ㅠㅠ 이 댓글을 피드백 주시면 너무 감사하겠습니다.
    꼭 부탁드려요~!!!

  48. 정찬명 댓글:

    @white space nowrap
    웹에서 white-space는 공백을 의미하고 유저 에이전트(브라우저)는 공백을 기준으로 문자(알파벳, 숫자)를 줄바꿈(wrapping) 합니다. 박스 폭을 넘치는 인라인 또는 인라인 블럭 요소들은 문자와 같이 취급하기 때문에 소스코드에 공백이 포함회어 있으면 공백을 기준으로 줄바꿈을 하지요.

    그런데 white-space: nowrap; 속성은 공백 기준 줄바꿈을 금지(nowrap) 하게 됩니다. 결국 Vertical Bar Graph 에서 white-space: nowrap;을 제거했을 때 그래프가 뒤집힌 것 처럼 보이는 것은 사실 뒤집힌 것이 아니라 요일 문자열 박스와 그래프 박스가 줄바꿈이 된 것입니다.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님