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 | 정찬명 | 댓글: 46개 |
트랙백URI - http://naradesign.net/wp/2010/03/17/1233/trackback/

46개의 댓글이 있습니다.

  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. 익명 댓글:

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

댓글 쓰기

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

필수 아님

필수 아님