Hiio.com

  프로그레스바 progress bar  

- 프로젝트의 진행 정도나 내 스킬 숙련도를 나타내기 위한 방법으로 프로그레스바 progress bar를 넣어주려고 합니다.

  span 태그 추가  

- 프로그레스 바를 만들기 위해 span.progressbar태그와 추가적으로 이 태그 안에 span.guage 태그를 만들어 줍니다.

        <span class="progressbar">
            <span class="gauge">
                gauge
            </span>
        </span>

  css 스타일 추가  

- css 에서 값을 지정해 주겠습니다.

- span.gauge의 속성은 display를 inline-block 으로 만들고 width 값을 숙련도에 맞게 줍니다. Python 에는 95%를 주었습니다.

- 높이 값은 span.progressbar의 높이와 똑같이 줍니다.

- background-color #3abff7 색상 코드를 입력해 줍니다.

- 게이지의 크디가 잘 보이기 위해 span.progressbar 의 백그라운드 색상코드 값으로 #d6d3d3을 주고 border값을 삭제 하겠습니다.

#myskills > .skill > .progressbar {
    display: inline-block;
    width: 520px;
    height: 21px;
    background-color: #d6d3d3;
}

#myskills > .skill > .progressbar > .gauge {
    display: inline-block;
    width: 95%;
    height: 21px;
    background-color: #3abff7;
}

- span 의 모양이 사각형입니다.

- 모서리 부분을 둥글게 만들어 줘야 합니다.

- span.progreebar 와 span.gauge 에 border-radius 값으로 10px;을 지정해 주겠습니다.

#myskills > .skill > .progressbar {
    display: inline-block;
    width: 520px;
    height: 21px;
    border: 3px solid blue;
    border-radius: 10px;
}

#myskills > .skill > .progressbar > .gauge {
    display: inline-block;
    width: 95%;
    height: 21px;
    background-color: #3abff7;
    border-radius: 10px;
}

- 이제 각 스킬들이 들어 가는 부분에 span.gauge들을 추가해 주겠습니다.

- 모두 잘 적용 되었습니다.

- 그런데 각 수치 마다 게이지의 크기가 달라져야 합니다.

- css nth-child 나 선택자를 통해서 정해 줄 수 있지만, 코드가 너무 길어 질거 같습니다.

- JavaScipt 를 통해서 지정해 주면 좋을것 같습니다.

- 이부분은 다음 포스팅에서 구현해 보도록 하고,  css animation 효과를 적용 시켜보겠습니다.