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

팁/노하우 게시판 - 회원들의 다양한 IT/하드웨어 팁과 정보

공지 퀘이사존 규정(25.08.04)

퀘이사존

18k

03-16

31 자기소개에 개성넘치는 게이지바 넣기 Mamette 39 7233 2017.07.01 00:44

중복인지 아닌지는 모르겠네요 ㅎㅎ     자 우선은 가장 간단한 것부터 시작합시다 ㅎㅎ  <o:p></o:p> [활용예] <img src="https://img2.quasarzone.co.kr/img/data/editor/1707/3ab65d39fcbd000cea2c8fe7845bdc8d_1498837990_8131.png" title="3ab65d39fcbd000cea2c8fe7845bdc8d_1498837990_8131.png" style="max-width:100%; height:auto;">   <o:p></o:p>  소스는 <div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="퍼센트"aria-valuemin="0" aria-valuemax="100" style="width:퍼센트%"> 넣고싶은 말</div></div> <o:p></o:p>입니다. 색칠되어져있는 부분만 조정해서 집어넣으시면 제가 올린 사진처럼 나옵니다.빈 게이지에 넣는 색깔은 어떻게 조정하는건지를 모르겠네요  너무 단조롭죠?우린 여기에다가 뭔가를 추가하거나 할수도 있습니다 ㅎㅎ   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>      여러분들이 색깔을 수정하기 위해 만지셔야하는 곳은 클래스부분! 그 외 나머지는 아까와 같습니다.   [적용예]  <img src="https://img2.quasarzone.co.kr/img/data/editor/1707/3ab65d39fcbd000cea2c8fe7845bdc8d_1498838363_9576.png" title="3ab65d39fcbd000cea2c8fe7845bdc8d_1498838363_9576.png" style="color: rgb(255, 255, 255); max-width: 100%; height: auto;">    보시다싶이 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>     마찬가지로 클래스부분이 바뀐걸 알 수 있습니다. 역시 그 외 나머지부분은 동일합니다   [적용예] <img src="https://img2.quasarzone.co.kr/img/data/editor/1707/3ab65d39fcbd000cea2c8fe7845bdc8d_1498838364_0132.png" title="3ab65d39fcbd000cea2c8fe7845bdc8d_1498838364_0132.png" style="max-width: 100%; height: auto;">        자 이번엔 줄무늬가 움직이도록 해볼게요! 클래스부분을 이렇게 고칠겁니다<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> 지름욕구 (999.9%) </div>    [적용예] <img src="https://img2.quasarzone.co.kr/img/data/editor/1707/3ab65d39fcbd000cea2c8fe7845bdc8d_1498838412_165.png" title="3ab65d39fcbd000cea2c8fe7845bdc8d_1498838412_165.png" style="max-width:100%; height:auto;">     귀찮아서 그냥 대충 뜰래요... 캡쳐 넘나 힘든것 ㅠ 움짤로 만들어야하는데 저의 귀차니즘이 방해합니다. 암튼 움직여요 해보시면 됩니다 ㅎㅎ     자 이제 제가 알려드릴 수 있는 마지막 내용인데요, 경험치바처럼 로켓을 추가하는겁니다!     [예시]<div> </div> <o:p></o:p><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"> 로켓발사! </div>      [적용예] <img src="https://img2.quasarzone.co.kr/img/data/editor/1707/3ab65d39fcbd000cea2c8fe7845bdc8d_1498838364_0799.png" title="3ab65d39fcbd000cea2c8fe7845bdc8d_1498838364_0799.png" style="max-width: 100%; height: auto;">      음... 이건 경험치바처럼 깔끔하게 안되는군요 ㅠㅠ 이부분은 좀 더 연구를 해봐야 알 것 같습니다. 암튼 이상입니다!

Mamette

행성: 10주년 관측자

포인트: 36,994 exp

작성물 댓글

모든회원 자기소개 펼치기

댓글: 39개

팁/노하우 게시판 - 회원들의 다양한 IT/하드웨어 팁과 정보

공지 퀘이사존 규정(25.08.04)

퀘이사존

18k

03-16

전체 하드웨어 게임 콘솔 모바일 소프트웨어 기타

제목	닉네임	조회수	날짜
1 새로운 실사용 PC 안정성 테스트 체스 엔진 활용하는 방법 0	cuda	238	07-26
1 ClickFree (클릭프리) - 우클릭 금지, 복사 방지 사이트 원클릭으로 해제하는 무료 크롬 확장 0	user1149410	279	07-03
0 TalkShield (톡실드) - PC 카카오톡 광고 없애주는 무료 프로그램, 60KB 초경량 1	user1149410	369	07-03
0 [정보] RX 6500 XT / 6400 게임 중 무작위 재부팅 및 튕김 해결 통합 패치 (인텔/AMD PC... 0	user_1148167	192	06-25
1 간단 PC 테스트 사이트 0	sdfbiupsgmf	317	06-23
0 바우아토 BAUATO 짭플펜슬 (개인적인) 사용기 0	ELKalliance	154	06-21
0 알리산 Attack Shark R1 배터리 교체 2	ELKalliance	211	06-21
1 [제보]Synology NAS 2FA / Secure SignIn 관련 사용자 보호 이슈 1	user_1144668	312	05-31
0 9070xt 라데온 포르자 호라이즌6 스타터링 해결법 0	user_1123952	447	05-29
0 윈도우 게임 성능 최적화 레지스트리 설정｜FPS·입력지연·스터터링 줄이는 방법 2	user_1085356	873	05-13
0 갤북4프로360과 3090ti의 오큐링크 조합 및 자작쿨링시스템 후기 0	돌뉴	266	04-22
0 PC 유튜브 및 뮤직 동영상 재생불가 문제 0	poringle	655	04-13
1 스팀에서 원하는 금액만 충전하기 1	lamanus	799	03-15
0 모니터 주사율 관련 (feat. 제미나이) 0	dragonball	828	03-11
3 롤 프레임드랍 5	어택이	1.2k	01-13
1 게임 성능을 올리는 레지스트리 등 설정 1/5 2	티플레티넘	2.2k	01-04
1 미세스터터링 해결방법 1	인공지능	2.1k	01-02
0 AM4소켓 백플레이트 메인보드에 고정방법 0	신세계-이자성	927	12-22
0 가성비 CPU부터 최고의 CPU까지 2025 CPU TOP5(개인의견) 0	영재컴퓨터	4.7k	12-03
6 Mchose V9/V9 PRO 헤드셋 추가설정법 0	StayGlyde	8.7k	11-30
1 OBS 녹화 시 VRR 스터터링 해결 (OverlayMinFPS) 0	MouseSports	977	11-09
5 PC에서 콘솔처럼 영화적이고 부드러운 30프레임으로 똑같이 만드는 방법 9	아이엔에프피	4.7k	11-01
9 (팁)오디세이 G7 32DG702(700) 스마트 모니터 설정값 추천(HDR) 3	승길씨	12.6k	10-19
0 하이마트 발 오피스 홈&스튜던트 pc 옮길때 이전 설치 0	조조맹덕	609	10-15
0 써모랩 트리니티 120mm로 팬 교체하기 0	Kodorai	844	09-26
1 모니터 입력지연 줄이기 0	티플레티넘	1.6k	09-24
1 글카 성능 올리기 9/23 7	티플레티넘	3.5k	08-26
3 (팁) 라데온 쉬운 언더볼팅/오버클럭 방법 0	승길씨	5.7k	08-15
2 (팁)라데온 RSR, AFMF의 활용법 2	승길씨	2.1k	08-15
2 저장장치(HDD) 신품 구매하고, 불량섹터 검사하는 경우 0	폐지줍기달인	1.2k	07-27