https://www.w3schools.com/howto/howto_css_skill_bar.aspHow TO - More - CSS Skill Bar

CSS를 사용하여 스킬 바(skill bar) 제작 방법을 학습합니다.

스킬 바는 온라인 CV's(상세 이력서)/Resumes(간단 이력서)에서 다양한 주제에 대한 당신의 기술을 표시하는 데 자주 사용됩니다.

Step 1) Add HTML

<h1>My Skills</h1>
    <p>HTML</p>
    <div class="container">
        <div class="skills html">90%</div>
    </div>
    <p>CSS</p>
    <div class="container">
        <div class="skills css">80%</div>
    </div>
    <p>JavaScript</p>
    <div class="container">
        <div class="skills javascript">65%</div>
    </div>
    <p>Java</p>
    <div class="container">
        <div class="skills java">35%</div>
    </div>

Step 2) Add CSS

        /* Make sure that padding behaves as expected */
        * {box-sizing: border-box;}
        /* container for skill bars */
        .container {
            width: 100%;    /* Full width */
            background-color: #ddd; /* Grey background */
        }
        .skills {
            text-align: right;  /* Right-align text */
            padding-top: 10px;  /* Add top padding */
            padding-bottom: 10px;   /* Add bottom padding */
            color: white;       /* White text color */
        }
        .html {width: 90%; background-color: #4CAF50;}      /* Green */
        .css {width: 80%; background-color: #2196F3;}       /* Blue */
        .javascript {width: 65%; background-color: #f44336;}/* Red */
        .java {width: 60%;background-color: #808080;}       /* Dark Grey */