[워드프레스] 모바일에서 이미지 블록 100% 가로폭(가득차게, 좌/우 여백없이) 변경 방법 | 특성 이미지, 추가 CSS, 스펙트라

모바일에서 이미지 좌/우 마진을 없앤다는 컨셉
추가 CSS에 코드 추가

본 포스팅의 첫 이미지를 보면, 왼쪽은 이미지 좌/우 여백이 들어간 상태이고, 오른쪽은 가득 찬 상태 입니다.
느낌이 어떠신가요?

포스팅을 SNS에 공유 시, 관심을 끌기 위한 썸네일 만큼이나 중요한 것은, 글의 첫 이미지가 아닐까 생각해 봅니다.

이미지가 표시 될 때, 좌/우 여백(Margin)이 있는 경우와 가로 폭이 꽉 찬 경우를 비교해 생각해 봅니다.

필자의 경우, 이미지의 좌/우 여백이 없고 가득 찬 경우가 더 임팩트가 있고, 이후 이야기 할 내용의 집중도를 높이는 데 도움이 되지 않을까 생각해 봅니다.

워드프레스의 기본은 좌/우 여백이 있는 이미지 입니다. 해서, 글을 작성 할 때, 이미지 100% 가로 폭을 설정 하는 방법과 자세한 CSS코드를 작성 법을 알아 보도록 하겠습니다.

본 사이트는 Neve 테마를 사용하고 있습니다. 앞으로 설명 할 내용이, 사용하고 있는 테마에 의존적 일 수 있습니다. 하지만, 세세한 수치는 다르더라도, 그 기본이 되는 그 방법 공유하겠습니다.

어떻게 가로폭이 가득찰 이미지를 선택할 것인가? 아이디어?

글 쓴이의 의도에 따라, 어떤 이미지는 가로폭이 가득차야 될것이고, 어떤 이미지는 가득 차서는 안 될 것입니다.

어떻게 설정 할 지에 대한 제 생각은, 글 작성 할 때 이미지 왼쪽 정렬을 하면, 모바일에서 가로가 가득 찬, 이미지로 표시되게 하는 것입니다.

모바일에만 적용

PC에서는 굳이 이미지 가로가 가득 차야 할, 이유는 없는 듯 싶습니다. 모바일만 적용합니다.

이미지 블럭 정렬은 왼쪽

왼쪽 정렬은 기본이 되는 정렬이기 때문에, 이미지 가로폭 100% 설정옵션으로 활용 가능합니다.

중앙 정렬은 작은 이미지에서, 오른쪽 정렬은 페이지 스타일이나 아라빅 언어에서 의미가 있어 해당기능을 넣기에 부적합 합니다.

원본 이미지의 가로폭은 1200 픽셀 이상

설명할 방법은, 모바일에서 강제로 이미지 가로폭을 100%로 만든다기 보다는 좌/우 마진을 없애는 방법입니다.

해서, 원본 이미지의 가로폭은 모바일 디바이스의 가로 해상도 보다 크거나 같아야 합니다.

그 보다 작다면 가로폭이 100%가 되더라고, 픽셀이 깨져 선명해 보이지 않을 것입니다. 만약, 이미지의 가로폭이 모바일 가로 해상도 보다 크다면, 반응형 테마에서 디바이스에 맞게 조정 할 것입니다.

1200 픽셀은 절대적인 수치는 아닙니다. 디바이스와 브라우저 앱에 따라, 테스트가 필요하긴 하겠습니다.

하지만, 필자의 경우 태블릿을 제외한, 스마트폰에서 800 * 420 픽셀 이미지로도 무리는 없었습니다.

공유 썸네일 크기 이상이면 좋을 듯 싶습니다. 글의 첫번째 이미지는 썸네일이 될 가능성이 높기 때문입니다.

소셜 미디어 이미지 사이즈 참고 바랍니다.

이미지 가로폭 100%, 어떻게 가능하게 할 것인가?

기본은 테마 추가CCS에 코드를 추가 하는 것입니다.

모바일 디바이스 에서 만 적용

엄밀하게 말하면, 브라우저 창 가로폭이 1081 이하, 일때를 말합니다. 삼성 갤럭시 스마트폰 기준, 가로폭이 1080 필셀 입니다. 해서, 1081픽셀로 합니다.

@media all and (max-width: 1081px) {
    /* ... */
}

기본 이미지 블럭

기본 이미지 블럭으로 생성된 HTML 코드는 아래와 같습니다.

오버라이딩을 위해, div.wp-block-image figure.alignleft로 접근하면 좋을 듯 싶습니다. 오른쪽 정렬은 div.wp-block-image figure.alignright로 생성 됩니다.

<div class="wp-block-image">
	<figure class="alignleft size-full">
		<img src="https://www.mysite.com/wp-content/uploads/2022/11/myimage.jpg" alt=""/>
	</figure>
</div>

필자는 Neve 테마를 사용합니다. 사용하는 테마에 따라 margin-left와 margin-right는 조정 가능합니다.

@media all and (max-width: 1081px) {
	/* for general image block */
	div.wp-block-image figure.alignleft {
			margin-left: -15px;
			margin-right: -15px;
	}
}

Spectra 이미지 블럭

Spectra 플러그인은 유용한 블록들이 많아 제가 애용하고 있습니다.
그 중에 이미지 블록은 쉐도우 효과를 줄 수 있어 자주 사용합니다.

Spectra 이미지 블록은 아래와 같은 HTML을 생성합니다.

오버라이딩을 위해, div.wp-block-uagb-image–align-left 로 접근하면 좋을 듯 싶습니다. 참고로, 오른쪽 정렬은 div.wp-block-uagb-image–align-right로 생성 됩니다.

<div class="wp-block-uagb-image uagb-block-ae07b21a wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-left">
	<figure class="wp-block-uagb-image__figure">
		<img srcset="https://www.mysite.com/wp-content/uploads/2022/11/myimage.jpg " src="https://www.mysite.com/wp-content/uploads/2022/11/myimage.jpg" alt="this is my image" class="uag-image-1108" width="" height="" title=""/>
		<figcaption class="uagb-image-caption">this cpation for my image</figcaption>
	</figure>
</div>

필자는 Neve 테마를 사용합니다. 사용하는 테마에 따라 margin-left와 margin-right는 조정 가능합니다.

@media all and (max-width: 1081px) {
	/* for spectra image block */
	div.wp-block-uagb-image--align-left   {
		margin-left: -15px;
		margin-right: -15px;
	}
}

기본과 Spectra 이미지 블록 모두 적용

글 작성 시 이미지 왼쪽 정렬을 했을 때, 기본과 Spectra 이미지 블록 모두에 가로폭 100% 기능을 할당하는 CSS코드는 아래와 같습니다.

좌/우 -15픽셀 마진은 Neve 테마 기준이니다. 사용하는 테마에 맞게 수정해야 합니다.

@media all and (max-width: 1081px) {
	/* for general image block */
	div.wp-block-image figure.alignleft {
			margin-left: -15px;
			margin-right: -15px;
	}
	/* for spectra image block */
	div.wp-block-uagb-image--align-left   {
		margin-left: -15px;
		margin-right: -15px;
	}
}

적용 이후, PC에서 모바일 미리보기를 하면 가끔 적용이 안된 것 처럼 보일 수 있습니다. 브라우저 캐시가 있어서 이거나 실제 모바일 환경과 달라 발생하는 문제 인 듯 싶은데요.

적용 후, 꼭! 스마트폰에서 텔레그램, 왓츠앱, 카카오톡 같은 메신저에 링크를 공유해 확인 하는 것을 추천합니다.

왜냐하면, 해당 메신저에서 열리는 브라우저는 캐싱기능이 없는 자체 브라우저를 사용 하는 듯 싶기 때문입니다.

[잉여타임즈] surplstimes@gmailc.om