WordPress에서 이미지 주위에 텍스트를 감싸는 4가지 방법

우아한 방식으로 이미지 주위에 텍스트를 배치해야 합니까? 코딩 및 디자인 경험이 없어도 쉽게 수행하는 방법을 알아보세요. 구텐베르크 편집기는 워드프레스에서 텍스트 주위에 텍스트를 감싸는 더 많은 옵션을 제공합니다.

보기 좋은 웹사이트와 손쉬운 콘텐츠 편집 루틴을 동시에 달성할 수 있습니다. WordPress 웹사이트용 Gutenberg 편집기를 선택하면 장기적 관점에서 최고의 도구를 얻을 수 있습니다. 이미지 주위에 텍스트를 다르게 배치할 수 있는 더 많은 옵션이 있습니다. Gutenberg는 웹 사이트의 보다 명확한 소스 코드, 속도, 보안 및 유용성과 같은 많은 이점을 제공합니다.

WordPress에서 이미지 주위에 텍스트를 감싸는 방법은 무엇입니까?

Gutenberg 편집기 및 블록은 웹 사이트 콘텐츠를 더 가볍고 현대적이며 쉽게 읽을 수 있도록 합니다. WordPress 페이지, 게시물 및 사용자 정의 게시물 유형에서 이미지 주위에 텍스트를 래핑하는 방법을 더 많이 보여줍니다. 다양한 블록이 있으며 랩에 대한 추가 옵션을 제공하는 부품 및 기능 세트로 조합하여 사용할 수도 있습니다.

서브 페이지와 콘텐츠 유형에 따라 이미지 주위에 줄 바꿈된 텍스트에 대한 블록을 선택할 수 있습니다. 프레젠테이션 페이지와 블로그 게시물에 대해 하나의 스타일을 선택할 수 있습니다. 또한 이미지를 나타내는 콘텐츠의 종류를 고려하십시오. 설명 이미지인가 아니면 더 대표적이고 판매하는 매체인가?

이미지 주위에 텍스트 둘러싸기 – 블록 선택

이미지 주위에 텍스트 블록을 둘러싸는 데 사용할 수 있는 4개의 블록이 있습니다. 우리는 그들 모두를 설명합니다:

• 이미지 블록 및 단락 블록은 아래에서 자세히 알아보십시오.
• 미디어 및 텍스트 블록 아래에서 자세히 알아보기
• 열 블록 개별 포스트에서
• 클러스터 블록 개별 게시물에서(기능은 Citadela Pro 플러그인)

더 나은 독서 경험을 위해 텍스트와 이미지를 줄 바꿈

이 블록을 사용해야 하는 몇 가지 이유가 있습니다. 블로그 게시물을 작성하는 경우 가장 감사하게 생각합니다. 이미지는 이야기의 필수적인 부분입니다. IT 뉴스에 대한 여행 블로그 또는 잡지를 작성하는 것은 중요하지 않습니다. 따라서 콘텐츠에 사진을 추가할 때 이미지 정렬에 대해 생각하세요. 독자들은 당신이 쓰고 있는 내용을 더 잘 이해할 수 있을 것입니다.

대부분의 경우 이미지와 텍스트를 나란히 삽입해야 합니다. 무엇이 중요합니까?

• 이해가 되어야 합니다. 이미지는 올바른 텍스트 옆에 있어야 합니다.
• 잘 맞춰야 합니다.
• 전체 웹사이트 레이아웃에 맞아야 합니다.

이미지 및 단락 블록

에 있는 동안 클래식 편집기 이미지 옆에 텍스트를 배치할 수도 있습니다. 멋진 정렬에 대해서는 말할 수 없습니다. 특히 이미지가 작고 그 옆에 더 많은 텍스트를 넣는 경우. 텍스트가 이미지를 덮어서 보기 좋지 않았습니다.

구텐베르크 편집자 이미지 블록은 이미지 크기 조정이라는 훌륭한 기능을 제공합니다. 이미지 주변의 점을 드래그하여 크기와 텍스트 정렬을 자동으로 변경합니다.

미디어 및 텍스트 블록 – WordPress는 이미지 옆에 텍스트를 정렬합니다.

• 미디어 및 텍스트 블록으로 텍스트 및 이미지 감싸기
• 편집기에서 미디어 및 텍스트 블록을 추가하는 방법
• 이 블록의 작동 방식
• 미디어 및 텍스트 블록 설정
• "은(는) 무슨 뜻인가요?모바일 스택” 평균
• 보너스: WordPress에서 텍스트를 정당화하는 방법

이미지 옆에 텍스트를 정렬하는 방법은 무엇입니까?

미디어 및 텍스트 블록은 환상적인 기능입니다. 미디어 및 텍스트 블록은 이 문제를 해결하고 구성 및 레이아웃을 방해하지 않고 텍스트를 이미지에 완벽하게 정렬합니다. 이것이 바로 이 블록을 사용해야 하는 이유입니다.

모바일 장치에서도 웹사이트 디자인을 개선합니다. 이 래핑 블록은 WordPress 테마가 다양한 모바일 레이아웃을 커버하도록 도와줍니다. 스마트폰에서 웹사이트의 모든 부분이 명확하게 보이고 읽을 수 있어야 합니다. Media & Text block은 휴대폰과 테이블에서 어떻게 보일까요? 아래에서 살펴볼 "Stack on mobile" 기능을 처리합니다.

짧은 시간 안에 Citadela라는 새로운 WordPress 테마에서 미디어 및 텍스트 블록을 사용할 수 있습니다. 별도의 문서에서 Citadela 테마에 대해 자세히 알아보세요.

블록 편집기에서 미디어 및 텍스트 블록을 추가하는 방법은 무엇입니까?

미디어 및 텍스트 블록을 추가하는 것은 다른 블록을 추가하는 것만큼 쉽습니다. 아무것도 다운로드하거나 설치할 필요가 없다는 것을 의미하는 핵심 블록입니다.

상단 패널 또는 편집기의 아무 곳에서나 "+" 아이콘을 사용하고 Media & Text 블록을 선택합니다.

마지막 옵션은 "/"를 입력하고 나중에 "미디어"를 쓰는 것입니다. WordPress는 검색한 내용과 일치하는 선택된 블록을 자동으로 표시합니다.

미디어 및 텍스트 블록은 어떻게 작동합니까?

미디어 및 텍스트 블록은 기본적으로 두 가지 유형의 콘텐츠를 하나로 그룹화합니다. 첫 번째는 다음을 통해 추가할 수 있는 이미지 또는 비디오와 같은 매체입니다.

• 업로드
• 미디어 라이브러리
• 드래그 앤 드롭

두 번째는 텍스트 콘텐츠를 위한 공간입니다. 텍스트 단락, 글머리기호 목록 또는 제목을 작성할 수 있습니다. 당신은 또한 거기에 추가할 수 있습니다 버튼 블록 우리가 이전에 이야기했던 것입니다.

미디어 및 텍스트 블록은 얼마나 많은 텍스트를 작성하든 관계없이 항상 이미지와 텍스트를 나란히 정렬합니다. 어떻게 작동합니까? 이미지는 텍스트 열의 콘텐츠 높이에 따라 자동으로 조정됩니다.

미디어 및 텍스트 블록 설정

일반 블록 설정

1. 상단 툴바

블록 위의 도구 모음은 여러 옵션을 제공합니다. 활성 테마가 지원하는 경우 미디어 및 텍스트 블록을 너비 또는 전체 너비로 설정할 수 있습니다. 다음을 클릭하여 이미지나 비디오를 배치할 위치를 선택할 수도 있습니다.

• 왼쪽에 미디어 표시
• 오른쪽에 미디어 표시

상단 도구 모음에는 대체 텍스트, 제목, 캡션 또는 설명을 설정할 수 있는 매체 편집 아이콘도 있습니다. 기사에서 이미지 편집에 대해 자세히 알아보십시오. WordPress 이미지 블록 작업.

2. 오른쪽 사이드바

오른쪽 사이드바는 미디어 및 텍스트 블록에 대한 추가 설정을 제공합니다. 여기에 대체 텍스트를 추가하거나 배경색을 설정하거나 추가 CSS 클래스를 추가할 수 있습니다. "Stack on mobile" 기능을 활성화할 수도 있습니다.

모바일 스택이란 무엇입니까?

이 기능 덕분에 이미지와 텍스트가 모바일 장치에 잘 표시됩니다. "Stack on mobile"을 비활성화하면 이미지와 텍스트가 나란히 표시되며 반응형 버전에서는 거의 읽을 수 없습니다.

이 기능을 활성화하면 휴대폰에서 왼쪽 콘텐츠가 오른쪽 콘텐츠 위에 표시됩니다.

텍스트 정렬

Media & Text 블록의 일부는 이미지 또는 비디오와 함께 텍스트 콘텐츠입니다. 다음 콘텐츠 유형 중 하나일 수 있습니다.

1. 단락

상단 도구 모음에서 텍스트 정렬을 설정하고 텍스트를 굵게, 기울임꼴로 만들거나 URL 링크를 추가할 수 있습니다.

오른쪽 사이드바에서 글꼴 크기, 글꼴 색상 또는 단락 색상을 선택할 수 있습니다. 흥미로운 기능은 텍스트의 첫 번째 문자를 강조 표시하는 "드롭 캡"입니다. 텍스트를 더 흥미롭게 만드는 블록 게시물의 좋은 기능입니다.

2. 제목

제목은 단락과 매우 유사합니다. 모양을 구성하고 굵게 또는 기울임꼴로 만들고 URL 링크를 삽입할 수도 있습니다. 차이점은 표제 유형(H2, H3, H4)을 선택할 수 있다는 것입니다.

다른 제목 크기 및 정렬 설정은 오른쪽 사이드바에서 사용할 수 있습니다.

3. 목록

콘텐츠에 목록 블록을 추가하면 글머리 기호, 번호 매기기 목록 또는 다단계 목록이 될 수 있습니다. 텍스트를 굵게, 기울임꼴로 만들고 URL 링크를 추가할 수도 있습니다.

4. 버튼 블록

콘텐츠에 버튼을 추가하는 이 블록은 웹사이트 디자인에 맞게 조정할 수 있습니다. 버튼 색상 및 스타일 또는 배경 색상은 오른쪽 사이드바에서 구성할 수 있습니다.

에 대한 기사를 읽는 것을 잊지 마십시오. 버튼 블록. 

블록 유형 간 전환

미디어 및 텍스트 블록에서 하나의 콘텐츠 블록 유형을 다른 유형으로 변환할 수 있습니다. 미디어 및 텍스트 블록을 이미지 블록으로 변경할 수도 있으며 텍스트 부분이 삭제됩니다.

텍스트 콘텐츠에서 단락 블록을 제목 또는 목록 블록으로 변경할 수 있습니다.

보너스: WordPress에서 텍스트를 정당화하는 방법

정렬된 텍스트를 사용하면 긍정적인 면과 부정적인 면이 있습니다. 정렬된 텍스트는 일반적으로 책이나 신문에서 찾을 수 있지만 웹사이트에서는 더 이상 사용되지 않습니다. 왜?

몇 년 전 WordPress Classic 편집기에 바로 Justify 기능이 통합되었습니다. 다양한 브라우저 또는 모바일 장치에서 가시성 문제를 일으키는 데 사용되는 정당화된 텍스트입니다. 또한 정당화된 텍스트의 어려운 가독성과도 관련이 있습니다. 따라서 이 기능은 더 이상 사용되지 않고 제거되었습니다.

이 특정 기능은 새 블록(구텐베르크) 편집기에는 존재하지 않습니다.

정말로 원한다면 텍스트를 어떻게 정당화합니까?

해결책은 몇 단계로 간단한 CSS 코드를 추가하는 것입니다.

1. 오른쪽 사이드바에 단락 블록의 추가 CSS 클래스에 대한 설정이 있습니다.
2. 거기에 클래스 이름을 쓰십시오 „신이 옳다고 하다“
3. 페이지 또는 기사 게시
4. 미리 보려면 메인 상단 표시줄에서 사용자 정의를 클릭하십시오.
5. 왼쪽에는 설정이 있는 새로운 사이드바가 있습니다.
6. 추가 CSS를 클릭합니다.
7. 다음 CCS 코드를 삽입하십시오.

p.justify { 텍스트 정렬: 정렬; }

완료. 지금부터 미디어 및 텍스트 블록의 텍스트가 정당화됩니다.

WordPress는 Gutenberg 편집기 덕분에 타사 페이지 빌더 없이도 더 유용해졌습니다. 장기적인 관점에서 그리고 웹사이트를 만들거나 재설계할 때 귀하의 웹사이트에 탁월한 가치가 있습니다. 구텐베르크 블록은 다양한 스타일을 제공하지만 손을 찾을 수 있습니다. 이미지 주위에 텍스트를 배치하는 WordPress 코드.

Media & Text block에 대해 어떻게 예상하십니까? 이미 사용하셨습니까? 그것으로 작업하는 것이 어떻습니까? 아래 의견에 알려주십시오.