이미지 주위에 텍스트를 래핑하는 코드가 필요하십니까? 일반적으로 HTML^(HTML) 페이지 를 만들 때 모든 것이 선형적으로 흐릅니다. 즉, 한 블록이 다른 블록으로 바로 이어집니다. 내 이전 게시물은 모두 이에 대한 예입니다. 즉, 텍스트, 그림, 텍스트 등입니다.

때로는 이미지 아래가 아니라 이미지 옆에 텍스트를 포함할 수 있습니다. 이것을 이미지 주위에 텍스트 래핑이라고 합니다. HTML 을 사용하여 텍스트를 래핑하는 것은 실제로 상당히 쉽습니다 . 텍스트를 래핑하기 위해 CSS 를 사용할 필요는 없습니다 .

그러나 요즘 W3C 에서는 이러한 작업에 ^(W3C)HTML 대신 CSS 를 사용할 것을 권장 합니다. 아래에서 두 가지 방법을 모두 언급하겠지만 가능하다면 반응형 웹사이트 디자인에 더 잘 적응할 수 있는 CSS 를 사용하는 것이 좋습니다.^(CSS)

HTML을 사용하여 이미지 주위에 텍스트 줄 바꿈

Lorem ipsum dolor sitmet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

이미지의 오른쪽을 따라 텍스트 줄 바꿈을 하려면 그림을 왼쪽으로 정렬해야 합니다.

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

텍스트를 왼쪽에 표시하고 이미지를 맨 오른쪽에 표시하려면 align 매개변수를 "right"로 변경하기만 하면 됩니다.

Lorem ipsum dolor sitmet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

그게 다야! 꽤^(Pretty) 쉽죠? CSS 를 사용하려는 유일한 경우는 텍스트와 이미지 사이에 약간의 공간이 있도록 그림에 여백을 추가하려는 경우입니다.

다음 CSS^(CSS) 스타일 코드 를 사용하여 그림에 여백을 추가할 수 있습니다 .

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

위의 코드는 MARGIN CSS 요소를 사용하여 이미지 오른쪽에 10픽셀의 공백을 추가합니다. 이미지를 왼쪽으로 정렬했으므로 오른쪽에 공백을 추가하고 싶습니다.

기본적으로 4개의 숫자는 TOP RIGHT BOTTOM LEFT 를 나타냅니다 . 따라서 오른쪽 정렬된 이미지에 공백을 추가하려면 다음과 같이 하십시오.

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

따라서 HTML^(HTML) 을 사용하여 이 작업을 수행하는 것은 매우 간단 하지만 다시 한 번 말하지만 반응형 사이트에서는 제대로 작동하지 않을 수 있습니다.

CSS를 사용하여 이미지 주위에 텍스트 줄 바꿈

이미지 주위에 텍스트를 감싸는 더 좋은 방법은 CSS 를 사용하는 것 입니다. 요소의 위치를 ​​보다 세밀하게 제어할 수 있으며 최신 코딩 표준에서 더 잘 작동합니다.

<img src="IMAGE URL" alt="A photo" class="left" />

HTML 예제에서 이미지 태그에 ^(HTML)CSS 를 직접 포함했지만 더 이상 그렇게 해서는 안 됩니다. 대신 모든 CSS^(CSS) 코드 를 포함하는 스타일시트라는 별도의 파일이 있어야 합니다 .

IMG 태그 에서 태그에 클래스를 할당하고 이름을 지정하기만 하면 됩니다. 내 예에서는 클래스 이름을 left 로 지정했습니다 . 내 스타일시트에서 다음 코드를 추가하기만 하면 됩니다.

.left {
 float: left;
 padding: 0 10px 0 0;}

보시다시피 왼쪽 정렬 이미지의 오른쪽에 10px의 패딩을 추가했습니다. 또한 float 속성을 사용하여 문서의 정상적인 흐름에서 이미지를 이동하고 상위 컨테이너의 왼쪽에 배치했습니다.

보시다시피 모든 코드를 IMG 태그 자체에 추가하는 것보다 훨씬 깨끗합니다. 또한 관리가 더 쉽고 더 많은 CSS 속성을 사용하여 웹 페이지의 모양을 사용자 지정할 수 있습니다. 질문이 있으시면 언제든지 댓글을 남겨주세요. 즐기다!

HTML Code to Wrap Text Around Image

Need the codе to wrap text arоund an image? Normally when you create an HΤML page, everything flows linearly, mеaning one block directly after another. All of my previous posts are an examplе of this, i.e. text, then picture, then text, еtc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.

Wrap Text Around Image using HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.

<img src="IMAGE URL" alt="A photo" class="left" />

Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.

In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:

.left {
 float: left;
 padding: 0 10px 0 0;}

As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.

As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!

Related posts

• iPhone 및 Android에서 QR 코드를 스캔하는 방법

• Android에서 문자 메시지를 인쇄하는 방법

• Windows에서 실행 중인 프로세스 목록을 텍스트 파일에 저장

• GitHub에서 파일을 다운로드하고 코드를 보는 방법

• 한 번에 여러 텍스트 파일 내부 검색

• Windows에서 EPS 이미지 파일을 여는 방법

• 특정 응용 프로그램에 대한 UAC(사용자 계정 컨트롤) 끄기

• 무료 Online OCR Image에서 Text을 추출하는 사이트 및 서비스

• Google Sheets에서 Quickly Wrap Text의 방법?

• 라즈베리 파이를 업데이트하는 방법

• Windows 작업 표시줄의 아이콘에서 텍스트를 제거하는 방법

• Chrome 오프라인(독립 실행형) 설치 프로그램을 다운로드하는 방법

• PC 소프트웨어를 자동으로 업데이트하는 방법

• Text or Image GIMP에서 Text or Image에 Shadow를 추가하는 방법

• 서평 - Windows 8에 대한 긱 가이드

• Google 크롬에서 HTML 파일을 여는 방법

• InDesign에서 이미지 주위에 텍스트를 배치하는 방법

• 동적 디스크를 기본 디스크로 변환하는 방법

• Nintendo Switch에서 스크린샷을 찍는 방법

• Windows 명령줄에서 텍스트 파일로 출력 리디렉션