버튼 있는 서명 이쁘게 만드는 법

일단 지금 내 서명의 모양새는 이러하당

뭐 다들 알겠지만 이런 식으로 꾸미기 위해선 HTML코드라는 걸 쓰는데,

이거 상당히 간단하니, 특히 헬븐에서 사용중인 부트스트랩이라는 프레임워크는 이를 더 간단하게 만들어주니

조금만 응용하면 모두들 나처럼 이쁜 서명을 만들 수 있어!

자세한 부분은 건너뛰고, 무작정 따라하기 식으로 설명해주도록 할게

일단! 무조건 맨 처음에는 저 '카와이 로리 다이스키'와 같은 경험치바를 하나 넣어줘야 하는데

만약 저걸 안 넣어줄 경우엔 프로필 사진과 겹친다던지 꼬여버려서 모양새가 영 이쁘게 안 나오더라고.

다른 건 모르겠는데 저 경험치바만 맨 첫줄에서 제대로 나오드라..

그 경험치바의 코드는 다음과 같아​

<div class="div-progress progress progress-striped no-margin"><div class="progress-bar progress-bar-exp active" style="width:100%;background-color:rgb(135, 206, 235);">

<span class="sr-only">카와이 로리 다이스키! (100%)</span></div></div> 

저기에서 빨강색 100%가 경험치바가 몇 퍼센트나 차 있는지,

초록색 RGB 코드가 어떤 색상인지, (RGB코드는 여기​에서 확인 가능하다!)

파랑색 글자가 경험치바 안에 들어갈 글자를 의미해.

대충 어떻게 넣으면 원하는 대로 나오는 지 알겠지?

예를 들어 분홍색 경험치바를 80%만 채워서 한다면 내용과 결과물은 아래와 같겠지

<div class="div-progress progress progress-striped no-margin"><div class="progress-bar progress-bar-exp active" style="width:80%;background-color:rgb(255, 151, 255);">

<span class="sr-only">카와이 로리 다이스키! (80%)</span></div></div> 

그렇게 경험치바를 넣고 나서 윗 부분과 똑같이 10px정도 아래에 공간을 띄워 줄 거야.

세로 10px 크기의 투명한 상자를 넣는 거라고 생각하면 되는데, 코드는 다음과 같아

<div style="height: 10px;"></div>

만약 더 넓은 공간을 주고 싶다면 저 height 값을 바꿔주면 돼.

그리고 다음으로 검정 버튼!

저 버튼은 이 홈페이지의 프레임워크인 부트스트랩을 이용한 건데,

쉽게 말해서 원래는 가로로 세 개의 버튼을 화면에 꽉 채우기 위해서

가로 길이가 33.333333...%의 상자를 세 개 만들어 줘야 하는데, (다른 사이즈로 하고 싶다면 같은 식으로 또 계산해야겠지)

부트스트랩은 이미 가로를 12등분 한 상태라서 각각 12를 3으로 나눈 4씩으로 설정하면 된다는거야.

설명이 조금 어려우니 백문이 불여일견! 직접 한 번 해 보자.

코드는 다음과 같아

<div class="row">

<div class="col-sm-4"><a class="btn btn-black btn-sm btn-block" style="color: white; margin-bottom: 10px;" href="https://hellven.net/bbs/profile.php?mb_id=bs03166" target="_blank" >프로필 보기</a></div>

<div class="col-sm-4"><a class="btn btn-black btn-sm btn-block" style="color: white; margin-bottom: 10px;" href="https://hellven.net/bbs/board.php?bo_table=fr2&sca=&sfl=mb_id,1&stx=bs03166" target="_blank" >자게 글보기</a></div>

<div class="col-sm-4"><a class="btn btn-black btn-sm btn-block" style="color: white; margin-bottom: 10px;" href="https://hellven.net/bbs/memo_form.php?me_recv_mb_id=bs03166" target="_blank" >쪽지 보내기</a></div>

</div>

혹시 여기서 패턴이 보이니?

자세히 보면 <div class="col-sm-4"> 라는 게 반복되는 걸 볼 수 있는데

이게 바로 가로를 4씩 설정한다는거야.

만약 저 4,4,4 를 5,4,3으로 주게 되면 다음과 같이 결과물이 나올거야

혹은 3,6,3으로 주게 되면 다음과 같이 되겠지

아, 참고로 모바일에선 크기 상관없이 화면에 꽉 차도록 되어 있기 때문에 두 개의 차이점이 안 보일거야.

어때, 조금 감이 잡히지

요런 식으로 전체 합 12만 맞추면 원하는 모양대로 자유자재로 만들 수 있어!

아, 참고로 저런 식으로 사용하기 위해선 반드시 <div class="row">​  코드  </row> 로 감싸 줘야 해!

(부트스트랩의 약속이랄까, 그렇게 쓰도록 만들어져 있어)

나머지 <a class... 으로 나오는 녀석들은 다른 부분은 그대로 두고

보라색 부분을 인터넷 주소로, 초록색 부분을 버튼에 들어갈 글자로 넣어주면 돼!

혹은 저 맨 뒤에 계속 붙어나오는 bs03166이 내 아이디기 때문에 그걸 본인 아이디만 입력하면 본인의 검색결과, 쪽지창 등이 나와

가장 마지막 역식작품 목록은 다음과 코드가 같은데

<div style="width: 100%; border: 1px solid #ddd; margin-bottom: 10px;">

<div style="padding: 10px; width: 100%; background-color: #f5f5f5; text-align: center; font-family: sans-serif;"><abbr style="font-size: 16px; font-weight: bold; color: #000; cursor: text;">식작품 목록 </abbr><abbr style="font-size 12px; color: #888; cursor: text;">| 클릭 시 작품으로 이동합니다 (무료)</abbr></div>

<div style="padding: 10px; width: 100%; border-top: 1px solid #ddd;">

<a class="btn btn-default" href="https://hellven.net/bbs/board.php?bo_table=guild_pcs&wr_id=240002" target="_blank">[칸코레] 빗치 프린츠 어드미럴을 빼앗아버려!</a>

<a class="btn btn-default" href="https://hellven.net/bbs/board.php?bo_table=guild_pcs&wr_id=242536" target="_blank">[단편] 코타츠 아래에서</a>

<a class="btn btn-default" href="https://hellven.net/bbs/board.php?bo_table=guild_pcs&wr_id=253887" target="_blank">[어과초] DREAM KNOCKER</a>

</div>

</div>

여기서도 반복이 대충 보일거야

먼저 회색으로 칠한 부분이 제목이 되는 부분이야. 그 중에서도 검정 글씨가 들어가는 부분이 실제 내용이 나오는 부분이고.

여긴 자세히 설명하려면 길어지니 대충 그렇다는 것만 알아둬!

그리고 아래 노랑색으로 칠한 부분이 버튼이 들어가는 부분인데

이건 아까 검정 버튼과 똑같아! href가 주소, a태그 내에 있는 부분이 내용이 나오는 부분이야.

나머지 내가 설명하지 않은 부분은

사실 핵심이라고 할 수도 있는 상자를 어떻게 꾸밀지에 대한 내용인데

이걸 건드리기 시작하면 답이 없어서.. 조금 만질 줄 아는 사람들만 건드려보는 걸 추천해

최종적으로 내 서명의 코드는 다음과 같이 된당

<div class="div-progress progress progress-striped no-margin"><div class="progress-bar progress-bar-exp active" style="width:100%;background-color:rgb(135, 206, 235);">

<span class="sr-only">카와이 로리 다이스키! (100%)</span></div></div>

<div style="height: 10px;"></div>

<div class="row">

<div class="col-sm-4"><a class="btn btn-black btn-sm btn-block" style="color: white; margin-bottom: 10px;" href="https://hellven.net/bbs/profile.php?mb_id=bs03166" target="_blank" >프로필 보기</a></div>

<div class="col-sm-4"><a class="btn btn-black btn-sm btn-block" style="color: white; margin-bottom: 10px;" href="https://hellven.net/bbs/board.php?bo_table=fr2&sca=&sfl=mb_id,1&stx=bs03166" target="_blank" >자게 글보기</a></div>

<div class="col-sm-4"><a class="btn btn-black btn-sm btn-block" style="color: white; margin-bottom: 10px;" href="https://hellven.net/bbs/memo_form.php?me_recv_mb_id=bs03166" target="_blank" >쪽지 보내기</a></div>

</div>

<div style="width: 100%; border: 1px solid #ddd; margin-bottom: 10px;">

<div style="padding: 10px; width: 100%; background-color: #f5f5f5; text-align: center; font-family: sans-serif;"><abbr style="font-size: 16px; font-weight: bold; color: #000; cursor: text;">식작품 목록 </abbr><abbr style="font-size 12px; color: #888; cursor: text;">| 클릭 시 작품으로 이동합니다 (무료)</abbr></div>

<div style="padding: 10px; width: 100%; border-top: 1px solid #ddd;">

<a class="btn btn-default" href="https://hellven.net/bbs/board.php?bo_table=guild_pcs&wr_id=240002" target="_blank">[칸코레] 빗치 프린츠 어드미럴을 빼앗아버려!</a>

<a class="btn btn-default" href="https://hellven.net/bbs/board.php?bo_table=guild_pcs&wr_id=242536" target="_blank">[단편] 코타츠 아래에서</a>

<a class="btn btn-default" href="https://hellven.net/bbs/board.php?bo_table=guild_pcs&wr_id=253887" target="_blank">[어과초] DREAM KNOCKER</a>

</div>

</div>

<div style="width: 100%; border: 1px solid #ddd; margin-bottom: -10px;">

<div style="padding: 10px; width: 100%; background-color: #f5f5f5; text-align: center; font-family: sans-serif;"><abbr style="font-size: 16px; font-weight: bold; color: #000; cursor: text;">기타 정성글 </abbr><abbr style="font-size 12px; color: #888; cursor: text;">| 클릭 시 게시글로 이동합니다</abbr></div>

<div style="padding: 10px; width: 100%; border-top: 1px solid #ddd;">

<a class="btn btn-default" href="https://hellven.net/bbs/board.php?bo_table=ona&wr_id=47649" target="_blank">[오나홀] 콰트로 순수소녀 (クワトロ天然ガール) 후기</a>

<a class="btn btn-default" href="https://hellven.net/bbs/board.php?bo_table=chosen&wr_id=298573" target="_blank">[TIP] 에로게 전용 태블릿 PC 고르는 팁</a>

<a class="btn btn-default" href="https://hellven.net/bbs/board.php?bo_table=rv&wr_id=508228" target="_blank">[야겜] XX한 그녀를 만드는 방법 2 리뷰</a>

</div>

</div>

상당히 복잡해 보이지만

위에서 본 요소들을 하나로 종합한 것 뿐이니 직접 차근차근 만들어 보면 생각보단 어렵지 않을거야. 

혹시나 하다가 잘 안되면 댓글이나 쪽지로 질문해줘! 할 수 있는 최대한 답변해줄게 ㅎㅅㅎ

+ 뽀너스

가끔 간단히 이미지에 링크 거는 방법을 자게에서 물어보는 사람들이 있는데, 아주 간단해!

이미지 태그는 <img src="사진 주소"> 같은 식인데,

여기에 a태그로 링크를 덮어씌워주면 돼! 마치 다음과 같이 말이지

<a href="들어갈 주소" target="_blank"><img src="사진 주소"></a> 

그럼 저 주소로 새 창이 뜨면서 들어가질거야.

만약 새 창이 아니라 기존창에서 들어가고 싶으면 target="_blank"를 지워주면 되고!