[오딧세이스킨] 상위 이미지 없애기

오딧세이 스킨은 글보기에서 아래처럼 자동으로 탑메뉴아래 이미지와 제목, 날짜 등이 들어가는 000d이 있습니다. 이미지가 확대되고, 자리를 너무많이 차지하여 이미지를 없애고 제목과 카테고리를 다르게 해보겠습니다.

오딧세이스킨 글보기 제목 및 썸네일

[목차]

 

오딧세이 스킨 글보기의 상위 이미지 없애는 방법

 

1. 상위이미지 CSS

글보긱의 CSS는 "area-view"로 정의 되어 있습니다. 이중에서 상위 썸네일과 제목 부분에 해당하는 부분은 "article-header"입니다.

CSS article-header 부분

2740번줄에 있네요. (전에 수정한 부분이 있어서 정확하지는 않습니다.)

• article-header : 썸네일 이미지 들어가는 자리
• article-header:before : 썸네일 이미지 어둡게 하는 자리
• ariticle-header .box-meta : category, title, writer, date 들어가는 자리

이렇게 3개의 레이어로 구성되어있습니다. 썸네일레이어, 가독성을 높이기 위해 썸네일을 약간 어둡게 해주는 레이어, 텍스트가 들어가는 레이어로 되어 있다고 보면 됩니다.

airticle-header:before에서 background-color로 원하는 색을 넣어도 됩니다.

하지만, 썸네일 이미지 위에 덮어 쓰는 것이므로 로딩시간을 단축하기 위해 위 이미지가 로딩되지 않게 하도록 합니다.

 

2. html에서 썸네일 삭제

<!-- area-view / 뷰페이지 및 기본 영역 -->
            <div class="area-view">
              <!-- s_article_rep -->
              <s_article_rep>

                <!-- s_permalink_article_rep / 뷰페이지 -->
                <s_permalink_article_rep>
                  <!-- 이미지가 없는 경우 article-header-noimg -->
                  <div class="article-header" thumbnail="<s_article_rep_thumbnail>https://img1.daumcdn.net/thumb/R1440x0/?scode=mtistory2&fname=https://blog.kakaocdn.net/dn/bxOh0C/btsIPRTtbqO/hDHB1CSygtRPkhLTPJfl0k/img.png</s_article_rep_thumbnail>" style="background-image:url('')">
                    <div class="inner-header">
                      <div class="box-meta">
                        <p class="category">지식창고</p>
                        <h2 class="title-article">[오딧세이스킨] 상위 이미지 없애기</h2>
                        <div class="box-info">
                          <span class="writer">Consomme</span>
                          <span class="date">2024. 7. 27. 23:09</span>
                          
                        </div>
                      </div>
                    </div>
                  </div>

썸네일을 빼고 싶기 때문에 "article-header"의 썸네일을 불러오는 코드 thumbnail 부분의 코드를 삭제 해줍니다.

<!-- s_permalink_article_rep / 뷰페이지 -->
                <s_permalink_article_rep>
                  <!-- 이미지가 없는 경우 article-header-noimg -->
                  <div class="article-header"  >
                    <div class="inner-header">
                      <div class="box-meta">
                        <p class="category">지식창고</p>
                        <h2 class="title-article">[오딧세이스킨] 상위 이미지 없애기</h2>
                        <div class="box-info">
                          <span class="writer">Consomme</span>
                          <span class="date">2024. 7. 27. 23:09</span>
                          
                        </div>
                      </div>
                    </div>
                  </div>

썸네일 삭제후의 article-header

썸네일만 삭제한 후의 article-header 부분입니다. 썸네일 이미지가 없으니 변경해 보겠습니다.

 

3. CSS 수정

배경색: article-header:before 의 background-color 수정

background-color: #697c8b;

 

카테고리: article-header .box-meta .category 수정

 

제목: ariticle-header .title-article 수정

 

writer, date: 

 

4. 본문간격 수정

article-heder의 높이를 조절하면, 본문과의 간격이 넓어지거나 좁아집니다.

줄인만큼 470px에서 빼고, 늘렸으면 470px에서 더하면 됩니다.

모바일도 마찬가지 입니다. 250px로 설정했습니다.

 

성공하시길 기원합니다.