CCZ-CROSS 본문 하단 카테고리 다른글 썸네일 없는 경우 레이아웃 깨짐

안녕하세요. 개발자 드리머즈입니다.

CCZ-CROSS 하단 카테고리 글 더보기에 썸네일(사진) 나오게 하는 방법

이전 글(위 링크)에서 CCZ-CROSS 스킨을 수정해서 본문의 하단부에 카테고리의 다른 글을 사진을 포함하여 보여주는 코드를  작성했습니다.

그런데 오늘 블로그 확인 중에.. 아래 사진과 같이 사진이 없는 포스트를 보여주는 경우 레이아웃에 문제가 생기는 것을 확인했습니다.

문제현상과 파악

구글 크롬 개발자도구에서.. 열심히 코드를 살펴보니 아래의 부분이 이상했습니다.

자식인 flexbox의 높이가 45임에도.. 그 부모인 list-body의 높이는 0으로 보이는 것이 이상했습니다.

자식보다 더 작은 부모가 존재할 수 있는 것에 대해 사실 좀 당황했습니다. 

삽질을 열심히 하다가.. 신기한 부분을 발견했습니다.

카테고리의 다른글 영역에 보이는 포스팅 제목과 사진을 보여주는 부분에 해당하는 코드에는 위 사진처럼 썸네일을 보여주는 <a>~</a> 영역이 있습니다. 썸네일이 없는 포스팅 미리보기 영역?에는 위 사진처럼.. <a>내부에 <img>가 없고 텅 비어있습니다.

크롬 개발자도구에선 테스트가 용이하게 여러가지 환경들을 지원합니다. 특정 element에서 마우스 오른쪽을 누르면 위의 메뉴가 뜨는데 Delete element를 누르면 해당 element를 삭제할 수 있습니다. 서버의 코드가 변경되는 것이 아니니 안심하고 테스트 해도 됩니다.

썸네일이 없는 포스팅 미리보기에 있는 내부에 <img>가 없던 <a> element 2개를 지워봤습니다.

그러니까 위 사진처럼 레이아웃이 제대로 보입니다.

<s_article_related_rep_thumbnail> 엘러먼트 내부에 썸네일 링크를 위한 <a>를 위치시키는 경우 Thumbnail이 없으면 서버에서 html 코드 생성시 <a>를 제거시켜 버립니다. 그런데 <s_article_related_rep_thumbnail> 엘러먼트 내부에 <a>를 위치시키면 가 공백으로 나오는 치명적인 현상이 발생합니다. 그래서 <s_article_related_rep_thumbnail>외부에 썸네일 링크를 위한 <a>를 배치시켰었는데 부작용?으로.. 썸네일이 없을 때 레이아웃이 깨지는 현상이 생겼네요.

해결방법

제가 HTML/CSS 쪽을 잘 몰라서 가장 좋은 해결책인지는 모르겠지만, 일단 CSS쪽에 아래의 코드를 수정해서 레이아웃이 깨지는 것을 막았습니다.

치환자는 썸네일이 있는 경우 thumb_type의 값으로, 썸네일이 없는 경우 text_type으로 치환됩니다.

div.text_type {height:105px}

실행화면

참고하시길 바랍니다~