워드프레스 구텐베르크 테이블(표)에 이미지 추가하는 방법

워드프레스의 기본 편집기인 구텐베르크(블록 에디터)에는 테이블 블록이 있어 심플한 표를 쉽게 사이트에 추가할 수 있습니다. 테이블 블록을 사용하여 표를 삽입할 때 이미지를 추가할 수 있는 옵션이 제공되지 않지만, HTML로 이미지를 삽입할 수 있습니다.

워드프레스에서 복잡한 표를 표시하고 싶은 경우 다음 글을 참고해보세요.

워드프레스: 복잡한 표 삽입하기 - 워드프레스 정보꾸러미

워드프레스 구텐베르크 테이블(표)에 이미지 추가하는 방법

워드프레스 테이블 블록을 사용하여 표를 삽입할 때, 이미지를 추가하고 싶은 경우 HTML로 삽입할 수 있습니다. 대략적인 방법을 다음 영상을 통해 확인할 수 있습니다.

워드프레스 테이블에 이미지를 추가하려면 HTML로 편집을 클릭하여 HTML 편집 화면으로 전환합니다.

테이블이 HTML 코드로 표시되어 HTML로 편집할 수 있는 상태가 됩니다.

적절한 곳에 이미지를 표시하는 HTML 코드를 추가하면 됩니다.

기본적으로 이미지를 삽입하는 HTML 코드는 다음과 같습니다(W3Schools의 HTML Images 참조).

<img src="pic_trulli.jpg" alt="이미지 ALT 텍스트">

이미지 URL은 워드프레스 알림판 > 미디어 > 라이브러리에서 해당 이미지를 클릭하여 복사할 수 있습니다.

다음과 같이 상대 경로로 이미지 URL을 지정해도 됩니다.

<img width="300" src="../wp-content/uploads/2015/03/fruits.jpg" alt="이미지 설명">

이미지 폭(width)을 지정하지 않으면 이미지가 전체 크기로 표시되어 표에 어색하게 추가될 수 있습니다. CSS 클래스를 지정하고 CSS로 이미지 크기를 설정하는 것도 고려할 수 있습니다.

이미지를 삽입하는 HTML 코드를 추가했다면 비주얼로 편집을 클릭하여 비주얼 모드로 전환합니다.

이미지가 추가된 것을 확인할 수 있습니다.

모바일 기기에서 이미지 크기 등의 스타일을 조정하고 싶은 경우 CSS 미디어쿼리를 사용할 수 있습니다. CSS 미디어 쿼리에 대한 자세한 정보는 W3Schools의 "Responsive Web Design - Media Queries" 문서를 참고해보세요.

마치며

이상으로 워드프레스 블록 에디터의 테이블 블록으로 표를 삽입할 때 이미지를 추가하는 방법에 대하여 간략히 살펴보았습니다. 

워드프레스에서는 TablePress와 같은 표 생성 플러그인이 있지만, 간단한 표를 만들 때에는 블록 에디터에서 제공하는 테이블 기능으로 충분한 것 같습니다. 정교한 표를 추가해야 하는 경우에는 온라인 테이블 제너레이터를 사용하여 표를 만들어서 HTML 코드로 표를 추가할 수 있습니다.

참고

https://avada.tistory.com/2324

뉴스페이퍼 테마 라이센스 이해하기 (Themeforest 워드프레스 테마)

https://avada.tistory.com/2692

국내 웹호스팅 나우호스팅 워드프레스 설치하기

https://avada.tistory.com/2693

엘리멘터 이미지 캐러셀 - 개별 이미지에 다른 링크 설정하기(플러그인 미사용)