티스토리 스킨 만들기 #19 공지 (1) 목록

공지사항 목록

요번시간에는 공지사항 목록을 만들어보자.

 

치환자

<s_notice_rep> 공지사항 그룹치환자

<s_index_article_rep> 인덱스 그룹치환자

공지 작성자 값치환자

공지 작성일 값치환자

공지글 링크 값치환자

공지 제목 값치환자

공지 요약 값치환자

 

html 작성

<s_notice_rep>
    <div id="notice">

        <s_index_article_rep>
            <div class="notice-list-item">
                <div class='notice-list-info'>
                    <p>
                        <span class='author'><i class="icon-user"></i> </span>
                        <span class="date"><i class="icon-calendar"></i> </span>
                    </p>
                </div>
                <a href="">
                    <div class='notice-list-text'>
                        <h2 class="title"></h2>
                        <p class="summary"></p>
                    </div>
                </a>
            </div>
        </s_index_article_rep>

    </div>
</s_notice_rep>

 

설명은 그림으로

 

css 작성

#notice {	
	border: 2px solid #d09aec;
	margin-bottom: 1px;
}

#notice .notice-list-item {
	padding: 5px 10px;
	background: #fff;
}

#notice .notice-list-item a {
	text-decoration: none;
}

#notice .notice-list-item:hover .notice-list-text {
	text-decoration: underline;
}

#notice .notice-list-info {
	text-align: center;
}

#notice .notice-list-info span {
	margin-left: 10px;
	font-size: 0.875rem;
}

#notice .notice-list-text h2 {
	text-align: center;
}

#notice .notice-list-text p {
	font-size: 1.125rem;
	margin: 5px;
}