본문으로 바로가기
  1. Home
  2. 워드프레스/사용 팁
  3. 워드프레스 구텐베르크 테이블(표)에 이미지 추가하는 방법

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

· 댓글 2

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

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

 

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

워드프레스 사이트에서 복잡한 표를 추가하고 싶은 경우가 있습니다. 간단한 표는 블록 에디터(구텐베르크)에서 제공하는 테이블 블록을 사용하면 편리합니다. 복잡한 테이블을 추가하고 싶은

www.thewordcracker.com

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

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

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

워드프레스 구텐베르크 테이블(표)에 이미지 추가하는 방법 - HTML 편집 화면으로 전환

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

워드프레스 테이블 블럭 표 HTML 모드

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

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

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

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

워드프레스 이미지 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 워드프레스 테마)

워드프레스에는 다양한 무료 및 유료 테마가 있습니다. Themeforest 마켓에서 판매되는 테마들이 특히 인기를 끌고 있습니다. 아바다, 엔폴드, BeTheme, 뉴스페이퍼 등 많은 유료 워드프레스 테마가

avada.tistory.com

https://avada.tistory.com/2692

 

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

나우호스팅은 국내 웹호스팅 서비스 중에서 가성비가 괜찮은 호스팅 중 하나입니다. 특히 많은 웹 공간을 제공하므로 이미지를 많이 업로드해야 하는 경우 유용합니다. 가성비 좋은 호스팅을

avada.tistory.com

https://avada.tistory.com/2693

 

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

워드프레스 엘리멘터 이미지 캐러셀(Image Carousel)을 사용하면 고객사 리스트 슬라이드 등을 만들 수 있습니다. 하지만 Elementor의 이미지 캐러셀에 추가한 이미지들에 링크를 설정할 경우 해당 캐

avada.tistory.com

 

💬 댓글 2
logo

HTML로 이미지를 삽입해야 하는군요^^
행복한 한 주 되시기 바랍니다

logo

제 워드프레스 사이트에서는 표를 잘 사용하지 않는지라... 표를 사용할 일이 생기면 유용하겠네요.

이름을 저장합니다.

워드프레스 유지관리 서비스

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅
최근 댓글

비교 플러그인이 있군요^^

💬空空(공공)

좋은 포스팅 잘 보고갑니다!⋯

💬차트의신

워드프레스 OceanWP 테마에⋯

💬空空(공공)

티스토리도 표시 되어 있는⋯

💬空空(공공)

저도...ㅎㅎ 트래픽 폭탄 맞⋯

💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
워드프레스 네이버 카페
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드