홈 설정 포스터 타입 커버 꾸미기

안녕하세요 별깡솔입니다 : )

별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다

홈 설정 부분 꾸미기

홈 설정 탭에서 커버를 등록하고 5개를 노출시키는 것으로 설정하였습니다
그러나 의도한 레이아웃으로 보이지 않아서 빠르게 수정하기로 했습니다

4번째 글과 이미지가 아래쪽으로 내려가버렸습니다

개발자 도구로 어느 부분에 해당하는지 알아보겠습니다
( Odyssey 스킨 사용중 )

body wrap container main area-main area-common area-cover

커버 2개를 설정해서 area-cover div가 2개 있습니다

선택한 area-cover box-article box-cover-poster

<article class="article-type-common article-type-poster checked-item">
코드를 찾습니다

클릭하고 적용된 css를 참고해보면 width 부분이 33%로 되어있습니다
33%는 3개 5개로 노출하려면 20%로 조정이 필요합니다
미디어 쿼리 부분도 수정이 필요해 보입니다

@media screen and (min-width: 1061px) {
    .article-type-poster {
        max-width: 200px;
    }

    .wrap-right .area-cover > .article-type-poster:nth-child(3n),
    .wrap-right .area-view > .article-type-poster:nth-child(3n) {
            margin-right: 0;
    }
}

미디어 쿼리를 보니 처음부터 설계가 3개 포스터가 한 줄에 노출하기로 된 것 같습니다

우선 width를 20%로 변경하고 확인해보면 아래의 다른 홈 커버도 적용됩니다
인기글은 5개 한줄 최근글은 3개 한줄로 구성하고 싶습니다

.area-common > :first-child을 선택해서 width 값을 다르게
컨트롤하면 커버마다 이미지 크기를 조정할 수 있겠습니다

.area-common > :first-child .article-type-poster {width: 20%;}
인기글 커버만 이미지 크기가 20%로 되었습니다

parent, child 관계와 > selector로 원하는 요소를 적절히 선택해서
원하는 레이아웃을 꾸며보았습니다

스킨 마다 html 구조가 다를 것이기 때문에 개발자 모드를 활용해서
해당 html 부분을 찾아서 적용된 css를 확인해보시길 바랍니다

사용한 css

.box-cover-poster {font-size: 0;}

.area-common > div {margin-bottom: 80px;}
.area-common > :first-child .article-type-poster {width: 20%;margin: 0; padding: 0 10px 5px;}
.area-common > :first-child .article-type-poster .thumbnail {padding-top: 100%;}

.area-common > :nth-child(2) .article-type-poster {width: 33%; margin: 0 0 30px 0; padding: 0 10px 5px;}
.area-common > :nth-child(2) .article-type-poster .thumbnail {padding-top: 100%;}
.area-common > :nth-child(2) .box-cover-poster {white-space: normal;}

미디어 쿼리 부분 max-width = 200%는 주석처리했습니다

별깡솔 블로그를 방문하신 모든 분들 다시 한번 진심으로 감사합니다

구독과 좋아요 : )

다음 글 예고 - 사이드바 꾸미기 2. 카테고리 영역 꾸미기