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

오늘은 티스토리 스킨 만들기에서 사이드바 영역의 공지사항 부분입니다.

먼저 블로그 정보를 빼고 공지사항을 넣었습니다.

이게 현재 공지사항 부분인데요.

저는 글을 하나 더 넣었고, 태그에 제목을 넣어줍니다.

      <s_sidebar_element>

      <!-- 공지사항 -->

        <s_rct_notice>

        <div class="notice">

          <h3>공지사항</h3>

          <ul>

          <s_rct_notice_rep>

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

          </s_rct_notice_rep>

          </ul>

        </div>

        </s_rct_notice>

      </s_sidebar_element>

이렇게 빨간색 적은 부분처럼 공지사항 제목을 넣어주세요.

태그에 제목을 넣게 되면 이렇게 목록의 위에 제목이 나옵니다.

이제 본격적으로 스타일을 적용해봅시다.

.notice {margin-bottom:10px;}

.notice h3 {

text-align:center;

margin-bottom:10px;

color:#fff;

text-shadow:3px 3px 5px #202d44;

}

.notice ul {margin-left:25px;list-style:circle;}

이렇게 3종류의 선택자를 사용했습니다.

차근차근 알아볼께요.

.notice {margin-bottom:10px;}

먼저 notice 클래스를 가진 공지사항의 아래 쪽에 10px의 여백을 만듭니다.

이렇게 공백을 만들어서, 다음에 나올 부분과 딱 달라붙지 않게 해주세요.

.notice h3 {

text-align:center;

margin-bottom:10px;

color:#fff;

text-shadow:3px 3px 5px #202d44;

}

다음부분은 notice 클래스의 h3 태그입니다.

공지사항이라고 써져있는 부분이죠.

먼저 text-align:center로 가운데 정렬을 해줬구요.

공지사항과 목록 사이에 공백이 필요할 것 같아 10px의 마진을 줬습니다.

글씨색도 흰색으로 바꿔주고, text-shadow:3px 3px 5px #202d44;로 공지사항에 그림자를 줬습니다.

이렇게 h3 부분이 완성되었구요.

마지막 한줄입니다.

.notice ul {margin-left:25px;list-style:circle;}

notice 클래스의 ul 태그에 list-style을 주시고, 왼쪽에 공백을 줘서 글을 오른쪽으로 밀어줍니다.

마진을 주지 않으면 list-style이 사라져버립니다.

이렇게 목록을 리스트로 만들었습니다.

이렇게 공지사항 부분을 만들었습니다.

최근 글, 최근 댓글 등도 이런식으로 만들면 될 것 같네요.

언제나 말씀드리지만 전체적인 디자인은 다 만들고 설정 할 생각입니다... ㅠㅠ

http://kreedit.tistory.com으로 가면 현재 진행 상황을 보실 수 있고,

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