basic skin을 이용해서 능력치를 나타내는 게시판을 만들어 보았습니다.

압축을 풀면 skills_pc, skills_mobile 두개의 폴더가 나옵니다.

그누보드 순정기준으로 

skills_pc는 skin/board/skills_pc의 경로가 되도록 업로드해줍니다.

skills_mobile는 mobile/skin/board/skills_mobile의 경로가 되도록 업로드합니다.

그리고 일반적인 게시판을 적용하는 방법으로 게시판을 만들어줍니다.

테스트: id: test, pw: test

skill1에는 나타내고자 하는 능력의 이름을 적어줍니다.

skill1 능력치에는 스킬의 정도를 나타내는 값을 숫자로 적어줍니다.

4개의 능력치를 표시할 수 있습니다.

능력치와 수치를 입력하지 않으면 능력치가표시되지 않으며 일반 게시판과 동일합니다.

여기에서 입력하는 숫자를 css에서 %로 나타내기 때문에 %없이 숫자만 적어줍니다.

[code]<style>

.skill1 {width: <?php echo $view['wr_2']; ?>%; background-color: #04AA6D;}
.skill2 {width: <?php echo $view['wr_4']; ?>%; background-color: #2196F3;}
.skill3 {width: <?php echo $view['wr_6']; ?>%; background-color: #f44336;}
.skill4 {width: <?php echo $view['wr_8']; ?>%; background-color: #808080;}

</style>[/code]

칼라등을 바꾸시려면 skills.php에서 css를 변경하시면 됩니다.

감사합니다

write.skin.php

[code]<!--      skills insert -->
      <div class="write_div">      
      <input type="text" name="wr_1" value="<?php echo $wr_1 ?>" id="wr_1"  class="frm_input full_input " size="50" maxlength="255" placeholder="skill 1">       
      <input type="text" name="wr_2" value="<?php echo $wr_2 ?>" id="wr_2" class="frm_input full_input " size="50" maxlength="255" placeholder="skill 1 능력치"> 
      </div>
      
      <div class="write_div">
      <input type="text" name="wr_3" value="<?php echo $wr_3 ?>" id="wr_3" class="frm_input full_input " size="50" maxlength="255" placeholder="skill 2">
      <input type="text" id="wr_4" name="wr_4" value="<?php echo $wr_4?>" class="frm_input full_input " size="200" maxlength="2000" placeholder="skill 2 능력치">
      </div> 
      
      <div class="write_div">
      <input type="text" name="wr_5" value="<?php echo $wr_5 ?>" id="wr_5" class="frm_input full_input" size="50" maxlength="255" placeholder="skill 3">
      <input type="text" id="wr_6" name="wr_6" value="<?php echo $wr_6?>" class="frm_input full_input" size="200" maxlength="2000" placeholder="skill 3 능력치">
      </div>
        
      <div class="write_div">
      <input type="text" name="wr_7" value="<?php echo $wr_7 ?>" id="wr_7" class="frm_input full_input" size="50" maxlength="255" placeholder="skill 4">        
      <input type="text" name="wr_8" value="<?php echo $wr_8?>" id="wr_8" class="frm_input full_input " size="200" maxlength="2000" placeholder="skill 3 능력치">       
      </div>
<!--      skills insert -->[/code]

skills.php

[code]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Skills</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
* {box-sizing: border-box}

.container {
  width: 100%;
  background-color: #ddd;
}

.skills {
  text-align: right;
  padding-top: 10px;
  padding-right:5px;
  padding-bottom: 10px;
  color: white;
}

.skill1 {width: <?php echo $view['wr_2']; ?>%; background-color: #04AA6D;}
.skill2 {width: <?php echo $view['wr_4']; ?>%; background-color: #2196F3;}
.skill3 {width: <?php echo $view['wr_6']; ?>%; background-color: #f44336;}
.skill4 {width: <?php echo $view['wr_8']; ?>%; background-color: #808080;}
  
.pkims{ font-size:18px; padding:10px;color:darkblue;font-weight: bold;}
</style>
</head>

<body>
  
<!--  능력치1 이름 -->
  <?php if ($view['wr_1']) { ?> <p class="pkims"> <?php echo $view['wr_1']; ?> </p> <?php }?>
<!--  능력치1 레벨 -->
  <?php if ($view['wr_2']) { ?>
  <div class="container">
    <div class="skills skill1"> <?php echo $view['wr_2']; ?> </div>
  </div>
  <?php }?>
  
<!--  능력치2 이름 -->
  <?php if ($view['wr_3']) { ?> <p class="pkims"> <?php echo $view['wr_3']; ?> </p> <?php }?>
<!--  능력치2 레벨 -->
  <?php if ($view['wr_4']) { ?>
  <div class="container">
    <div class="skills skill2"> <?php echo $view['wr_4']; ?> </div>
  </div>
  <?php }?>
  
<!--  능력치3 이름 -->
  <?php if ($view['wr_5']) { ?> <p class="pkims"> <?php echo $view['wr_5']; ?> </p> <?php }?>
<!--  능력치3 레벨 -->
  <?php if ($view['wr_6']) { ?>
  <div class="container">
    <div class="skills skill3"> <?php echo $view['wr_6']; ?> </div>
  </div>
  <?php }?>
  
<!--  능력치4 이름 -->
  <?php if ($view['wr_7']) { ?> <p class="pkims"> <?php echo $view['wr_7']; ?> </p> <?php }?>
<!--  능력치4 레벨 -->
  <?php if ($view['wr_8']) { ?>
  <div class="container">
    <div class="skills skill4"> <?php echo $view['wr_8']; ?> </div>
  </div>
  <?php }?>
 
</body>
</html>

[/code]