이미지 주위에 CSS 래핑 텍스트
CSS를 사용하면 이미지 주위에 텍스트를 둘러쌀 수 있습니다. 이는 HTML에서 시각적으로 매력적이고 읽기 쉬운 레이아웃을 만들어 궁극적으로 콘텐츠의 가독성을 향상시키는 좋은 방법입니다. 이미지의 왼쪽 또는 오른쪽을 감싸도록 설정하거나 이미지의 위 또는 아래를 감싸도록 설정할 수 있습니다.
이미지 주위에 CSS 래핑 텍스트
HTML에는 이미지 주위에 텍스트를 둘러싸는 다양한 방법이 있습니다. 가장 일반적인 방법은 align 속성을 사용하는 것입니다.
정렬 속성을 활용하여 삽입하려는 이미지 위치를 지정할 수 있습니다. 예를 들어 정렬 속성을 사용하여 텍스트 단락 내에서 이미지를 중앙에 배치할 수 있습니다.
CSS를 사용하면 그에 따라 이미지 주위에 텍스트를 배치하는 것을 완벽하게 제어할 수 있습니다. 텍스트는 기본적으로 이미지 주위를 둘러싸서 이미지의 왼쪽 또는 오른쪽 가장자리와 플러시됩니다.
그러나 CSS float 속성을 사용하여 텍스트가 이미지 주위를 감싸는 방식을 제어할 수 있습니다.
{
float: left;
}
float 속성을 left로 설정하면 이미지가 텍스트 왼쪽에 떠 있고 텍스트가 이미지 주위를 둘러쌉니다. float 속성을 right로 설정하면 이미지가 텍스트 오른쪽에 떠 있고 텍스트가 이미지 주위를 둘러쌉니다.
또한 CSS clear 속성을 사용하여 텍스트가 이미지 주위를 감싸는 방식을 제어할 수 있습니다.
clear 속성을 left로 설정하면 이미지가 텍스트 왼쪽에 떠 있고 텍스트가 이미지를 감싸지 않습니다. clear 속성을 right로 설정하면 이미지가 텍스트 오른쪽에 떠 있고 텍스트가 이미지를 감싸지 않습니다.
{
clear: left;
}
또한 CSS overflow 속성을 사용하여 텍스트가 이미지를 감싸는 방식을 제어할 수 있습니다. overflow 속성을 hidden으로 설정하면 이미지가 텍스트의 왼쪽이나 오른쪽으로 떠다니며 텍스트가 이미지를 감싸지 않습니다.
{
overflow: auto;
}
마지막으로 CSS padding 속성을 사용하여 이미지와 텍스트 사이의 공간을 제어할 수 있습니다.
패딩 속성을 0 값으로 설정하면 이미지가 텍스트와 일치합니다. 패딩 속성을 10px 값으로 설정하면 이미지와 텍스트 사이에 10px 공간이 생깁니다.
{
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
예제 코드:
<!DOCTYPE html>
<html>
<head>
<title>
Wrapping an Image with the text
</title>
<style>
body {
margin: 20px;
text-align: center;
}
h1 {
color: green;
}
img {
float: left;
margin: 10px;
padding-bottom: 2px;
width: 250px;
}
p {
text-align: justify;
font-size: 25px;
}
</style>
</head>
<body>
<h1>Wrap Text Around Image</h1>
<b>
The output of wrapping text around an image
</b>
<div class="square">
<div>
<img src="replaceYourImageHere.jpeg" alt="Longtail boat in Thailand" />
</div>
<p>
There are a few different ways to wrap text around images in HTML; the most typical way is to use the `align` attribute. You can utilize the align attribute to specify the image position where you want to insert it.
For instance, you can utilize the `align` attribute to center an image within a paragraph of text. With CSS, you are in full control to wrap text around an image accordingly. The text will default wrap around an image to flush
with the image's left or right edge. However, you can use the CSS `float` property to control how text wraps around an image.
</p>
</div>
</body>
</html>
결론
이미지 주위에 텍스트를 배치하면 웹사이트나 블로그의 사용성을 개선하는 데 도움이 될 수 있습니다. 페이지에 텍스트가 많은 경우 이미지가 텍스트 중간에 있으면 읽기 어려울 수 있지만 텍스트 사이에 이미지를 사용하면 가독성과 이해도가 높아집니다.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn