Blooger Website) 4. 여러개의 게시글 작성하고 페이지 나타내기

 

 

블로그에 첫번째 게시물과 같은 형태를 띈 게시물을 여러개 작성하고 

페이지의 맨아래에 페이지를 나타내도록 하자. 

 

 

 

 

 

1. index. html

첫번째 게시물의 post content를 복사해서 horizontal line(<hr>)만 추가하고 복사해주면 된다. 

<!----------------------Site Content---------------->

    <section class="container">
        <div class="site-content">
            <div class="posts">
                <div class="post-content">
                    <div class="post-image">
                        <div>
                            <img src="./assets/Blog-post/blog1.png" class="img"alt="blog1">
                        </div>
                        <div class="post-info flex-row">

                            <span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;Admin</span>
                            <span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;January 14, 2019</span>
                            <span>2 comments</span>
                        </div>
                    </div>
                    <div class="post-title">
                        <a href="#">Why should boys have all the fun? it/s the women who are making india an alcohol-loving country.</a>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique mollitia aliquam, ipsa necessitatibus ad nisi? Voluptatum ea, ratione, nisi voluptatem quidem similique accusantium asperiores laborum beatae fugiat sint labore ad nulla nemo corporis quaerat magni iusto provident, earum vero porro!</p>
                        <button class="btn post-btn">Read More &nbsp;<i class="fas fa-arrow-right"></i></button>
                    </div>
                </div>
                <hr>
                <div class="post-content">
                    <div class="post-image">
                        <div>
                            <img src="./assets/Blog-post/blog2.png" class="img"alt="blog1">
                        </div>
                        <div class="post-info flex-row">

                            <span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;Admin</span>
                            <span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;January 16, 2019</span>
                            <span>7 comments</span>
                        </div>
                    </div>
                    <div class="post-title">
                        <a href="#">Why should boys have all the fun? it/s the women who are making india an alcohol-loving country.</a>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique mollitia aliquam, ipsa necessitatibus ad nisi? Voluptatum ea, ratione, nisi voluptatem quidem similique accusantium asperiores laborum beatae fugiat sint labore ad nulla nemo corporis quaerat magni iusto provident, earum vero porro!</p>
                        <button class="btn post-btn">Read More &nbsp;<i class="fas fa-arrow-right"></i></button>
                    </div>
                </div>
                <hr>
                <div class="post-content">
                    <div class="post-image">
                        <div>
                            <img src="./assets/Blog-post/blog3.png" class="img"alt="blog1">
                        </div>
                        <div class="post-info flex-row">

                            <span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;Admin</span>
                            <span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;January 19, 2019</span>
                            <span>5 comments</span>
                        </div>
                    </div>
                    <div class="post-title">
                        <a href="#">New data recording system to better analyse road accidents</a>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique mollitia aliquam, ipsa necessitatibus ad nisi? Voluptatum ea, ratione, nisi voluptatem quidem similique accusantium asperiores laborum beatae fugiat sint labore ad nulla nemo corporis quaerat magni iusto provident, earum vero porro!</p>
                        <button class="btn post-btn">Read More &nbsp;<i class="fas fa-arrow-right"></i></button>
                    </div>
                </div>
                <hr>
                <div class="post-content">
                    <div class="post-image">
                        <div>
                            <img src="./assets/Blog-post/blog4.png" class="img"alt="blog1">
                        </div>
                        <div class="post-info flex-row">

                            <span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;Admin</span>
                            <span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;January 21, 2019</span>
                            <span>12 comments</span>
                        </div>
                    </div>
                    <div class="post-title">
                        <a href="#">Why should boys have all the fun? it/s the women who are making india an alcohol-loving country.</a>
                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique mollitia aliquam, ipsa necessitatibus ad nisi? Voluptatum ea, ratione, nisi voluptatem quidem similique accusantium asperiores laborum beatae fugiat sint labore ad nulla nemo corporis quaerat magni iusto provident, earum vero porro!</p>
                        <button class="btn post-btn">Read More &nbsp;<i class="fas fa-arrow-right"></i></button>
                    </div>
                </div>
                <div class="pagination flex-row">
                    <a href="#"><i class="fas fa-chevron-left"></i></a>
                    <a href="#" class="page">1</a>
                    <a href="#" class="page">2</a>
                    <a href="#" class="page">3</a>
                    <a href="#"><i class="fas fa-chevron-right"></i></a>
                </div>
            </div>
            <aside class="sidebar">
                <h1>Sidebar</h1>
            </aside>
        </div>
    </section>

    <!---------x------------Site Content-------x-------->

 

 

 

2. style.css

게시글은 이전과 동일한 설정이므로 건들지 않아도 되고, 페이지를 나타내는 부분만 설정해준다. 

.site-content .pagination{
    justify-content: center;
    color:var(--text-gray);
    margin:4rem 0;

}
.site-content .pagination a{
    padding: .6rem .9rem;
    border-radius: 2rem;
    margin: 0 .3rem;
    font-family: var(--Lexend);
}
.site-content .pagination .page{
    background: var(--text-gray);
    color: var(--white);
}
/*---x------Site Content---x-------*/

 

 

 

사진으로 보면,

 

이전과 동일한 형태의 게시글

 

 

 

맨 아랫부분에 페이지 작성