오디세이 스킨 본문 상단 이미지를 없애고 사용하는 방법을 궁금해하실 수 있을 것 같아서 (달아주시는 댓글을 보면 실제로 조금 있으신 것 같기도 하고요) CSS 코드를 공유하기로 했습니다 :)
본래는 오디세이 적용 예시 스킨과 같이 대표 이미지가 스킨 본문의 상단에 백그라운드 이미지로 설정되어있는 형태입니다. 이미지 위로 카테고리와 타이틀, 작성일자가 표시됩니다.
저는 이 부분을 코드 변경하여 아래와 같은 형태로 사용하고 있습니다 :)
배경 이미지 없이 카테고리명과 제목, 작성일자가 표시되고 아래로 라인을 설정하였습니다. 모바일에서도 동일한 형태로 노출됩니다.
코드를 수정하기 전에는 반드시 이전 코드로 되돌릴 수 있도록 메모장 같은 곳에 css 코드를 백업해두시고 진행하시는 것 추천드립니다. 오류나는 경우 이전으로 되돌릴 수 있도록 말이죠!
#tt-body-page .main {
padding-top: 40px;
}
.article-header {
background-image: none!important; /* 기재 된 부분 모두 없애고 해당코드 추가 */
}
.article-header:before { /* 기재 된 부분 모두 없애기 css 자체를 삭제하여도 무관합니다 */ }
.article-header .inner-header {
max-width: 1020px;
margin: 0 auto;
margin-bottom: 45px;
padding-bottom: 35px;
border-bottom: 1px solid #efefef;
}
.article-header .box-meta { /* 기재 된 부분 모두 없애기 */ }
@media screen and (max-width: 1060px)
#tt-body-page .main {
padding-top:40px;
}
/* 아래 부분에 기재 된 폰트 사이즈 들은 원하시는대로 조절하시면 됩니다 */
/* 제가 적용한 코드 그대로 붙여넣어 드릴게요 */
.article-header .box-meta .category {
margin-bottom: 12px;
font-size: 14px;
font-weight: 600;
}
.article-header .title-article {
width: 100%;
max-width: 760px;
margin: 0 0 33px 0;
font-size: 48px;
font-weight: 400;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
word-break: keep-all;
}
.article-header .box-info {
font-size: 13px;
line-height: 1.54;
opacity: .7;
}
달리 궁금하신 점 있으시면 댓글주세요! ^^
