progress 엘레먼트의 스타일링 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

progress 엘레먼트의 스타일링 정보

CSS progress 엘레먼트의 스타일링

본문

모던 HTML 에서는 <progress> 엘레먼트가 있습니다.

이건 확률이나 통계 그래프 또는 오디오나 비디오의 트랙바를 만드는데 상당히 유용합니다.

기본 사용법은 구글링 하시면 되구요.

구글링을 하다 보면 스타일링 하는 방법이 저랑 좀 달라서 제 방식대로 스타일링 하는 방법을 공유하려고 합니다.

 

<style>
#progressDiv progress { width:400px; height:12px; appearance:none; }
#progressDiv progress::-webkit-progress-bar { background-color:#eeeeee; border-radius:6px; border:1px solid #cccccc; }
#progressDiv progress::-webkit-progress-value { border-radius:6px; }
#progressDiv progress:nth-of-type(1)::-webkit-progress-value { background-color:red; }
#progressDiv progress:nth-of-type(2)::-webkit-progress-value { background-color:green; }
#progressDiv progress:nth-of-type(3)::-webkit-progress-value { background-color:blue; }
#progressDiv progress:nth-of-type(4)::-webkit-progress-value { background-color:orange; }
</style>
<div id="progressDiv">
    <progress value="1" min="0" max="4"></progress> 25%
    <br>
    <progress value="40" min="0" max="100"></progress> 40%
    <br>
    <progress value="9" min="0" max="16"></progress> 56.25%
    <br>
    <progress value="8" min="0" max="8"></progress> 100%
</div>

 

결과물은 아래 그림과 같습니다.

 

3553550789_1671217683.8028.jpg

 

위 소스를 https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.

추천
4

댓글 3개

전체 1,234
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT