포트폴리오나 이력서 웹사이트에서 자주 볼 수 있는 스킬 바(Skill Bar)는 특정 기술의 숙련도를 시각적으로 표현하는 UI 요소입니다. CSS만으로도 JavaScript 없이 간단하게 만들 수 있으며, 핵심 원리는 다음과 같습니다.
스킬 바의 기본 원리
스킬 바는 크게 두 개의 요소로 구성됩니다.
- 외부 컨테이너: 전체 진행 막대의 배경 역할을 하며, 회색 계열의 배경색과 둥근 모서리(border-radius)를 적용합니다.
- 내부 채우기 바: 실제 숙련도를 나타내며, width 속성으로 백분율(%)을 지정하고 색상으로 강조합니다.
아래 예제 코드를 통해 자세히 살펴보겠습니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
h1 {
text-align: center;
}
.container {
width: 100%;
background-color: rgb(231, 231, 231);
border-radius: 20px;
}
.cpp, .java, .python, .c {
text-align: center;
font-weight: bolder;
padding-top: 3px;
padding-bottom: 3px;
color: white;
border-radius: 20px;
}
.cpp {
width: 90%;
background-color: #4caf50;
}
.java {
width: 80%;
background-color: #2196f3;
}
.python {
width: 65%;
background-color: #f44336;
}
.c {
width: 60%;
background-color: #808080;
}
</style>
</head>
<body>
<h1>Programming Proficiency</h1>
<h3>Python</h3>
<div class="container">
<div class="python">75%</div>
</div>
<h3>Java</h3>
<div class="container">
<div class="java">70%</div>
</div>
<h3>C++</h3>
<div class="container">
<div class="cpp">60%</div>
</div>
<h3>C</h3>
<div class="container">
<div class="c">40%</div>
</div>
</body>
</html>
코드 상세 설명
1. 박스 크기 초기화
box-sizing: border-box;를 전체 선택자(*)에 적용하면 padding과 border가 요소의 너비에 포함되어 레이아웃 계산이 훨씬 직관적입니다.
2. 배경 컨테이너 스타일링
.container 클래스는 너비를 100%로 설정하여 부모 요소 전체를 차지하고, 연한 회색(rgb(231, 231, 231)) 배경과 border-radius: 20px로 부드러운 캡슐 형태를 만듭니다.
3. 스킬 바 채우기
각 언어별 클래스(.cpp, .java, .python, .c)에는 서로 다른 width 값과 배경색을 지정했습니다. 예를 들어 C++은 90%, Java는 80% 등 숙련도에 따라 막대 길이가 달라집니다. 흰색 텍스트와 굵은 글꼴을 사용해 백분율 숫자가 막대 안쪽 중앙에 선명하게 보이도록 했습니다.
실행 결과
위 코드를 실행하면 언어별 숙련도가 색상 있는 막대로 시각화된 스킬 바 목록이 화면에 출력됩니다. 각 막대의 길이는 지정한 백분율에 비례하며, 둥근 모서리 덕분에 세련된 느낌을 줍니다.
응용 팁: 애니메이션 효과 추가하기
스킬 바에 부드러운 로딩 애니메이션을 추가하면 더욱 동적인 느낌을 줄 수 있습니다. 아래처럼 @keyframes와 animation 속성을 활용해 보세요.
@keyframes fillBar {
from { width: 0; }
}
.python {
animation: fillBar 1.5s ease-out;
}
이렇게 하면 페이지가 로드될 때 막대가 0%에서 지정된 값까지 자연스럽게 채워지는 효과를 구현할 수 있습니다.
마무리
CSS의 width, background-color, border-radius 속성만 조합해도 JavaScript 없이 깔끔한 스킬 바를 만들 수 있습니다. 색상 팔레트를 프로젝트 테마에 맞게 조정하고, 필요하다면 그라디언트나 애니메이션을 추가하여 개성 있는 포트폴리오 페이지를 완성해 보세요.