블로그 이미지 캡션 | 왼쪽/오른쪽/아래 | 같은 넓이로

구글 블로그의 최대 장점은 다른 블로그와는 달리 자기만의 개성이 독특한 게시글 페이지를 디자인할 수 있는 점이다. 하루에도 수천만 건 이상으로 발행되는 포스트들과의 차별화는 상위노출과 직결된다. 간단한 html 지식으로 페이지 공간을 아름답고 효율적으로 디자인할 수 있는 이미지 좌우에 글자배치 방법을 알아본다.

둘러 싸기

오른쪽에 있는 딸기 사진을 지금처럼 글자로 둘러싸는(래핑) 형태로 표현하는 것은 굉장히 간단하고 쉽다.
먼저 블로그 문서 작성에서 이미지를 삽입하고, html 작성에서 이미지<img> 태그에 float:right; 혹은 float:left; 속성(css)을 직접 추가하거나, 게시글 하단에 스타일(style)을 만들어 선택자(id, class)를 지정하는 방법을 사용하면 된다. 전자의 경우는 지금처럼 오른쪽에 이미지가 정렬되고, 후자의 경우는 반대로 왼쪽에 이미지가 정렬된다.
그런 다음 이미지 다음에 문단을 작성하면 자동으로 래핑이 된다. 래핑이 안되면 문단을 다시 작성 해야 한다. 한자라도 새로 작성한 후에는 기존의 긴 문단을 복사해도 된다.만일 문단의 내용이 적으면 이미지와 관계없는 아래의 문단까지 적용되므로 분리선(clear:both)을 만들어야 한다. 하지만 화면이 좁은 스마트폰에서는 문자와 이미지가 세로로 양분되어 가독성이 낮아진다. 그러므로 스마트폰 전용 스타일(CSS)을 만들고 이미지<img> 태그의 넓이(width) 속성을 100%로 설정해야 한다.

모바일 스타일 지정방법

오른쪽 정렬

html 작성에서 이미지<img> 태그에 float:left; 속성(css)을 직접 추가하거나, 선택자(id, class)를 지정하여 게시글 하단에 스타일(style)을 만들면 된다. 문단 <div> 태그에 overflow:auto; 속성을 지정하면 문단이 길어도 ‘둘러싸기’와 달리 오른쪽에만 문장이 정렬된다.

왼쪽 정렬

html 작성에서 이미지<img> 태그에 float:right; 속성(css)을 직접 추가하거나, 선택자(id, class)를 지정하여 게시글 하단에 스타일(style)을 만들면 된다. 문단 <div> 태그에 overflow:auto; 속성을 지정하면 문단이 길어도 ‘둘러싸기’와 달리 왼쪽에만 문장이 정렬된다.

아래(체리와 바나나 이미지)와 같이 ‘이미지와 문단 정렬 작업’을 하지 않으면 현재처럼 문장이 이미지 범위(넓이)를 벗어난다. 아래의 2가지 방법 중 선택하면 이미지 넓이와 문장 넓이를 같도록 할 수 있다.

직접 방법

이미지<div> 에 display:inline-block; 속성(css)을 추가하고 하위 <div>를 만들어 그 안에 문장을 작성한다.
<div style="display:inline-block"> <div style="width:0;min-width:90%;">문장 작성</div></div>

선택자(id나 class)

<div class="caption(임의 지정)"></div>
<style>
#caption{
width:0;
min-width:90%;//좌우 여백
}
</style>

크기를 변경한 속성(width)을 스미트폰 스타일(CSS)에서 100%로 환원 설정하면 화면이 분할되지 않는다.

모바일 스타일 지정방법

의 관련글