워드프레스 특성 이미지 수직 정렬 CSS transform, flex ( WordPress Featured Image Vertical Align)

워드프레스 특성 이미지 수직 정렬 CSS transform, flex ( WordPress Featured Image Vertical Align)

포스팅 페이지와 목록에서 완벽한 수직 정렬을 위한 CSS 작성법

WordPress의 Featured Image를 다루다보면 포스팅 페이지와 목록에서의 디자인 일관성을 유지하는 것이 중요합니다. 특히 이미지의 수직 정렬은 사용자 경험에 큰 영향을 미칩니다. 이에 따라 포스팅 페이지와 목록에서의 Featured Image에 대한 CSS 작성법에 대해 알아보겠습니다.

CSS

1. 포스팅 페이지의 Featured Image 처리

   body:not(.home) .cm-posts > article > .cm-featured-image {
       /* 여기에 포스팅 페이지 Featured Image에 대한 CSS 스타일 작성 */
   }

   • 포스팅 페이지 상세 화면에서는 상단의 Featured Image에는 영향을 끼치지 않아야 합니다. 이를 위해 특정 선택자를 사용하여 CSS를 작성합니다.
2. 목록 페이지 Featured Image 썸네일 조건 처리

   body.home .cm-posts > article > .cm-featured-image {
       max-height: 200px; /* 지정한 높이값, 필요에 따라 조절 가능 */
       display: flex;
       align-items: center;
       justify-content: center;
   }

   • 목록 페이지에서는 Featured Image 썸네일이 높이 값이 일정 높이 이하일 때 가운데 정렬되어야 합니다. 이를 위한 CSS를 작성합니다.
3. 목록 페이지 Featured Image 썸네일 높이가 지정 높이를 초과할 경우

   body.home .cm-posts > article > .cm-featured-image {
       max-height: 200px; /* 지정한 높이값, 필요에 따라 조절 가능 */
       position: relative;
   }
   
   body.home .cm-posts > article > .cm-featured-image img {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
   }

   • Featured Image 썸네일의 높이가 지정한 높이보다 높을 때는 수직 정렬이 가운데로 되면서 정 중앙에 위치해야 합니다. 이를 위한 CSS를 작성합니다.

이렇게 작성된 CSS 코드를 WordPress의 추가 CSS 옵션 또는 플러그인을 통해 웹사이트에 적용하면 Featured Image의 수직 정렬에 관한 문제를 해결할 수 있습니다.

또 다른 방법은 다음과 같이 작성할 수도 있습니다.

1. 목록 페이지 특성 이미지 컨테이너 스타일

body.home .cm-posts > article > .cm-featured-image {
    height: 300px; /* 이미지 컨테이너의 높이를 300px로 지정 */
    max-height: 300px; /* 이미지 컨테이너의 최대 높이를 300px로 제한 */
    overflow: hidden; /* 넘치는 이미지를 가림 */
    position: relative; /* 상대 위치 지정 */
}

• 이미지 컨테이너의 높이와 최대 높이를 지정하여 일관된 레이아웃을 유지하고, 이미지가 넘칠 경우 가려진 부분을 숨김 처리하는 것은 좋은 접근입니다.

2. 특성 이미지 링크 스타일

body.home .cm-posts > article > .cm-featured-image > a {
    height: 100%; /* 링크의 높이를 100%로 설정 */
    background: rgba(0.5, 0.5, 0.5, 0.1); /* 배경색 지정 */
}

• 링크의 높이를 100%로 설정하여 이미지를 포함하는 영역 전체에 링크를 적용하고, 배경색을 투명한 회색 톤으로 설정한 것도 시각적으로 좋은 선택입니다.

3. 특성 이미지 스타일

body.home .cm-posts > article > .cm-featured-image img {
    height: auto; /* 이미지 높이를 자동으로 설정 */
    width: auto; /* 이미지 너비를 자동으로 설정 */
    transform: translateY(-50%); /* 수직 중앙 정렬 */
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    position: absolute; /* 절대 위치 설정 */
    left: 0; /* 왼쪽 정렬 */
    top: 50%; /* 상단에서 50% 위치 */
}

• 이미지를 수직 중앙 정렬하는 방법으로 좋은 접근입니다. 하지만 이미지의 실제 크기가 컨테이너보다 작을 때에도 제대로 작동할지 확인해야 합니다. 또한, 모바일 장치에서 이미지가 잘 보여지도록 반응형 디자인을 고려하는 것이 중요합니다.

마무리

WordPress 특성 이미지의 수직 정렬은 디자인의 일관성과 사용자 경험을 향상시키는 중요한 부분입니다. 위의 CSS 코드를 참고하여 원하는 디자인을 구현하시면 됩니다. 언제든지 필요에 따라 코드를 수정하여 최적의 결과물을 얻을 수 있습니다.

---

Keywords: WordPress, Featured Image, CSS, 수직 정렬, 포스팅 페이지, 목록 페이지, 웹디자인, 웹개발, 블로그 포스팅