오디세이 스킨 본문 상단 이미지 없애고 사용하는 방법 코드공유

 

 

오디세이 스킨 본문 상단 이미지를 없애고 사용하는 방법을 궁금해하실 수 있을 것 같아서 (달아주시는 댓글을 보면 실제로 조금 있으신 것 같기도 하고요) 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;
}

 

 

달리 궁금하신 점 있으시면 댓글주세요! ^^