이미지 주위에 텍스트를 줄 바꿈하는 코드가 필요합니까? 일반적으로 HTML 페이지를 만들 때 모든 것이 선형으로 흐릅니다. 즉, 바로 다음 블록을 의미합니다. 이전 게시물은 모두 텍스트, 그림, 텍스트 등의 예입니다.
때로는 아래에 있지 않고 이미지 옆에 텍스트를 포함하고자 할 수 있습니다. 이것은 이미지 주위에 텍스트 줄 바꿈이라고합니다. 실제로 HTML을 사용하여 텍스트를 줄 바꿈하는 것은 상당히 쉽습니다. 텍스트를 줄 바꾸기 위해 CSS를 사용할 필요는 없습니다.
그러나 요즘 W3C는 이러한 종류의 작업에 HTML 대신 CSS를 사용하도록 권장합니다. 아래의 두 가지 방법을 모두 언급하겠습니다 만 가능한 경우 반응 형 웹 사이트 디자인에보다 적합하기 때문에 CSS를 사용하는 것이 좋습니다.
HTML을 사용하여 이미지 주위에 텍스트 감싸기
Lorem ipsum dolle 앉아 amate, consipetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis는 tincidunt sagittis를 입양했습니다. Cum sociis natque penatibus와 magnis는 분만 몬스터들, nascetur ridiculus mus. 알콜 중독에 대한 경고. Curabitur molestie posuere laoreet. lorem egestas non imperdiet enim congue의 유용한 기능.
텍스트를 이미지의 오른쪽을 따라 감싸려면 그림을 왼쪽으로 정렬해야합니다.
귀하의 텍스트는 여기에 있습니다.
텍스트가 왼쪽에 나타나고 이미지가 맨 오른쪽에 나타나게하려면 align 매개 변수를 "right"로 변경하십시오.
Lorem ipsum dolle 앉아 amate, consipetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis는 tincidunt sagittis를 입양했습니다. Cum sociis natque penatibus와 magnis는 분만 몬스터들, nascetur ridiculus mus. 알콜 중독에 대한 경고. Curabitur molestie posuere laoreet. lorem egestas non imperdiet enim congue의 유용한 기능.
귀하의 텍스트는 여기에 있습니다.
그게 다야! 아주 쉬운 권리? 이미지에 여백을 추가하여 텍스트와 이미지 사이에 약간의 공백이 있도록 CSS를 사용하려는 경우에만 가능합니다.
다음 CSS 스타일 코드를 사용하여 그림에 여백을 추가 할 수 있습니다.
귀하의 텍스트는 여기에 있습니다.
위의 코드는 MARGIN CSS 요소를 사용하여 이미지의 오른쪽에 10 픽셀의 공백을 추가합니다. 이미지를 왼쪽으로 정렬 했으므로 오른쪽에 공백을 추가하려고합니다.
기본적으로 네 개의 숫자는 TOP RIGHT BOTTOM LEFT를 나타냅니다. 따라서 오른쪽 정렬 된 이미지에 공백을 추가하려면 다음과 같이하십시오.
귀하의 텍스트는 여기에 있습니다.
HTML을 사용하여이 작업을 수행하는 것은 매우 간단하지만 응답 성이 좋은 사이트에서는 제대로 작동하지 않을 수 있습니다.
CSS를 사용하여 이미지 주위에 텍스트 줄 바꾸기
이미지 주위에 텍스트를 감싸는 더 좋은 방법은 CSS를 사용하는 것입니다. 그것은 요소의 위치를보다 정밀하게 제어 할 수있게 해주 며 현대적인 코딩 표준으로 더 잘 작동합니다.
HTML 예제에서 image 태그에 직접 CSS를 포함 시켰지만, 더 이상 그렇게하지 않아야합니다. 대신 모든 CSS 코드를 포함하는 스타일 시트라는 별개의 파일이 있어야합니다.
IMG 태그에서는 클래스에 태그를 지정하고 이름을 부여하기 만하면됩니다. 내 예에서는 클래스 이름을 왼쪽으로 지정했습니다. 내 스타일 시트에서 다음 코드를 추가하면된다.
.left {float : left; 패딩 : 0 10px 0 0;} 보시다시피, 왼쪽 맞춤 이미지의 오른쪽에 10px의 여백을 추가했습니다. 또한 float 속성을 사용하여 문서의 일반적인 흐름에서 이미지를 이동하여 부모 컨테이너의 왼쪽에 배치했습니다.
보시다시피, 모든 코드를 IMG 태그 자체에 추가하는 것보다 훨씬 깔끔합니다. 또한 관리하기도 쉽고 더 많은 CSS 속성을 사용하여 웹 페이지의 모양을 사용자 정의 할 수 있습니다. 질문이 있으시면 언제든지 말씀해주십시오. 즐겨!
