📌 커버 커스텀 도전기 : 갤러리 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> // 게시글 날짜
치환자 내용 : 티스토리 스킨 가이드
📝 코드 하나씩 확인하기
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 구조를 분석하면서 어떤 스타일이 적용되어 있는지 어떻게 수정하면 원하는 디자인을 만들 수 있는지를 하나씩 뜯어볼 예정이다.