링크
http://egis.kr/bbs/board.php?bo_table=basic_test_pc_mobile&page=1&sst=wr_num%2Cwr_reply&page=1 (133)
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]
댓글 13개
게시글 목록
| 번호 | 제목 |
|---|---|
| 56117 | |
| 56088 | |
| 56027 |
접속자
구찬아~ 신규회원수
17
|
| 55868 |
게시판
문제풀이 게시판
27
|
| 55864 |
게시판
연락처 게시판
10
|
| 55862 | |
| 55841 | |
| 55833 |
최신글
나리야용 최신글 위젯
10
|
| 55802 |
게시판
채팅 메세지 게시판
20
|
| 55740 | |
| 55738 | |
| 55721 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기