어떻게 만들지?: CSS 기술 라인

CSS를 사용하여 기술 라인을 만들기 배우기.

내 기술

온라인 이력서에서는 종종 다양한 분야에서의 기술을 표시하기 위해 '기술 라인'을 사용합니다:

HTML

90%

CSS

80%

JavaScript

65%

PHP

60%

직접 시도해 보세요

기술 라인을 만들기 어떻게 합니까?

第一步 - HTML 추가:

<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 js">65%</div>
</div>
<p>PHP</p>
<div class="container">
  <div class="skills php">60%</div>
</div>

第二步 - CSS 추가:

/* 내간격이 예상대로 작동하도록 보장 */
* {box-sizing:border-box}
/* 기술 라인의 컨테이너 */
.container {
  가로: 100%; /* 전체 가로 */
  배경색: #ddd; /* 회색 배경 */
}
.skills {
  text-align: right; /* 텍스트 오른쪽 정렬 */
  padding-top: 10px; /* 위 내간격 추가 */
  padding-bottom: 10px; /* 아래 내간격 추가 */
  color: white; /* 흰색 텍스트 색상 */
}
.html {가로: 90%; 배경색: #04AA6D;} /* 녹색 */
.css {가로: 80%; 배경색: #2196F3;} /* 파란색 */
.js {가로: 65%; 배경색: #f44336;} /* 빨간색 */
.php {가로: 60%; 배경색: #808080;} /* 다크 그레이 */

직접 시도해 보세요