티스토리 스킨 만들기 #20 공지 (2) 본문

공지 본문

지난시간에는 공지사항 목록을 만들어봤다. 요번시간에는 내가 공지한 글을 보여지게 해보자.

 

치환자

<s_permalink_article_rep> 공지 본문 그룹치환자

공지 제목 값치환자

작성자 값치환자

작성일 값치환자

공지 본문 값치환자

 

html 작성

<s_notice_rep>
    <div id="notice">

        <!-- 공지 목록 -->

        <s_permalink_article_rep>
            <div class="notice-title">
                <h2></h2>
            </div>
            <div class='notice-info'>
                <p><i class="icon-user"></i>  <span><i class="icon-calendar"></i> </span></p>
            </div>
            <div class="notice">
                
            </div>
        </s_permalink_article_rep>

    </div>
</s_notice_rep>

 

설명은 그림으로

 

css 작성

#notice .notice-title {
	padding: 10px 20px;
	background: #ddd;
}

#notice .notice-title h1 {
	font-size: 1.875rem;
}

#notice .notice-info {
	padding: 5px 20px;
	background: #aaa;
	margin-bottom: 5px;
}

#notice .notice-info p span {
	margin-left: 10px;
}

#notice .notice {
	padding: 20px;
	background: #fff;
}