1. 서론

이미 다른 글에서 워드프레스 테마 커스터마이징을 해서 썸네일 이미지를 줄였다. 왜냐하면 워드프레스닷컴 기본 세팅으로는 썸네일 이미지가 너무 크게 출력되어 본문의 가독성을 심각하게 해치고 있었기 때문이었다.

이 부분을 조금 더 다듬으려고 한다. 왜냐하면 모바일에서도 보기 좋게 출력하기 위해서다.

height:300px 로는 PC에서는 적당하게 보이지만, 모바일에서 이 수치는 과하다.

그래서 화면 비율에 맞게 줄여주려는 것이다.

*

2. 기존 소스코드(수정 전)

(생략)

.zoahaza_custom_C1 {
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	position: relative;
	height: 300px;
	overflow: hidden;
}

.zoahaza_custom_C1 img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

(생략)

@media (max-width: 599px) {
	main .wp-block-embed-flickr img {
		max-width: 85vw;
		height: fit-content;
	}
}

*

3. 수정 방향

가장 좋은 방법은 height: 값을 px이 아닌 vh 값으로 조정한 후, 미디어쿼리에서 orientation:portrait 를 걸어서 모바일 세로화면에서 vh값을 더 작게 조정하는 것이다.

모바일 화면은 대개 16:9 이므로, 2:1 정도의 비율이다. 따라서, orientation:portrait일 때에는 vh값을 50%로 짤라주면 된다.

하지만 문제가 있다. 워드프레스닷컴의 CSS에서는 orientation:portrait 미디어쿼리를 지원하지 않는다.

여기에 대한 해결책은 어느정도는 예상할 수 있다.

왜냐하면 브라우저 가로길이가 일정 px 이하의 화면 크기는 거의 무조건 orientation:portrait (모바일 세로화면) 라고 예상할 수 있기 때문이다.

그렇다면 기존의 미디어쿼리 값인 @media (max-width: 599px) 를 재활용해서 넣을 수 있다.

*

4. 변경한 소스코드(수정 후)

(생략)

.zoahaza_custom_C1 {
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
	position: relative;
	height: 20vh;
	overflow: hidden;
}

.zoahaza_custom_C1 img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

(생략)

@media (max-width: 599px) {
	main .wp-block-embed-flickr img {
		max-width: 85vw;
		height: fit-content;
	}
	.zoahaza_custom_C1{
		height:10vh;
	}
}

*

– 블로그 썸네일은 flaticon에서 제공받았습니다. –

2022년 12월 10일 작성.