블로그-V3. css-grid 사용

블로그의 메인 페이지에는 유저 상관없이 모든 글이 뿌려져야 한다.

 

{{>/layout/main-header}}

<div class="container">

    <div class="my_main_list">
        <!-- 아이템 시작 -->
        <div class="my_main_item">
            <a href="#" class="my_atag_none">
                <div class="my_main_item_thumnail">
                    <img src="/upload/{{thumnail}}" width="100%" height="100%">
                </div>
                <div class="my_main_content my_p_md_1">
                    <div class="my_main_item_title my_text_one_line">
                        <h3>제목입니다</h3>
                    </div>
                    <div class="my_main_item_summary my_mb_sm_1 my_text_two_line">
                        내용입니다
                    </div>
                    <div class="my_main_item_date">
                        2022-04-27 12:48
                    </div>
            </a>
            <a href="#" class="my_atag_none">
                <div class="my_main_item_username">
                    <span>by </span>
                    <b>유저네임</b>
                </div>
            </a>
        </div>
    </div>
    <!-- 아이템 끝 -->
    {{/posts}}

</div>



</div>

{{>/layout/footer}}

 

전체 박스의 css부터 만들어보자

처음 써보는 display: grid;를 사용할 것이다.

 

.my_main_list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

여러 개의 데이터를 더미로 넣어두고 구조를 파악할 건데 너무 따닥따닥 붙어있다.

grid-gap 설정을 줄 건데 쓰지 말라고 줄이 쳐져있다.

인터넷 익스플로러에서 안 먹기 때문이다!

 

 

근데 grid 너무 좋아서 사용할 것이다.

gap에 15px만 주자.

 

 

.my_main_list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 15px;
    margin-bottom: 30px;
}

 

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

 

자동으로 1fr로 화면을 채울 건데 최소값이 300px이고, 최대값이 1fr이라는 말이다.

 

디폴트 사이즈가 300px이고 브라우저의 크기가 작아졌을 때

grid의 크기가 300px보다 작아지면 자동으로 정렬이 달라지면서 크기가 최대 크기인 1fr로 바뀐다.

300px보다 작아질 수 없기 때문에 최소값인것이다.

 

grid 레이아웃 반응형

 

.my_main_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 15px;
    margin-bottom: 30px;
}

 

content의 내용이 길어지면 박스 크기가 달라지기 때문에

2줄 이상 넘어가지 못하게 만들어주자.

두줄을 넘어가면 말줄임표를 띄워줄 것이다.

아래 클래스를 content에 추가해주면 된다!

 

.my_text_two_line {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    line-height: 20px;
    overflow:hidden;
    text-overflow:ellipsis;
}

 

 

근데 다음 게시글 박스에 content 내용이 짧으면 박스크기가 또 달라져서 레이아웃이 안 예뻐진다. 

 

 

css에 가서 높이를 좀 잡아줘야겠다.

 

.my_text_two_line {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    height: 40px;
    line-height: 20px;
    overflow:hidden;
    text-overflow:ellipsis;
}

 

 

이제 DB에서 모든 post를 가지고 와서 뿌려주기만 하면 끝이다.

 

따로 페이징 처리는 하지 않고 LIMIT으로 쿼리를 만들어서 9개만 가져와서 뿌려줄 것이고,

id 기준 ORDER BY id DESC 해주자.

 

// Love 기능 구현 후 쿼리 변경
@Query(value = "SELECT * FROM post ORDER BY id DESC LIMIT 0,9", nativeQuery = true)
List<Post> mFindByPopular();

 

나중에는 좋아요 순으로 정렬해줄 것이다.

 

{{>/layout/main-header}}

<div class="container">

    <div class="my_main_list">

        {{#posts}}
        <!-- 아이템 시작 -->
        <div class="my_main_item">
            <a href="/post/{{id}}" class="my_atag_none">
                <div class="my_main_item_thumnail">
                    {{#thumnail}}
                    <img src="/upload/{{thumnail}}" width="100%" height="100%">
                    {{/thumnail}}
                    {{^thumnail}}
                    <div class="my_fakeimg"> </div>
                    {{/thumnail}}
                </div>
                <div class="my_main_content my_p_md_1">
                    <div class="my_main_item_title my_text_one_line">
                        <h3>{{title}}</h3>
                    </div>
                    <div class="my_main_item_summary my_mb_sm_1 my_text_two_line">
                        {{{formatContent}}}
                    </div>
                    <div class="my_main_item_date">
                        {{formatCreateDate}}
                    </div>
            </a>
            <a href="/user/{{user.id}}/post" class="my_atag_none">
                <div class="my_main_item_username">
                    <span>by </span>
                    <b>{{user.username}}</b>
                </div>
            </a>
        </div>
    </div>
    <!-- 아이템 끝 -->
    {{/posts}}

</div>



</div>

{{>/layout/footer}}

 

 

[출처]

 

https://cafe.naver.com/metacoding

메타코딩 : 네이버 카페

메타 코딩 유튜브

https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9

메타코딩