웹페이지를 만들 때 이미지 옆에 텍스트를 배치하고 싶으신가요? 일반적으로 HTML 페이지를 작성하면 모든 요소가 위에서 아래로 순차적으로 배치됩니다. 즉, 텍스트 다음에 이미지가 오고, 그다음에 다시 텍스트가 이어지는 식이죠.
하지만 때로는 이미지 아래가 아니라 이미지 옆에 텍스트를 배치해야 할 때가 있습니다. 이것을 바로 '텍스트 래핑(text wrapping)'이라고 부릅니다. 다행히 HTML만으로도 텍스트를 감싸는 것이 생각보다 쉽습니다. 참고로 CSS를 반드시 사용해야 하는 것은 아닙니다.
다만 최근에는 W3C에서 이런 종류의 작업에는 HTML보다 CSS 사용을 권장하고 있습니다. 아래에서 두 가지 방법을 모두 소개하지만, 가능하다면 CSS 방식을 사용하는 것이 좋습니다. 반응형 웹디자인에 훨씬 더 유연하게 대응할 수 있기 때문입니다.
HTML을 이용한 텍스트 래핑 방법
이미지의 오른쪽 면을 따라 텍스트가 흐르도록 하려면 이미지를 왼쪽으로 정렬하면 됩니다:
<img src="IMAGE URL" align="left" /><p>여기에 텍스트를 입력하세요.</p>
반대로 텍스트는 왼쪽에 나타나고 이미지가 맨 오른쪽에 위치하길 원한다면, align 속성값을 "right"로 변경하기만 하면 됩니다.
<img src="IMAGE URL" align="right" /><p>여기에 텍스트를 입력하세요.</p>
정말 간단하죠? 다만 CSS를 꼭 사용해야 하는 경우가 하나 있는데, 바로 이미지에 여백(margin)을 추가하여 텍스트와 이미지 사이에 적절한 간격을 만들고 싶을 때입니다.
아래와 같은 CSS 스타일 코드로 이미지에 여백을 추가할 수 있습니다:
<img src="IMAGE URL" align="left" style="margin: 0px 10px 0px 0px;" /><p>여기에 텍스트를 입력하세요.</p>
위 코드는 MARGIN CSS 속성을 사용하여 이미지 오른쪽에 10픽셀의 여백을 추가합니다. 이미지를 왼쪽으로 정렬했기 때문에 여백은 오른쪽에 넣어주는 것이 자연스럽습니다.
기본적으로 네 개의 숫자는 상(TOP) → 우(RIGHT) → 하(BOTTOM) → 좌(LEFT) 순서를 나타냅니다. 따라서 오른쪽으로 정렬된 이미지에 여백을 추가하고 싶다면 다음과 같이 작성합니다:
<img src="IMAGE URL" align="right" style="margin: 0px 0px 0px 10px;" /><p>여기에 텍스트를 입력하세요.</p>
HTML로 이 작업을 수행하는 것은 매우 간단하지만, 앞서 언급했듯이 반응형 사이트에서는 제대로 작동하지 않을 수 있다는 점을 기억하세요.
CSS를 이용한 텍스트 래핑 방법
이미지 주변에 텍스트를 배치하는 더 좋은 방법은 CSS를 활용하는 것입니다. 요소의 위치를 훨씬 세밀하게 제어할 수 있으며, 현대 코딩 표준과도 잘 호환됩니다.
<img src="IMAGE URL" alt="사진 설명" class="left" />
앞선 HTML 예제에서는 스타일을 이미지 태그에 직접 포함시켰지만, 실제로는 그렇게 하지 않는 것이 좋습니다. 대신 모든 CSS 코드를 별도의 파일, 즉 '스타일시트(stylesheet)'에 저장하는 것이 올바른 방식입니다.
IMG 태그에는 클래스(class)만 지정하고 이름을 부여하면 됩니다. 위 예제에서는 클래스 이름을 left로 지정했습니다. 그리고 스타일시트에는 다음 코드만 추가하면 됩니다:
.left {
float: left;
padding: 0 10px 0 0;
}
위 코드에서 왼쪽 정렬된 이미지의 오른쪽에 10픽셀의 패딩(padding)을 추가했습니다. 또한 float 속성을 사용하여 이미지를 문서의 일반적인 흐름에서 분리하고, 부모 컨테이너의 왼쪽에 배치했습니다.
보시다시피 IMG 태그 안에 긴 코드를 직접 작성하는 것보다 훨씬 깔끔합니다. 관리하기도 쉽고, 웹페이지의 디자인을 세부적으로 조정할 수 있는 다양한 CSS 속성들을 자유롭게 활용할 수 있습니다. 궁금한 점이 있다면 언제든 댓글로 문의해 주세요!