네이버 블로그 코딩 - neibeo beullogeu koding

요즘 포스팅을 잘 못했는데 일하는게 프로그래밍이니 하면서 어려웠던 코드나 오답노트 형식으로 블로그에 올려보자 하는 중이다. 구글링을 하다보면 소스코드를 이쁘게 잘 올려놓은 경우가 많았는데 똑같이 하려면 별도의 작업을 거쳐야 하나? 귀찮은데.. 이러면서 블로그 포스팅을 켰더니, 네이버 블로그 자체에 소스코드 입력창을 지원해주고 있었다;

​

정답은 가까운데 있다더니..

사이트에서 복붙해와야하나 하고 걱정했는데 너무 좋았다. 디자인 종류는 3가지를 지원하고 있다. 아래가 예시.

오 가독성도 나름 좋은것같다. 색상도 알아서 변경해준다.

​

그런데.....소스코드 창 안에서 TAB키가 안먹힌다.

//댓글 삭제 요청 function replyDelete(re_no) { var fbo_no = $("input:text[name='fbo_no']").val(); $.ajax({ url: "${pageContext.request.contextPath}/star/fanBoard/reply/delete/", type: 'POST', data : { re_no : re_no }, success: function(response) { if(response == true) { fboardView(fbo_no); alert('삭제되었습니다.'); } }, error:function(xhr, status, message) { alert(" status: "+status+" er:"+message); } }); }

​

안될때는 https://colorscripter.com/나 Github에서 코드를 복붙해서 다시 가져오면 된다.

​

​

홈페이지형 블로그 만들기 _2탄 위젯코딩하기

안녕하세요! 홈페이지형 블로그 만들기 2탄으로 돌아온 소녀쌤입니다~
제가 다음편을 준비하는 동안 많은 분들이 홈페이지형 블로그 만들기를 찾아 주셨더라구요!
그래서 허겁지겁 빠르게 준비를 해왔는데, 많이 기다리셨나요? :)

1탄은 아무래도 기본적인 스킨을 만드는 것에 집중되었다면, 
2탄은 스킨을 만든 후 진행되는 코딩에 대한 부분이라 조금 어렵게 느껴질 수 있을 것 같습니다.

차근차근 따라하시면 어렵지 않게 완성 할 수 있도록 준비했으니 포스팅을 잘 따라와주세요!

위젯은 블로그를 사용해 보신 분들이라면 다들 사용해 보셨을텐데요!
블로그의 방문자 수를 확인할 수 있다던가, 
프로필을 본다던지 등등 블로그를 운영하는데 있어서 편하기 위해서 사용되는 기능들이랍니다.

3번의 영역이 바로 블로그에 사용되는 위젯을 설정하는 공간들인데요!
아래를 보시면 4번의 위젯을 직접등록할 수 있는 기능도 있답니다.

우리는 오늘 이 위젯을 등록해 보도록 할께요!

위젯의 이름설정은 임시로 설정하기 위해 (투명위젯1) 로 설정해 줄께요.
아래의 코딩영역에는 간단한 코딩을 작성해줍니다.

<div style="width:170px;height:163px;"> </div>

위젯의 가로는 170px로 지정을 해줍니다! ( 최대가 170px이기 때문에 더 큰 사이즈로는 설정이 안됩니다)
저의 경우 세로는 163px로 지정을 했는데요. 
여러분들이 지정한 스킨의 세로사이즈에 따라서 다르게 넣어주셔야 한답니다~!

다음을 누르시면 미리보기가 나타나는데 아무것도 보이지 않으실 꺼에요!
우리가 만든 위젯은 말그대로 투명위젯으로 우리가 넣을 메뉴위젯의 위치를 파악하기 위함이랍니다.

만들어진 "투명위젯1"은 위로 드래그해 타이틀 아래로 위치하도록 합니다!

이런 위젯을 만드는 방법을 반복하여서 투명위젯5까지 만들어 주도록 할께요!
투명위젯5까지 만들어주시면 아랫쪽의 [적용]을 눌러서 적용을 시켜보도록 할께요!

블로그 화면으로 돌아와서 전제적으로 드래그를 해줍니다!
혹은 Ctrl + A를 눌러서 드래그 화면을 보시면 투명위젯이 들어간 영역이 보인답니다.

이때 키보드에서 프린트 스크린(Print Screen)을 눌러 화면을 캡쳐해줍니다!


이때, 위젯영역이 보이지 않으신다면!
인터넷익스플로어가 아닌 크롬(Chrome)으로 확인해주셔야합니다

그리고 포토샵에서 새창을 열어 프린트스크린 내용을 붙여 넣습니다.
영역에서 어느정도를 메뉴가 들어갈 위젯으로 작업할 지 세로영역을 지정해 주세요!

저희 블로그의 경우에는 상단에서 90px정도의 높이로 사용할 예정이라 핑크색영역만큼이 메뉴영역이랍니다~

즉! 블로그 메뉴 위젯의 하나의 크기는 가로170px에  세로90px로 제작하게 됩니다!
*각자의 블로그 스킨에 맞게 세로값을 설정하시면 됩니다:)
 가로값은 무조건, 170px이 최대값이랍니다!!

포토샵에서 새창을 열어 메뉴영역을 만들어줍니다.
투명하게 들어가는 영역이기 때문에, 새창을 만들어 주실 때 사이즈를 정확하게 기입하신 후
백그라운드영역은 Transparent (투명)으로 설정해 줍니다.

배경이 투명한 상태에서 메뉴에 들어갈 내용을 적어줍니다.
투명한 상태에서는 어떤내용인지 정확하게 알 수 없으니 새 레이어로 배경만 채워서 메뉴가 정중앙에 오도록 맞추어 줍니다.
또한 배경을 보면서 작업을 마무리했다면, 작업 후에는 배경레이어를 지워줍니다.!!
마지막으로 파일을 저장하실 때에는 반드시 확장자명을 PNG파일로 저장합니다!

메뉴위젯을 등록하기 위해 메뉴 png 파일들의 주소를 부여해줍니다!
먼저, 포스트 쓰기로 들어가서 사진 가져오기로 png파일들을 전부 가져옵니다.
대신 메뉴위젯 글은 이미지의 절대경로이기 때문에 절대 나중에라도 지우시면 안되요~~

포스트를 생성하신 다음에는 드래그로 이미지들을 선택한 다음 위치를 보며 우클릭을 합니다.
그리고 이미지 주소를 복사해서 메모장에 각각 붙여넣어주세요!
★ 이미지 주소 하나만 하시면 안되고 메뉴들 이미지를 각자 따로 주소 복사해줍니다!! 

이미지의 주소까지 붙여넣었다면 드디어 메뉴위젯을 등록해볼께요!
블로그 관리 > 레이아웃·위젯 설정에 들어갑니다.

만들어진 메뉴위젯을 투명위젯 밑으로 드래그해서 옮겨줍니다!

마지막으로 만들어졌던 투명위젯의 사이즈를 수정해서 화면에 보이도록할겁니다~
이미 만들어져 있는 투명위젯의 "EDIT"를 클릭해서 수정해주세요.

height값만 65px로 맞추어줍니다.
대신 높이값이 저와 다르게 설정되신 분들은 각자의 수치값을 계산하여서 수정해주세요!

확인을 눌러주시면 각자 위치에 위젯이 들어가 있는걸 확인 할 수 있답니다~




이렇게 긴 시간을 들여서 홈페이지형 블로그를 완성해봤습니다!
도움이 되었으면 좋겠네요ㅜㅜ
만드는 동안에도 저도 엄청 고생했던 기억이 납니다...
혹시나 진행하시는 데에 어려움이 있다면 제가 아는 선에서 도와드리도록 할께요!


다음에도 더욱 도움되는 블로그운영팁으로 돌아오겠습니다~