20. 티스토리 스킨 만들기 공지사항

오늘 수정할 부분은 공지사항 부분입니다.

이 공지사항 부분은 http://kurien.tistory.com/notice로도 들어갈 수 있습니다.

물론 자신의 블로그에서는 자신의 블로그 주소/notice로 들어가야겠죠?

쉽게 수정할 수 있도록 이 블로그에 있는 공지사항의 내용을 복사했습니다.

먼저 윗 HTML을 보시죠.

      <s_notice_rep>

      <div class="entryNotice">

        <div class="titleWrap">

          <h2><a href="[ ##_notice_rep_link_##]">[ ##_notice_rep_title_##]</a></h2>

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

        </div>

        <hr/>

        <div class="article">

          [ ##_notice_rep_desc_##]

        </div>

      </div>

      </s_notice_rep>

HTML 부분입니다.

구분을 위해 <hr/> 하나를 추가해줬네요.

먼저 제목인 Kurien은...이란 부분은 <h2>~</h2> 까지구요.

바로 아래의 날짜 및 시간은 <span>~</span> 부분입니다.

그 아래 <hr/>로 경계선 하나를 추가했고, 그 밑은 본문 내용이네요.

참 쉽죠?

그럼 CSS를 수정합시다.

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

.entryNotice .titleWrap a:hover {color:#08C;}

.entryNotice .article {font-size:14px;}

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

이해가 힘든 분들을 위해 이미지를 수정했습니다.

먼저 이 공지사항 부분이 .entryNotice구요.

이 안에 제목과 날짜, 시간이 있는 부분이 .titleWrap입니다.

수정된 CSS를 보시면 .titleWrap 내부의 a를 선택자로 지정했죠?

.titleWrap에서 a태그가 사용된 부분은 제목 뿐입니다.

검은색에 밑줄을 없앴고, a:hover로 마우스를 댔을 때 색이 변하게 만들었습니다.

#08C는 #0088CC를 뜻합니다.

그 다음은 .entryNotice .article인데요.

그냥 본문의 기본 폰트 사이즈를 14px로 수정 한 것 외엔 없습니다.

마지막으로 .titleWrap과 .article 사이에 있는 <hr/>.

이 <hr/>위아래로 각각 5px, 10px의 마진을 줘서 타이틀과 본문의 경계를 확실하게 해줬습니다.

수정이 완료 됐네요.

오늘은 어려운게 없었네요.

궁금한 점은 댓글에 남겨주세요^^