네이버 블로그 홈페이지형으로 만들기 1


네이버 웹페이지형 블로그를 만들어 보겠습니다.

블로그에 들어가 보면 메인에 커다란 이미지만 보이는 블로그가 많이 보이는데요.

눈을 끌어당기는 효과가 있습니다.

시원하고 탁 트인 느낌을 받죠.

먼저 배경용 이미지를 2000 * 600 픽셀로 준비를 합니다.


블로그로 들어가 봅니다.


아무 것도 없는 빈 페이지입니다.

본인 프로필 아래의 관리.통계에서 관리로 들어갑니다.



많은 설정화면이 나타났습니다.

여기서 레이아웃 위젯 설정과 세부디자인 설정은 기억하시기 바랍니다.

작업을 하시다 보면 왔다갔다 하실 겁니다.

그 옆의 블로그 메뉴는 카테고리, 즉 게시판을 만들수 있습니다.

세부디자인 설정으로 들어갑니다.



준비해 둔 이미지를 불러옵니다.



혹시 이런 화면이 나오면 세부디자인 설정으로 다시 들어가시면 이 메시지가 안보일 겁니다.





배경이미지가  1000 * 600 으로 준비를 했는데 양쪽으로 덧붙여져 나옵니다.

이미지가 2000 * 600 으로는 가지고 계시는 해상도에 따라 이미지가 짤려나올 수도 있습니다. 

폭이 다른 이미지 몇가지를 올려봐도 양쪽이 짤리거나 위의 화면처럼 덧붙여져 나오거나 합니다.

정확하게 화면과 일치하는 이미지 크기를 못 찾았으니

조금 큰 이미지로 양쪽이 조금 짤려나갈 것을 예상하시는 것이 좋을 듯합니다.


홈페이지현 블로그는 이 화면만 이해하시면 성공하실 겁니다.

홈페지형이 아닌 타이틀을 넣을 경우는 타이틀 크기만큼 메뉴가 아래로 밀려내려옵니다.

그런데 홈페이지형으로 넣은 이미지는 자기 자리를 가지지 못하는 배경이미지로 있는거죠.

이렇게 배경이미지로 넣는 것은 한글에도 볼 수있습니다.


그래서 배경이미지를 덮고 있는 메뉴들을 아래로 내려보내기 위해서 투명 레이어가 필요합니다.

배경이미지도 보이고 다른 메뉴도 자연스럽게 원하는 위치로 내려보내는 거죠.




이제는 레이아웃 위젯 설정으로 들어갑니다.



레이아웃은 오른쪽에서 두번째를 선택합니다.

그리고 타이틀을 없애줍니다.


투명레이어를 만들 차례입니다.

오른쪽 하단으로 쭉 내려오면 위젯직접등록 BETA 라고 적인메뉴가 있습니다.



클릭을 하면 소스를 넣을 수 있는 창이 나옵니다.

메모장을 받으셔서 참고하시면 됩니다.




웹형 블로그 소스.txt


<table width="170" height="600">

<tr><td><td/><tr/><table/>

 

투명레이어는 5개를 만들고 코드는 똑 같이 넣어주면 됩니다.



투명레이어가 5개 만들어 졌습니다.



아래에 투명레이가 생긴 것을 확인할 수 있습니다.

이 투명 레이어를 드래그해서 상단으로 올립니다.

위에서 배경이미지를 아래로 밀어내기 위한 위치로 올라가야겠죠.



이렇게 위치시킵니다.

투명레이어 순서 중요합니다. 메뉴를 넣을 때 또 사용할 겁니다.




확인해 보겠습니다.



이미지와 메뉴의 거리가 멀어보입니다. 수정을 합니다.

위에서 투명레이어 만들 때 넣은 소스중에서 크기를 줄여봅니다


<textarea name='code' class='text'>

<table width="170" height="520">

<tr><td><td/><tr/><table/>

</textarea>


배경이미지 높이가 600으로 투명이미지도 600 으로 적용했는데 맞지않죠. 600을520으로 수정합니다.




이 정도면 마음에 듭니다.

여기까지는 잘 따라오셨나요.

게시판도 미리 만들어 놓으시면 됩니다.

여기까지는 이미지 크기때문에 몇 번이나 올리고 만들고 하는데 시간이 많이 들었습니다.

이미지도 많아 다음 편으로 연결하겠습니다.

 

2018/02/05 - [블로그 &] - 네이버 블로그 홈페이지형 만들기 2


이 글을 공유하기

댓글(0)

Designed by JB FACTORY

티스토리 툴바