본문 바로가기

[Portfolio 스킨] 27. 홈 화면의 안 쓰는 커버 커스텀 1탄: 갤러리 HTML 구조 분석부터 시작!

728x90

 

📌 커버 커스텀 도전기 : 갤러리 HTML 구조 분석!

 

홈 화면에 안 쓰는 커버를 커스텀해서 활용하고 싶어졌다.

내가 포트폴리오 스킨을 사용하는 가장 큰 이유가 슬라이더 커버 때문이다.

반면 와이드 패널은 내 블로그 스타일과 맞지 않아서 전혀 쓸 일이 없어 보인다.

와이드 패널은 배너처럼 가로로 길쭉한 형태로 사진이나 작업물을 자주 올리는 블로그에는 잘 어울릴 듯하다.

하지만 내 블로그에서는 활용도가 떨어진다.

갤러리 커버는 모바일 화면에서 작게 보여서 손이 잘 안 간다.

결국 현재 섬네일 리스트와 리스트형 커버만 사용 중인데 너무 단조로워 보여서 다른 커버를 커스텀해보려고 한다.

문제는...

코딩을 배운 적이 없다는 것! 😥 어디서부터 손을 대야 할지 감이 안 와서 일단 갤러리 HTML 구조부터 분석해 보기로 했다.

 

 

 

🔧 포트폴리오 스킨 갤러리 HTML 구조를 하나씩 살펴보자!

✔ 티스토리 스킨의 HTML을 확인하기 위해선 꾸미기 → 스킨 변경 → 변경 → 스킨 편집 → HTML 편집 → HTML 화면으로 들어가면 된다.

 

 

💻 확인할 부분 : type_post

블로그의 메인 화면에서 게시글 목록을 갤러리 형식으로 보여준다.

<main id="main">
  <!-- area_cover -->
  <s_cover_group>
    <div class="area_cover">
      <s_cover_rep>
      
      (...생략...)
      
        <s_cover name='post'>
          <!-- type_post 갤러리 타입 -->
          <div class="type_post">
            <h2 class="title_section"></h2>
            <ul class="list_post">
              <s_cover_item>
                <li class="item_post">
                  <a href="" class="link_post item-thumbnail"
                    style="background-image:url('<s_cover_item_thumbnail></s_cover_item_thumbnail>')">
                    <div class="info">
                      <strong class="name"></strong>
                      <s_cover_item_article_info>
                        <span class="date"></span>
                      </s_cover_item_article_info>
                    </div>
                  </a>
                </li>
              </s_cover_item>
            </ul>
          </div>
          <!-- // type_post -->
        </s_cover>
      </s_cover_rep>
    </div>
  </s_cover_group>
  <!-- // area_cover -->

 

 

🏗️ 전체 구조 먼저 이해하기

<main>  // 웹페이지에서 메인 콘텐츠를 감싸는 태그
<div class="area_cover">  // 게시글 목록을 감싸는 컨테이너
<h2 class="title_section"></h2>  // 게시글 목록의 제목
<ul class="list_post">  // 게시글 목록을 담는 리스트
<li class="item_post">  // 각 게시글 하나하나
<a href="" class="link_post item-thumbnail">  // 게시글로 이동하는 링크
<strong class="name"></strong>  // 게시글 제목
<span class="date"></span>  // 게시글 날짜

 

치환자 내용 : 티스토리 스킨 가이드

728x90

 

 

📝 코드 하나씩 확인하기

1️⃣ 메인화면

<main id="main">

main 태그 : 웹페이지에서 메인 콘텐츠를 담는 부분.

id="main" : 이 요소에 "main"이라는 이름을 붙여서 CSS나 JavaScript에서 활용할 수 있다.

 

 

2️⃣ 게시글 목록 영역 지정

<!-- area_cover -->
<s_cover_group>  // ②
  <div class="area_cover">  // ②

커버 그룹 치환자.

② 내부에서 게시글 리스트를 감싸는 컨테이너(박스) 역할이다.

페이지 전체에서 게시글 목록을 특정 영역에 넣기 위해 사용된다.

 

 

3️⃣ 게시글 리스트 시작

<s_cover_rep>  // ①
  <s_cover name='post'>  // ②

① 개별 커버 표시 → 게시글 목록을 반복해서 보여줄 때 사용하는 티스토리 치환자.

② 게시글 리스트를 나타내는 커버 블록이라는 뜻으로 여기서부터 게시글 리스트가 시작된다.

 

 

4️⃣ 갤러리 목록 시작

<!-- type_post 갤러리 타입 -->
<div class="type_post">  // ①
  <h2 class="title_section"></h2>  // ②

② 게시글 목록을 갤러리 형식으로 감싸는 박스로 제목과 게시글 리스트가 들어간다.

h2 태그 : 제목(Heading)을 나타내는 부분.

 

📍 ##_cover_title_## : 개별 커버 타이틀.

개별 커버 타이틀

 

 

5️⃣ 갤러리의 게시글 표시

<ul class="list_post">  // ①
  <s_cover_item>  // ②
    <li class="item_post">  // ③

① 게시글 목록을 담는 리스트

② 개별 커버 콘텐츠 → 반복해서 게시글을 추가하는 티스토리 치환자. 즉, <li>가 여러 개 만들어진다.

 

③ 각각의 게시글 하나

 

 

반응형

6️⃣ 갤러리 게시글의 링크 및 배경 이미지(썸네일) 지정

<a href=""  // ①
 class="link_post item-thumbnail"  // ②
  style="background-image:url('<s_cover_item_thumbnail></s_cover_item_thumbnail>')">  // ③

a 태그 : 링크 역할하는 부분. 클릭하면 해당 게시글로 이동한다.

① 티스토리 치환자를 사용해서 자동으로 게시글의 주소(url)를 넣어준다.

② 스타일을 적용하기 위한 클래스 background-image:url(...) : 썸네일 이미지를 배경으로 표시한다.

③ 티스토리 치환자를 사용에서 자동으로 썸네일 부분을 채워준다.

즉, 게시글마다 썸네일이 만들어진다.

 

📍 ##_cover_item_url_## : 콘텐츠 url

📍 s_cover_item_thumbnail : 콘텐츠 이미지가 있는 경우에만 치환

📍 ##_cover_item_thumbnail_## : 콘텐츠 이미지

 

 

7️⃣ 게시글 정보 (제목 & 날짜)

<div class="info">
  <strong class="name"></strong>  // ①
  <s_cover_item_article_info>
    <span class="date"></span>  // ②
  </s_cover_item_article_info>
</div>

① 게시글 제목

② 게시글 날짜

 

📍 ##_cover_item_title_## : 콘텐츠 타이틀

📍 s_cover_item_article_info : 콘텐츠가 글인 경우에만 치환

📍 ##_cover_item_date_## : 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)

 

포트폴리오 스킨에서는 갤러리 형식에서 글 발생 날짜와 시간이 표시되지 않는다.

 


 

이렇게 해서 갤러리 커버의 HTML 구조를 분석해봤다.

막연했던 코드가 어떤 역할을 하는지, 어떻게 구성되어 있는지 조금은 감이 오는 것 같다. (아마도?🙄)

하지만 HTML만 이해한다고 끝이 아니다!

스타일을 결정하는 건 CSS이기 때문에 커스텀을 제대로 하려면 CSS까지 살펴봐야 한다.

다음 편에서는 갤러리 커버의 CSS 구조를 분석하면서 어떤 스타일이 적용되어 있는지 어떻게 수정하면 원하는 디자인을 만들 수 있는지를 하나씩 뜯어볼 예정이다.

728x90