홈페이지형 블로그만들기 강좌 위젯좌표구하기

 

지난시간까지 형태도 잡고 레이아웃도 꾸며보았는데요 오늘은 조금은 복잡한 위젯을 만들어 보려고 합니다

html도 들어가서 복잡해 보이나 그다지 어려울건 없습니다. 우리에겐 복사 - 붙혀넣기 신공을 발휘하면

아무런 문제가 없기 때문이죠! 위젯을 만들어 보시죠

 

 

블로그에서 관리페이지로 접속하시면 오른쪽 하단쯤에 위와 같은 그림이있는데요 빨간박스가 위치한곳을

보시면 위젯직접등록BETA 라는 버튼이 있는데요 요기를 클릭하시면 등록팝업이 뜹니다. 그런데 BETA라고

써있는거 보면 아직까지 베타버전인가 봅니다. 정식버전에서는 어떤지원이 될런지 궁금하기도 하네요.

 

 

자! 팝업이 떳습니다. 간단한 설명이 있는데요 중요한 포인트는 가로 170px, 세로 600px까지 지원한다고

써있습니다. 더 늘릴수는 없구요 줄일수는 있는데요 보통 가로는 안줄입니다. 170px을 그대로 사용하구요

세로는 지난시간에 메인그림의 사이즈에 맞춰 설정하시면되는데요 저는 470px의 그림을 사용하였기에

그림을 보시면 투명위젯의 위치위에 네이버메뉴 그밑에 메뉴형태 라고 공간이 차지하기 때문에 약간의

공간을 빼고 400px로 만들어 보았습니다. 그래야 포스팅영역과 딱 맞더라구요. 약간의 공간을 더주고

싶으시면 세로 길이를 늘리시면 포스팅 영역이 좀더 밑에서 위치해서 표시됩니다.

(1)은 위젯이름을 적어주는건데요 알아보기 쉽게 적으시면 되구요 (2). 위젯코드입력란인데요 html코드가

보이죠 저게 뭐하는건가 하시는분들 있을텐데요. 해석을 하자면 가로,세로 공간을 170 x 400으로 설정을

해놓으라는 거에요 그냥 복사해서 붙혀넣기 하시면 간단하게 끝납니다. 똑같이 쓰시면되거든요

 

<DIV STYLE="WIDTH:170PX;HEIGHT:470PX;" />

 

똑같이 적으시거나 복사 - 붙혀넣기를 하셨으면 다음 버튼을 눌러주면 위젯이 만들어 지는데요 위와같이

5개를 똑같이 위젯명만 다르게 만들어 주시면됩니다

 

 

이런식으로 모양이 나타납니다. 혹시 잘못쓰셧을 경우에는 에러가 나면서 위의 이미지와 같이 나타나지

않기 때문에 이전 버튼을 눌러서 다시 확인하시고 만들어주시면 되는데요 다됬으면 등록을 누르면되요

 

 

아까전에 5개만들었을때 위젯위치가 위에없고 밑에 나올땐 마우스로 누른상태에서 이동하시면 (일명 드래그)

원하시는 위치에 배치하실수 있어요. 물론 다른형태의 블로그 제작시에는 꼭 위에가 아니더라도 옆에 위치

하도록 드래그해서 이동하시면 됩니다.

 

 

기본위젯을 만들었으면 위치가 어떻게 되는지 알아보아야겠지요 일단 저장을 누르고 블로그로 이동

하는데요 주소로 입력하셔도 되고 오른쪽 상단에 내블로그를 클릭하셔도 됩니다 그런다음에는

투명위젯 위치쯤에서 마우스를 드래그하시면 저렇게 파랗게 보이는데요 이것을 스크린샷해서

그림판에 저장해 둡니다. 스크린샷은 키보드 버튼 Prt Scr을 누르시면 되구요 그림판에 저장하는

방법은 그림판을 연 다음 컨트롤 + v 키를 누르시면 화면에 출력이 됩니다. 아 그런데 이미지처럼

파란색이 잘안나오는 분들도 계실꺼에요. 익스플로러에서는 잘안되더라구요 크롬에서는 글자를

클릭하신다음에 컨트롤 + A 키를 누르시면 아주 잘되니까 잘 안되시는분은 크롬에서 하세요

이것을 왜 하는것인지 궁금하시죠? 저기 이미지 보시면 파란색화면과 클릭해야할 부분이 겹쳐

보이는 부분의 좌표를 구해서 클릭하면 해당 주소로 이동하게 만들려고 좌표를 구하기 위해서

이 불편한 작업을 해야 합니다. ㅠ.ㅠ

 

 

그림판에 복사해둔것에 파란색부분을 잘라서 다른 그림판에 옮겨 놓습니다. 이래야만 기본 위치숫자를

알수있기때문입니다. 제 블로그 같은경우에는 5개가 다 같은 위치이므로 일일이 다섯개의 위젯을 잘라

각각의 좌표를 구할 필요는 없는데요. 위치가 다른게 설정하실 분들은 다섯개를 잘라주시면 됩니다.

 

 

잘라낸 그림판의 그림위를 보시면 노란색박스 부분을 클릭할경우 회사소개라는 게시판으로 이동하게끔

그영역부분의 좌표를 구하는것인데요 가운데 그림의 마우스를 가져가면 아래에 좌표가 보입니다.

0, 236px이네요 오른쪽 그림의 마우스 좌표는 169,292px입니다 그러면 노란색 박스 영역의 좌표는

(0,236,169,292)가 되는 겁니다.

 

위젯좌표구하는법을 배워보았는데요~이런식으로 그림판을 이용하지 않고 다른 툴을 써서 좌표 및

html위젯등록 코드 까지 자동으로 나오는 프로그램도 있지만 간단한 홈페이지형 블로그에는 그다지

편리성을 못느끼겟어요 링크주소가 여러군데 많다면 툴을 쓰는것이 훨씬 편리하겟지요 ㅎ

자꾸 연습해보시고 어려운점이 있으면 댓글 남겨주시면 답변을 드리도록 하겠습니다. 감사합니다.