티스토리 같은 홈페이지에 플로팅 이미지를 넣고 크기 조절을.

#플렉서블 디스플레이의 등장으로 노트북 화면 크기의 웹페이지의 인기가 상승 할지도 모르나 

아직까지는 모바일이 시장 대부분을 차지하고 있다. 티스토리 같은 웹페이지를 운영하는데 있어 반응형을 선택한 이유도 여기서 기인한 것이다. pc환경에서 아무리 그럴싸하게 꾸며도 모바일에서는 느낌을 살릴 수 없기 때문이다.

허나 이와는 반대로 일반 pc에서 보는 반응형웹페이지, 특히 티스토리의 cover 기능을 이용한 디자인은 어색하고 약간 통 빈 느낌을 가져 온다. 특히 가로가 긴 디스플레이를 가진 기기에서는 양쪽에 빈 공간이 생겨 더욱 이러한 느낌을 가져 다 준다.

 

그래서 플로팅 버튼과 add this를 추가 해 보았다.

본디 플로팅 배너, 즉 고정형 광고를 올릴 생각이였으나 최대의 수익을 가져 다 주는 에드센스가 이를 금지하고 있고

(브라우저 창 크기가 달라지면 본문 글을 가려버린다.)

그저 제일 주력 홍보 대상 링크만 걸어 놓았다.

 

 

 

다행히 자바네. 아니, html인가?

예전에 플로팅 기능을 이용한 어플도 만들어 본 적도 있기는 하지만 손을 땐지 오래 되어서 할 수가 있을까 걱정을 했었다. 다행히 인터넷에 널린 것이 코드이니 그리 어렵지는 않았다.

다만, 필자와 같이 특정 링크로 연결 하는 플로팅 기능은 없는 듯 하여 약간 응용만 했을 뿐이다. href, 맞는지는 모르나 임의로 하이퍼 레퍼런스로 해석하였고 이 것을 이용하여 링크 연결 하였다. 다른 언어에서는 모르나 하이퍼라 붙어 있는 것은 html에서 대부분 ‘연결하다’라는 의미가 강하다. 특히 레퍼런스는 참조의 의미가 강하니 여기다 넣으면 될 듯 싶었다.

다음으로 이미지 설정인데, gif나 png에 상관없이 설정이 가능 해 처음에는 gif도 넣어보다 결국 현재 사용하는 이미지를 넣게 되었다. 그런데,

 

이미지 크기를 바꿔 업로드 해도 화면 상에 나오는 이미지의 크기는 같네...

그림판을 이용 이미지의 크기를 바꿔 업로드 해도 인식을 못 하는 것 이였다. 단순히 오류라고 생각 되지만... 당장에 해결하고 싶어 걍 이미지 소스에 height를 지정하니 원하는 크기가 되었다. <image height=> 이렇게 말이다.

자바의 장점이 바로 이거다. 일일이 코드 분석 할 필요 없이 대충 영어로 있을법한 단어를 기입 해 주고, 원하는 값이 있으면 ‘=’을 기입하고 필요하다면 ‘’도 기입해 값을 넣으면 왠만한 것은 다 해결 되니 말이다. 더군다나 if구절만 알면 왠만한 것은 다 만들 수 있으니, 정말 편리한 언어이다.

 

에드센스 말고 다른 광고 플로팅배너를 만들어 볼까...

생각하지만 디스플레이 크기에 따라 본문을 가리는 효과도 있어 이 점 개선하여 만들 필요성이 있다. 사실 요즘 에드센스에서는 자동 광고 기능이 있어 모바일에서는 굳이 플로팅 배너가 필요 없기에 그냥 pc 디스플레이에서만 작동 하도록 만들면 되겠지만... 생각보다 귀찮은 작업이기도 하고 꼭 이렇게 해서까지 돈을 벌어야 하는가 싶어 잠시 접어둔다.

사실 지금 필자가 사용하고 있는 기능은 단순히 이미지를 최상위에 고정 시켜 놓은 것 뿐이기에 로딩에 큰 영향은 없으나 레이어를 하나 더 쓰는 기존의 플로팅 배너 기술은 많이 달면 달 수록 로딩 속도에 영향을 주기에 지양해야 되기는 하다.