21. 티스토리 스킨 만들기 비밀 글

오늘은 티스토리 스킨에서 잘 안쓰이는 비밀 글 부분입니다.

뭐 블로그 성격마다 다르겠지만, 비밀 글을 자주 쓰는 블로그는 많지 않죠.

먼저 비밀 글을 하나 작성해주셔야 하니, 보호로 해서 글을 하나 적어주세요!

무지 짧죠?

이 부분은 보시는 것처럼 짧아서 간단하게 수정이 가능하니 얼른 수정 해버리겠습니다.

먼저 HTML 코드를 살짝 수정했습니다.

      <s_article_protected>

        <div class="entryProtected">

          <h2><a href="[ ##_article_rep_link_##]">[ ##_article_rep_title_##]</a></h2>

          <span class="date">[ ##_article_rep_date_##]</span>

          <hr/>

          <p>비밀 글입니다. 내용을 보실 분은 암호를 입력해주세요.</p>

          <p><label for="[ ##_article_password_##]">비밀번호 : </label>

            <input type="password" maxlength="16" id="[ ##_article_password_##]" name="[ ##_article_password_##]" value="" onkeydown="if (event.keyCode == 13)[ ##_article_dissolve_##]" />

            <input type="button" class="submit" value="입력" onclick="[ ##_article_dissolve_##]" />

          </p>

        </div>

        </s_article_protected>

공지사항처럼 <hr/> 태그를 하나 넣었고, 비밀 글에서 나오는 문장을 수정했습니다.

input 부분은 크게 신경써줄건 없겠네요.

바로 CSS로 넘어가보죠.

.entryProtected a {color:#000;text-decoration:none;}

.entryProtected a:hover {color:#08C;text-decoration:none;}

.entryProtected hr {margin:5px 0 10px 0;}

.entryProtected p {font-size:14px; margin:5px 0 5px 0;}

이 부분은 공지사항 부분과 거의 비슷합니다.

.entryProtected 안에는 a 태그, 공지사항처럼 제목에 하나가 있죠.

이 부분은 공지사항에서 본 속성을 그대로 사용했구요.

hr부분도 공지사항 부분과 똑같은 효과를 줬습니다.

.entryProtected p에는 font-size:14px을 주고, margin으로 위아래 5px씩의 여백을 줬네요.

수정이 된 상태입니다.

별 차이 없다구요?

어쩔 수 없어요 ㅠ

비밀글이라고 되어있는 제목에 마우스를 대보면 #08C의 색상으로 변합니다.

끝!

오늘은 무지 간단하게 끝났네요!

다음 스킨 변경 글에서 뵙죠.