블로그 이미지를 가로로 배치해보자... ( CSS의 FLOAT 이용... )

안녕하세요. 행복을 노래하는 초매입니다.

오늘도 내 머리속에 무엇인가를 담기위해 회사에 나가서 열심히 일했네요. 요즘은 무언가에 열심히 한다는 것이 개인적인 시간을 많이 뺏고, 체력도 많이 소모되는 일이지만, 미래의 나를 위한 투자라고 생각하고 열심히 하고 있습니다. ^^ 서론에 갑자기 무거운 이야기를 했는데요. 이제 더 무거운 이야기를 해보죠. 바로 블로그에서 이미지 위치를 다루는 방법입니다. 저는 티스토리에서 주로 포스팅을 하기 때문에 티스토리를 이용하여, 설명하도록 할께요. ㅎㅎㅎ

 

▶ 이미지 업로드를 하면...

 

 

 

이미지를 무작정 업로드를 하게 되면, 위 이미지와 같이 아래, 위로 일렬로 정렬되죠? 이것을 가로로 배열하기 위해 포토샵으로 좀 편집할까? 아니면 윈도우 기본 이미지 편집 프로그램인 그림판을 이용하여, 수정할까? 여러가지 생각이 들었지만, 귀찮더군요...ㅎㅎㅎ 만약 이것을 이미지 편집기가 아닌 방법으로 가로 정렬하고 싶다면 어떻게 해야 할까요? 간단한 방법은 없을까요?

 

티스토리는 레이아웃을 지원합니다.

 

▶ 이미지 레이아웃 설정

티스토리에는 레이아웃을 설정하는 기능이 있는데요. 이 기능을 사용하면 여러 레이아웃에 맞춰서 이미지를 정렬, 내용을 입력할 수 있습니다.

 

▲ 레이아웃 기능이 있어, 편리하게 여러 효과를 낼 수 있어요.

 

▲ 레이아웃 효과로 이미지 가로 정렬했을 때

▶ CSS로 이러한 효과를 낼 수 없을까?

레이아웃을 사용하면, 엄청 편리하긴 하지만, 제공된 것을 사용하지 않고, 장난치는 방법은 없을까요? 바로 본문 CSS 를 이용하는 방법이겠죠... 하지만, 이미지는 어떤식으로든 서버에 있어야 하기 때문에 업로드를 하셔야 합니다. 그러면 CSS를 이용해서 비슷하게 효과를 내볼까요? 먼저 이미지를 업로드하고, 해당 이미지에 대한 HTML 소스를 보시죠...

 

▲ 아직 업로드되지 않은 이미지 표현 방식을 볼 수 있습니다.

 

업로드를 하고, HTML 소스를 보면 위 이미지처럼 되어 있습니다. 보통 서버에 있는 이미지는 <img> 태그를 이용해서 표현하지만, 아직 포스팅을 하지 않은 상태이기 때문에 티스토리 내부 언어로 어렵게 표현되어 있네요. 하지만, 우리가 하려는 작업에는 아무런 영향을 미치지 않죠...^^ 빨간줄이 쳐져 있는 부분과 앞에 있는 <P> 태그의 속성을 이용해서 장난치면 됩니다... ^^

 

▶ FLOAT 란?

만약 정렬하려는 이미지 너비의 합이 본문의 너비가 크다면, 이미지 크기를 조정하세요. 이미지 크기 조정하는 방법은 아시죠? 모르신다면,,, 댓글 달아주세요...ㅎㅎㅎ 티스토리의 레이아웃은 TABLE 태그를 이용했지만, 저는 FLOAT 속성을 이용하도록 하겠습니다. 보통 문단을 나누는 경우 P 태그를 이용하는데요. 이러한 속성을 조금 무너지게 하는 것이 FLOAT 인데요. "뜨다" 라는 뜻을 가진 것 처럼 이미지를 물 위에 띄우는 효과를 주는데요. P 태그가 한 Line 을 책임진다면, float 속성을 이용해서 이미지를 표현하면, 본문 너비가 안을수 있는 한 최대한 많이 이미지를 띄울 수 있습니다. 말을 하다보니, 계속 어려워지네요...^^ㆀ

 

▶ FLOAT 값을 수정하면...

 

▲ FLOAT를 모두 left 로 수정하면...

 

▲ 위 이미지처럼 모두 왼쪽으로 붙겠죠.

 

▲ 마지막 하나만 right 로 수정하면...

 

▲ 위 이미지처럼 마지막 이미지만 오른쪽으로 붙겠죠.

 

위 이미지를 보신 것처럼 float는 한 라인에 배를 띄운 것처럼 왼쪽으로 오른쪽으로 붙는 성향이 있습니다. 그래서 양 옆 자석에 큰 철을 붙이는 것처럼 원하는 방향으로 붙게 되어 있죠. 그래서 float 는 보통 이미지와 글을 혼합해서 사용하는 경우 많이 사용하는데요. 왼쪽에 이미지... 그 이미지 옆에 해당 기사글을 작성할 때 주로 사용하죠. 하지만, 조금 고급 스킬이기 때문에 컨트롤 하기 힘든 점도 있기 하지만, 잘 사용하면 그 만큼 위력있는 파워가 나오기도 합니다. 웹앱의 경우 이런 float 를 이용해서 개발하는 경우도 많으니까요... ^^

 

▶ 오늘 포스팅의 결론?!

이 글의 결론은

 

"이미지를 가로형으로 배치하고 싶다면, 레이아웃 기능을 이용하라."

 

입니다. 만약 레이아웃으로 표현하기 힘든 레이아웃이 있다면, 테이블을 이용하세요...ㅎㅎㅎ 테이블로도 표현하기 힘든 무언가가 있다면 float 를 권하고 싶지만, 내용을 보는 것처럼 조금 어려운 감이 있습니다... ^^

 

이상, 초매였습니다.