.container { display: grid; height: 100vh; grid-template-areas: "header header" "ticker ticker" "main aside" "footer aside"; grid-template-columns: 1fr minmax(200px, 400px); grid-template-rows: minmax(auto, 50px) minmax(auto, 3%) 2fr auto; > .header { grid-area: header; border-bottom: 1px solid #dedede; background: #f4f4f4; // 로고 > a { font-size: inherit; padding-right: 20px; } // 메뉴 nav { font-weight: 700; ul { li { a, button { &:hover { font-weight: 500; text-decoration: underline; } } } } } } // 전광판 > .panel { grid-area: ticker; border-bottom: 1px solid #dedede; } // 좌측 내용 > .main { position: relative; grid-area: main; overflow-y: auto; border-bottom: 1px solid #dedede; } // 우측 내용 > .aside { grid-area: aside; border-left: 1px solid #dedede; } // 하단 내용 > .footer { grid-area: footer; font-size: 0.688rem; padding: 4px; ol { display: flex; flex-flow: row; justify-content: space-between; li { &:nth-of-type(1) { // 최근 게시글 flex-grow: 1; } &:nth-of-type(2) { // 공지사항 flex-grow: 1; } &:nth-of-type(3) { // Copyright flex-grow: 0; } } } } #pagination { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; padding: 0.938rem 0 1.25rem 0; button { margin: 0 0.125rem; padding: 0.25rem 0.625rem; border-radius: 3px; &:hover { background: #f0f0f0; outline: 1px solid #dedede; } &.active { background: #f0f0f0; outline: 1px solid #b3b3b3; pointer-events: none; } } } }