자기소개에 개성넘치는 게이지바 넣기

Mamette 22 544 9

 

 

중복인지 아닌지는 모르겠네요 ㅎㅎ

 

 

 

 

 

자 우선은 가장 간단한 것부터 시작합시다 ㅎㅎ

 

 

3ab65d39fcbd000cea2c8fe7845bdc8d_1498837



[활용예시]

 

 

 

소스는

 

<div class="progress">

<div class="progress-bar" role="progressbar" aria-valuenow="퍼센트"

aria-valuemin="0" aria-valuemax="100" style="width:퍼센트%">

<span class="sr-only"> 넣고싶은 말</span>

</div>

</div>

 

입니다.

 

색칠되어져있는 부분만 조정해서 집어넣으시면 제가 올린 사진처럼 나옵니다.

빈 게이지에 넣는 색깔은 어떻게 조정하는건지를 모르겠네요

 

 

너무 단조롭죠?

우린 여기에다가 뭔가를 추가하거나 할수도 있습니다 ㅎㅎ 

 

 

2번째 줄 <div class="progress-bar" role="progressbar" aria-valuenow="퍼센트"

 

이 부분을 건드려줄건데요,

 

<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="99" 

 

이런식으로 바꿔줄겁니다

 

 

 

<div class="progress">

<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="99"

aria-valuemin="0" aria-valuemax="100" style="width:99%">

우울함

</div>

</div>

 

<div class="progress">

<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="98"

aria-valuemin="0" aria-valuemax="100" style="width:98%">

2% 부족할 때

</div>

</div>

 

<div class="progress">

<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"

aria-valuemin="0" aria-valuemax="100" style="width:60%">

이젠 뭐라 적어야할 지 모르겠다

</div>

</div>

 

<div class="progress">

<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80"

aria-valuemin="0" aria-valuemax="100" style="width:80%">

소재고갈

</div>

</div>

 

 

 

[예시 소스]

 

 

여러분들이 색깔을 수정하기 위해 만지셔야하는 곳은 클래스부분!

 

그 외 나머지는 아까와 같습니다.

 

 

 

 3ab65d39fcbd000cea2c8fe7845bdc8d_1498838


 

[적용 예시]

 

보시다싶이 2번째줄을 건듦으로써 색깔이 바뀜을 알 수 있습니다.

 

다른 색깔도 있을텐데 제 지식의 한계로 이정도가 끝입니다...

 

 

 

이번엔 경험지바처럼 줄무늬를 넣어보겠습니다.

 

이번엔 한가지 색으로만 하겠습니다 흐허헣

 

 

클래스부분을 이렇게 고칠겁니다

 

<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"

aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">

 

 

 

 

<div class="progress">

<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"

aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">

잉여력 ( 70.0% )

</div>

</div>

 

 

 

[예시 소스]

 

마찬가지로 클래스부분이 바뀐걸 알 수 있습니다.

 

역시 그 외 나머지부분은 동일합니다

 

 

3ab65d39fcbd000cea2c8fe7845bdc8d_1498838
 

 

[적용 예시]

 

 

 

 

자 이번엔 줄무늬가 움직이도록 해볼게요!

 

클래스부분을 이렇게 고칠겁니다

<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="999.9"

aria-valuemin="0" aria-valuemax="100" style="width:100%">

 

 

 

<div class="progress">

<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="999.9"

aria-valuemin="0" aria-valuemax="100" style="width:100%">

</div>

<span class="sr-only">지름욕구 (999.9%)</span>

</div>

 

 

 

[예시 소스]

 

 

3ab65d39fcbd000cea2c8fe7845bdc8d_1498838
 

 

[적용 예시]

 

귀찮아서 그냥 대충 뜰래요... 캡쳐 넘나 힘든것 ㅠ

 

움짤로 만들어야하는데 저의 귀차니즘이 방해합니다. 암튼 움직여요 해보시면 됩니다 ㅎㅎ

 

 

 

 

 

자 이제 제가 알려드릴 수 있는 마지막 내용인데요, 경험치바처럼 로켓을 추가하는겁니다!

 

 

 

<div class="progress">

<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="80"

aria-valuemin="0" aria-valuemax="100" style="width:80%">

</div>

<img src="/img/rocket.svg" class="rocket">

<span class="sr-only"> 로켓발사! </span>

</div>

 

 

[예시 소스]

 

 

3ab65d39fcbd000cea2c8fe7845bdc8d_1498838
 

 

[적용 예시]

 

 

음... 이건 경험치바처럼 깔끔하게 안되는군요 ㅠㅠ

 

이부분은 좀 더 연구를 해봐야 알 것 같습니다.

 

암튼 이상입니다!

 

페이스북에 공유 트위터에 공유 구글플러스에 공유 카카오스토리에 공유 네이버밴드에 공유

작성자

현재 레벨 : 슈퍼지구 Mamette  회원
30,461 (76.9%)

지름욕구 (999.9%)
dec8ca9dba66b326cb19e585f7ed13eb_148756814d49648720cc915385e862748f630a0_1498841

    댓글 : 22
QuasarLife  
예시소스 하단 3개 엑스박스 뜹니다.
Mamette  
흐아.... 중간에 html꼬여서 다시 작성했는데 아마 그탓인가봅니다 ㅠㅠㅠㅠ

고쳤습니다!!
메르띠  
오호..
Mamette  
방금 수정까지 끝냈습니다 하하하...
Tiphreth  
미국춤을 이기진 못할것 같네요..
Mamette  
인정합니다 크으
라달  
먼가 복잡해 보이긴하지만...!
시간 날때 시도해봐야겠습니다
Mamette  
귀찮으시면 본문에 소스 아무거나 그대로 붙여넣으셔도 됩니당!
잉여인간17호  
감사합니다 ^^
운동부족  
우어... 복잡아..
좋은 정보는 감사합니다!
Mamette  
최대한 쉽게 적는다고 했는데 역시 제 필력으론 힘들군요 ㅎㅎ
니시노나나세  
예쁘네요...
역시이거 소개란에 적는거겠죠?

축하합니다! 행운 포인트 2점을 획득하였습니다!

Mamette  
넵 그렇죠 ㅎㅎ
DoT•  
색을 어떻게 바꾸는지를 모르겠 ....ㅠㅠ

어딜 어떻게 수정해야 하나요...
Mamette  
<div class="progress">
<div class="progress-bar progress-bar-warning"

에서 -warning부분을 비우시면 하늘색 info를 넣어주시면 녹색 warning 을 넣으시면 빨간색으로 나옵니다
Complex  
흐흐흐 감사합니다~~~~
역시 소스 만지는거는 어렵네요...ㅠㅠ

축하합니다! 행운 포인트 4점을 획득하였습니다!

Mamette  
제가 설명을 잘 못해서 그래요 ㅠㅠ
DarkLen  
쉬운설명이지만 하기 귀찮... 전 디자인쪽은 정말 건들기 시러영
그나저나 웹사이트 클래스 css까지 열어보는 열정이 있으신가보네요 ㅎㅎ
Mamette  
엣... 인터넷에서 대충 보고 배운거라 css? 그런건 잘 모릅니다
오가조하  
이걸 어떻게 해요 ㅡㅠ 고수님아 ㅜ ㅠ
Mamette  
설명이 어려웠나보군요

그냥 맘에드시는거 복사 붙여넣기 해보세양!
누워서떡먹기  
좋은 정보 감사합니다.

축하합니다! 행운 포인트 2점을 획득하였습니다!

분류 제목
페이스북에 공유 트위터에 공유 구글플러스에 공유 카카오스토리에 공유 네이버밴드에 공유