TISTORY_블로그 꾸미기_Day3_카테고리 게시글 꾸미기

 

오늘은 지난 시간에 이어서 카테고리 게시글 목록을 꾸며보자. 

기본적으로는 일반 게시글처럼 텍스트 및 썸네일 이미지가 아래와 같은 형태로 이루어진다. 

위와 같은 구조를 flex를 사용하여 좀 더 아기자기하고 귀여운 카드 뉴스 형태로 만들고자 한다. 
그를 위해서 기본적으로 존재하는 html태그에섯 css만 변경하지 않고, 구조 자체를 내가 원하는 대로 수정하고자 한다.

구상하는 초안은 아래와 같다. 

 

1. 구조 변경

위의 구조를 구성하기 위한 html 코드를 아래와 같이 수정하여 적용하고 css를 입히면서 하나하나 모양을 만들어보자. 

클래스명 또한 기존의 틀을 벗어나서 사용하기 위해 새로 작성한 것도 있기 때문에 그냥 새롭게 작성하는 것이 덜 헷갈릴 것이다. 

아래의 소스는 블로그 설정에서 꾸미기 > 스킨 편집 > html편집으로 들어가서 

아래 소스 바로 밑에 덮어쓰면 된다. 

<h2 class="title-search article-title-thumbnail" list-style="thumbnail"><b class="archives"></b> <span></span></h2>

<div class="article-content-flex">
	<s_list_rep>
		<div class="article-type-common article-type-thumbnail">
			<!--20231122추가 게시물 구조 변경 start -->
			<div class="article-content-category">
				<span>🎈 </span>
			</div>

            <div class="article-content-thumnail-img">
                <a href="" class="link-article">
                    <p class="" <s_list_rep_thumbnail> has-thumbnail="1" style="background-image:url('')" </s_list_rep_thumbnail>>
                        <img src="" class="img-thumbnail" role="presentation">
                    </p>
                </a>
            </div>

            <div class="article-content-title">
                <a href="" class="link-article">
                    <strong class="title">📑 </strong>
                    <p class="summary"></p>
                </a>
            </div>
            <div class="article-content-meta-data">
                <img src="https://tistory1.daumcdn.net/tistory/5348634/attach/72a6743cbe234568a33b02cde2996fc6" class="thumb-img" alt="프로필사진" style="width:40px; height:40px; border-radius:70%">
                <div class="box-meta">
                	<div>Leo.K</div>
                	<div class="date"></div>
                	<s_rp_count>2</s_rp_count>
           		</div>
                <span class="reply">
                    <s_rp_count>2</s_rp_count>
                </span>
       		</div>
			<!--20231122추가 게시물 구조 변경 end -->
		</div>
	</s_list_rep>
</div>

위의 html을 적용하고 나니 아래와 같이 모양이 바뀌었다. ㅎㅎ 이제 슬슬 예쁘게 꾸며보자. 

2. 전체 구조 잡기 

먼저 카드 모양을 잡기 전에 카드(게시물)들이 나열될 전체 구조에 대해 잡아야 한다. 
지금은 1열로 나열되어 있지만 전체 구조를 flex로 잡아줄것이다. 한 줄에 3개씩 보일 수 있도록 크기 조절도 해야한다. 
아마도 전체 구조를 잡은 뒤로는 위의 이미지와는 크게 달라질 부분이 없을 것이다.

3. 개별 게시물의 형태 잡기

전체 구조에 포함되는 개별 카드의 크기를 조절해보자.

벌써부터 모양이 좀 살고 있지 않은가? ㅋㅋ 

backgroud-image와 transition은 후에 적용할 hover이벤트때 적용할 것이기 때문에 지금은 주석처리 해두었다. 

각 카드에 배치되는 요소들은 한 열에 하나씩 배치되도록 flex-direction을 column으로 해주었다.
이외의 margin은 크기조절, width는 한 열에 배치될 게시물 수를 고려해서 입맛에 맞게 조절하자.

위의 html구조를 자세히 보면 각각의 카드에 들어가는 flex구조는 카테고리, 썸네일 이미지, 제목 및 내용, 메타 데이터 이렇게 있다. 각각 하나씩 세부 조정을 해주자. 

3-1. 카테고리 

폰트는 Day2에서 다운로드 받은 폰트를 그대로 사용하였다. 아래와 같이 CSS를 입혀보자. 
단순하게 폰트, 그리고 상하좌우 마진값만 추가해주었다. 

 

3-2. 썸네일 이미지

현재는 테스트로 인하여 이미지가 없지만,,, 이 또한 썸네일 이미지가 들어갈 영역만 잡아주는 것이라고 보자. 
영역을 넘치는 이미지는 가려지도록 했다. 

 

3-3. 제목 및 내용

마찬가지로 제목 및 내용 또한 영역을 잡아 주되 내용은 티스토리 자체에서 요약이 들어가기 때문에 2줄에 끊어지지만 
제목 같은 경우는 한 줄 혹은 두줄인 경우가 있기 때문에 고정 영역을 잡아주었다. 

 

3.4. 메타 데이터 

이 영역에서는 프로필 이미지, 블로그 이름, 업로드 일자, 댓글 수가 복합적으로 들어가있다.
처음 구상했던 디자인을 보면 알겠지만 내부적으로 flex가 한 번더 들어가야 한다. 

위의 소스를 참고해서 각 데이터의 틀을 잡아보자. 
여기서 하나 주의할 점은 댓글을 나타내는 svg파일의 태그가 기본적으로 display:none으로 되어 있다. 해당 부분을 지워버리자. 

개발자 도구에서 특정 태그를 지정하면 해당 태그에 적용된 css 옵션을 확인할 수 있다. 

클래스명을 직접 ctrl+f로 찾아도 되지만 자체가 보니 2567줄에 해당 코드가 있다고 알려주고 있다. 찾아가서 지우자. 

+ '.article-type-common .reply:before'를 찾아서 content : '';를 지워야 댓글 벡터 이미지 앞에 .을 지울수 있다!

마지막으로 위의 코드를 그대로 적용하면 댓글 이미지가 박스를 벗어날것이다. 현재 나의 블로그와 카드 게시물이 차지하는 영역이 달라서 그런데 해당 부분은 댓글 영역의 margin-left값을 줄이면서 조절해보자.

최종적으로 결과를 보면 아래와 같다!

 

찐찐찐 최종으로 배경 및 썸네일이 있는 경우 내 본 블로그에는 아래와 같이 적용되어 있다. 

 

hover부분은 어렵지 않으니, transition을 이용하여 본인의 입맛대로 추가해보자.