블로그 스팟 메인화면 꾸미기

레이아웃 → 메인 게시판 가젯 편집 → 맨 바깥을 아래처럼 감싸주세요.

<b:if cond='data:blog.pageType == "index"'>

<div id="cocos-hero">

<section class="cocos-center">

<style>

#cocos-hero {margin-top:20px}

/* 여기 부분만 수정 */

.cocos-center {

max-width:100%; /* 1180px 제한 제거 */

width:100%;

margin:0; /* 가운데 정렬용 여백 제거 */

padding:28px 0; /* 좌우 패딩도 본문과 같게 */

text-align:center;

}

.cocos-heading {

font-size:32px;

font-weight:900;

letter-spacing:-.3px;

margin:0 0 22px 0;

color:#111

}

.cocos-grid {

display:grid;

grid-template-columns:repeat(auto-fit,minmax(210px,1fr));

gap:16px;

justify-items:center;

align-items:stretch

}

@media(min-width:1200px){

.cocos-grid{

grid-template-columns:repeat(5,1fr)

}

.cocos-card {

width:100%;

background:#fff;

border-radius:20px;

box-shadow:0 6px 20px rgba(0,0,0,.07);

padding:20px 16px;

display:flex;

flex-direction:column;

justify-content:flex-start;

gap:12px;

text-align:center;

transition:.25s ease;

}

.cocos-card:hover {

transform:translateY(-4px);

box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.cocos-title {

font-size:20px;

font-weight:900;

color:#23395d

}

.cocos-desc {

color:#6b7280;

font-size:15px;

line-height:1.35

}

.cocos-btn {

margin-top:auto;

display:block;

width:100%;

text-align:center;

background:#1a73e8;

color:#fff;

text-decoration:none;

padding:11px 0;

border-radius:12px;

font-weight:800;

font-size:15px;

transition:.25s ease;

}

.cocos-btn:hover {

background:#1558b0

}

</style>

<h1 class="cocos-heading">코코스학원 이매관 수강정보 바로가기</h1>

<div class="cocos-grid">