프로그레스바 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 효과를 적용 시켜보겠습니다.
