======HOW TO - CSS Skill Bar======
<WRAP left notice 80%>
  * description : How TO - CSS Skill Bar
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-12
</WRAP>
<WRAP clear></WRAP>
\\
====Ref====
[[https://www.w3schools.com/howto/howto_css_skill_bar.aspHow TO - More - CSS Skill Bar]]\\
\\
%%CSS%%를 사용하여 __스킬 바__(skill bar) 제작 방법을 학습합니다.\\

=====My Skills=====
스킬 바는 온라인 CV's(상세 이력서)/Resumes(간단 이력서)에서 다양한 주제에 대한 당신의 기술을 표시하는 데 자주 사용됩니다.\\
{{:wiki:howto:skillbar.png?400|}}\\

=====How To Create a Skill Bar=====
Step 1) Add %%HTML%%\\
====예제====
<code 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>
</code>
\\
Step 2) Add %%CSS%%\\
====예제====
<code 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 */
</code>




 
{{tag>오션,HOW TO - More - CSS Skill Bar }}