html, css

#header .inner {
position: relative;
max-width: 1440px; /* 1080px, 기록의 최대 너비 */
margin: 0 auto;
}

#header h1 {
padding: 23px 0 ;
font-family: 'Nanum Myeongjo';
font-weight: 800; /* 기록 굵기 */
font-size: 1.75em;
line-height: 32px;
letter-spacing: -0.2px;
color: #333;
}

#gnb {
height: 6px; /* 기록 헤더의 높이 */
overflow-x: auto;
overflow-y: hidden;
-ms-overflow-style: none;
}

#container .content-wrap {
max-width: 1080px; /* 1080px, 본문 영역 넓어짐 */
margin: 0 auto;
padding: 0 20px;
}
#container .content-wrap:before {
content: "";
position: absolute;
top: 0;
left: 50%;
z-index: 10;
width: 1px;
height: 100%;
margin-left: 255px; /* 255px, 본문 영역 우측 경계 */
background-color: rgb(255, 0, 0); /* #eee, 본문 영역 우측 경계 색상 */
}

#aside {
float: right;
/* 사이드 바 크기 */
/* width: 21.296296296296296% */
width: 21.296296296296296%;
padding: 75px 0 32px;
box-sizing: border-box;
}

.sidebar h2 {
margin-bottom: 7px;
font-weight: 500;
font-size: 0.875em;
color: #555; /* 최근댓글, 태그, 전체방문자 글자 색상*/
}

.sidebar ul li a:hover {
color: #333; /* 마우스 호버 시의 글자 색상*/
}

.sidebar .sidebar-2 {
margin-top: 38px;
padding-top: 46px;
border-top: 1px solid #eee; /* 사이드 바 위쪽 경계 색상 */
}

.sidebar .category ul li a {
color: #555; /* 봉인, 바람, 글, 코드의 색상 */
}
.sidebar .category ul li a:hover {
color: #333; /* 봉인, 바람, 글, 코드 마우스 호버 시의 색상 */
}

.sidebar .category ul li ul li ul li {
position: relative; /* absolute로 바꾸면 C++, CSS 겹침 */
padding: 3px 0 3px 9px;
/* border-left: 2px solid #eee; */
font-size: 0.8125rem;
}

.sidebar .category ul li ul li ul li:before {
content: "";
position: relative;
bottom: 7px;
left: 0;
width: 2px;
height: 100%;
background-color: #eee; /* 하위 카테고리인 c++ 좌측의 세로 줄 컬러*/
}

.sidebar .post-list ul li img {
float: right; /* 카테고리 - 최근 내 변경*/
width: 58px;
height: 58px;
margin: 2px 0 0 20px;
}

.post-cover {
position: relative;
z-index: 20; /* 0으로 하면 본문 영역 경계선이 타이틀 침범 */
display: table;
width: 100%;
height: 0px; /* 340px, title의 높이 */
background-color: #cbcbcb;
background-position: 50% 50%;
background-size: cover;
box-sizing: border-box;
}

.post-cover:before {
content: "";
/* relative 시 커버 배경의 어두움 보정이 사라져서 원래 사진 출력,
배경이 밝아져서 타이틀 글자가 잘 안보임 */
position: absolute;

top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.25);
}

.post-cover .category {
display: block;
max-width: 1080px;
margin: 0 auto 13px;
font-size: 0.875em;
color: #fff; /* 커버 내 카테고리 글자의 색상 */
}

.post-cover h1 {
max-width: 1080px;
margin: 0 auto;
font-weight: 300;
font-size: 2.125em;
line-height: 1.2352;
color: #fff; /* Chapter04 색상 */
}

.post-cover h1 {
max-width: 1440px; /* 1080px, 커버 내 제목의 최대 너비 */
margin: 0 auto;
font-weight: 300;
font-size: 2.125em;
line-height: 1.2352;
color: #fff; /* Chapter04 색상 */
}

.post-cover .meta {
display: block;
max-width: 1440px; /* 1080px, by bongin의 최대 너비 */
margin: 34px auto 0; /* Chapter04와 by bongin 사이의 거리 */
font-size: 0.875em;
color: rgba(255,255,255,0.6); /* by bongin 색상*/
}

#tt-body-page #container {
padding-top: 339px; /* 339px, 커버와 본문 사이 간격 */
}

https://hagis.tistory.com/46
.post-cover .meta {
display: block;
max-width: 1080px;
margin: 34px auto 0; /* Chapter04와 by bongin 사이의 거리 */
font-size: 0.875em;
color: rgba(255,255,255,0.6); /* by bongin 색상*/
}

https://blog.naver.com/openperl/221951574845
.post-cover .inner {
display: table-cell;
position: relative;
z-index: 10;
vertical-align: bottom;
padding-bottom: 0px; /* 78px, 커버 내 아래 공간 */
}

@media screen and (max-width:767px) {
.post-cover .category {
margin-bottom: 0px; /* 13px, 모바일 화면의 커버 내 카테고리의 아래 공간 */
}
}

@media screen and (max-width:767px) {
.post-cover .meta {
margin-top: 33px; /* 13px, 모바일 화면의 커버 내 by boing의 위 공간 */
font-size: 0.8125em;
}
}

@media screen and (max-width:767px) {
.post-cover .inner {
padding-bottom: 0px;
vertical-align: bottom; /* 모바일 화면의 커버 내 아래 공간 */
}
}