CSS Bar Graph. Horizontal. Vertical. Star Rating.
목록(ul) 요소를 이용하여 CSS로 모양을 낸 수직 막대 그래프 입니다. 이 예제를 새 창으로 보기
목록(ul) 요소를 이용하여 CSS로 모양을 낸 수평 막대 그래프 입니다. 이 예제를 새 창으로 보기
다양한(p, ul, ol, dl) 요소에 콘텐츠로 포함되어 CSS로 모양을 낸 인라인 수평 막대 그래프 입니다. 이 예제를 새 창으로 보기
배경 이미지와 CSS로 모양을 낸 별점 그래프 입니다. 이 예제를 새 창으로 보기
이 밖에 더 많은 예제들이 OUIF 페이지에 링크되어 있습니다.
멋집니다.
브라보~!!!
이게.. 가능..합니..까?;; 멋집니다..+_+
이런것까지.. 역시 CSS의 힘은 대단합니다.~~
띠옹이네요.
background 로 배경그림을 입력하고, 1%단위 표시까지 별점으로 나타낼 수 있겠군요.
그런데 ul, dl 으로 마크업했다는게 더 사랑스러워 보입니다 +_+
@김무건
별점 그래프가 따로 준비되어 있는데 같이 보여드리면 좋겠군요. 별점을 새로 추가 했습니다. 감사합니다. ^^
+_+ 할 말이 없습니다.
감사합니다..오…
생각 못했던 부분이라..더욱 감사합니다~^_^
정찬명의 생각…
어제 포스팅 했던 그래프에 수평 그래프와 별점 그래프 추가 업데이트….
이렇게 블로그에 소개한 글 하단에 http://naradesign.net/ouif/ 링크도 추가해 놓으면 어떨까요? 저도 혹시 있나 찾아보다가 정리된 페이지가 있는 것을 발견했거든요. 우연히 검색하다 발견하시는 분들에게도 도움이 많이 될 것 같습니다.
@신현석
아직 정리가 다 된게 아니라서 준비가 되면 공개 하려고 했는데 미리 공개하는것도 좋겠네요. 좋은 의견 감사합니다. ^^
http://naradesign.net/wiki/UI_library 페이지에서 발견을 했었는데 ouif로 바뀌면서 사라진게 하나 발견되었습니다. Vertical Align 관련 예제인데요. 추가해주세요.
@세이군
수직 정렬에 관한 예제는 다른 예제들과 달리 어떤 콤포넌트나 모듈로 분류가 안되서 제외 했었는데요. 넣는게 좋을까요? ^^ (고민 좀 해 보고 되도록이면 넣는 방향으로 다음주에 시행 하겠습니다 ㅎㅎ) 의견 감사합니다.
[...] CSS Bar Graph. Horizontal. Vertical. [...]
항상 너무 좋은글 잘 보고 가요~ 감사해요^^
@oyster
긍정적인 피드백에 저도 감사합니다. ^^
싸이트를 다니면서 댓글 절대!!!! 안남기는데요.
여긴 꼭 남기고 싶습니다.
뭐~ 공부하러 매일매일 들어오고…. 또, 도용(??)하러와서 퍼가는데 인사는 드려야할꺼 같아서요.
전 디자이너인데요. 이렇게 CSS나 다른부분에 디자인에 심열을 기울인 작품들을 만날수 있는 유일한 싸이트라 생각됩니다.
항상 감사한 마음으로… 열심히 활용하고 있습니다.
자주자주 좋은글 부탁드립니다.
@hellen
제가 디자인 센스는 별로 없지만 좋게 봐주셔서 감사합니다. ^^
현재 작업하는 것 중에 그래프가 있었는데, 며칠만 더 빨리 확인했다면 일을 더 수월하게 할 수 있었을 것 같아 늦게 본게 아쉬워요. 하지만 남은 것들을 처리 하는데 도움이 될 것 같아요. 감사드립니다.^^
@ryun
제가 조금 늦었죠~ (개콘버전) ^^ 남은 작업 즐겁게 마무리 하시길 빌께요!
우와~ 너무 멋지십니다^^
@엘렌
별로 대단한게 아니라서 참 뻘쭘 하네요. ㅎㅎ
와아..
별로 대단한 게 아니고,
진정 대단하세요!!
@초식동물
소스 코드 뜯어보시면 아시겠지만 진정 별거 없습니다. ㅎㅎㅎ
말이 계속 물고 물리는 것 같지만;;
별 거 아닌 걸로 별 거를 만드는 게 대단하다고 생각해요.^^
@초식동물
그렇게 봐주시면 저야 뭐 감사할 따름이지요. ㅎㅎ
꺄오~
완전완전 멋지십니다!!
연습고고~!!
@소
알고보면 CSS 참 쉽다는걸 느끼실꺼예요. ㅎㅎ
CSS 배우러 이곳저곳 돌아다니던 중 발견해서 자주 구경을 왔었어요. 참 깔끔하게 만드시는 것 같습니다.
그런데 예제에 있는 소스를 사용하려면 CSS viewer 같은 것으로 봐야 하는지요? 아니면 다른 방법이 있는데 제가 모르는 것인지요? 초보적인 질문 죄송하지만 제가 워낙 초보라 잘 몰라서 그러니 양해해 주시면 감사하겠습니다.
@칠전팔기
이 예제를 새 창으로 보기 링크를 클릭하신 다음 소스보기를 하시면 다음과 같이 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
Inline Bar Graph에 position: realtive 는 왜 있는건가요??
position: realtive 가 넘 많아서 궁금하네요 ㅎㅎ
@익명
그러게요. 필요 없는 속성입니다. 모두 지워서 업데이트 했습니다. 고맙습니다. ^^