1395

template-parts/content.php 파일을 열어서 수정해야 합니다.

위 코드를 적용해 보시겠어요? 이제 get_template_part가 글자들을 불러오기 전에, 우리가 먼저 이미지를 화면에 박아버렸기 때문에 무조건 나올 겁니다!

가로 폭이 엉망이 되는 이유는 flex 구조에서 텍스트 영역(ht-post-content)이 이미지 크기에 밀려나거나, 남은 너비를 제대로 계산하지 못해서 그렇습니다. 특히 ht-post-row라는 새로운 감싸는 태그를 만드셨기 때문에 이에 맞는 정교한 CSS가 필요합니다.

가장 깔끔하게 정리된 PHP와 CSS 세트를 다시 드릴게요. 이대로만 바꾸시면 폭이 딱 맞게 정렬됩니다.

---

1. template-parts/content.php (PHP 수정)

텍스트 영역을 하나로 묶어주는 구조가 매우 좋습니다. 이 구조를 유지하며 클래스만 깔끔하게 정리했습니다.

PHP

<?php global $authordata; ?>
<div class="ht-content-item <?php post_class(); ?>">
<div class="ht-content-body post-<?php the_ID(); ?>">
<div class="ht-post-row">
<?php if ( has_post_thumbnail() ) : ?>
<div class="ht-post-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('medium_large', ['class' => 'list-featured-image']); ?>
</a>
</div>
<?php endif; ?>

<div class="ht-post-content">
<h3 class="ht-post-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>

<div class="ht-post-date">
<abbr class="published">
<?php the_time('Y-m-d'); ?> – <?php the_time(); ?>
</abbr>
</div>

<div class="ht-post-body">
<?php the_excerpt(); ?>
</div>

<?php if ( $post->post_type == 'post' ) : ?>
<div class="ht-post-meta">
<span class="author vcard">By <?php the_author_posts_link(); ?></span>
</div>
<?php endif; ?>
</div>
</div>
</div>
<div class="ht-content-footer"></div>
</div>


---

2. 추가 CSS (폭 수정 버전)

기존 CSS를 다 지우고 이 코드로 교체하세요. **min-width: 0**과 flex-basis 설정이 가로 폭 엉망이 되는 걸 막아줍니다.

CSS

/* 컨테이너 및 열 설정 */
.ht-post-row {
display: flex;
flex-wrap: nowrap; /* PC에서는 줄바꿈 금지 */
gap: 25px;
align-items: flex-start;
width: 100%;
}

/* 이미지 영역: 고정 폭 설정 */
.ht-post-thumbnail {
flex: 0 0 280px; /* 이미지 너비를 280px로 고정 */
max-width: 280px;
}

.ht-post-thumbnail img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}

/* 텍스트 영역: 남은 공간 모두 차지 */
.ht-post-content {
flex: 1;
min-width: 0; /* 중요: 텍스트가 박스를 뚫고 나가는 현상 방지 */
}

.ht-post-title {
margin-top: 0 !important;
margin-bottom: 10px !important;
font-size: 1.4rem;
line-height: 1.3;
}

/* 모바일 반응형: 768px 이하 */
@media (max-width: 768px) {
.ht-post-row {
flex-direction: column; /* 세로로 쌓기 */
}

.ht-post-thumbnail {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}

.ht-post-content {
width: 100%;
}
}


---

🧐 왜 엉망이 되었을까요? (해결 포인트)

1. min-width: 0;: Flex 자식 요소들은 기본적으로 최소 크기를 가지려 합니다. 제목이 너무 길면 이미지를 밀어내며 가로 폭을 깨뜨리는데, 이 코드가 그걸 방지합니다.
2. flex: 0 0 280px;: 이미지가 제멋대로 커지지 않게 확실한 자리를 잡아줍니다. (숫자를 200~300 사이로 조절해 보세요.)
3. flex-wrap: nowrap;: PC에서 강제로 이미지를 왼쪽, 글을 오른쪽에 둡니다.