블로그 이쁘게 꾸며보자!

<div><a title="[http://www.jjuckbbang.net]로 이동합니다." href="http://www.jjuckbbang.net/" target="_blank"><img src="https://t1.daumcdn.net/cfile/cafe/206F1C344C6D0B2A82" class="txc-image" width="" style="clear: none; float: none;" border="0" vspace="1" hspace="1" actualwidth="262" id="A_206F1C344C6D0B2A82B19B" id="A_206F1C344C6D0B2A82B19B"/></a> 블로그 하는 쭉빵인들이 많을까봐가져왔어 문제 있으면 바로말해줘ㅠㅠ처음써보는거라 <img src="https://t1.daumcdn.net/cfile/cafe/235C254556B2D24C2C" class="txc-image" actualwidth="1024" hspace="1" vspace="1" border="0" width="100%" exif="{}" data-filename="psd파일.png" style="font-size: 13.3333px; line-height: 21.3333px; clear: none; float: none;" id="A_235C254556B2D24C2C6019"/> 블로그 전체 레이아웃을 잡는건데나는 포토샵을 이용해서 만들었어! 가로는 총 2200px  사진은 https://unsplash.com/ 이사이트에서 가져왔구메뉴에 쓸 아이콘은 https://www.iconfinder.com/ 여기서 가져왔어 폰트는 해외에서 제공하는 무료폰트들 사용했어! 일단 높이값을 정해놓지말고 만들고싶은데로타이틀을 제작해나처럼 사진넣어도 되고 텍스트로만 이루어진 것도아무것도 상관이 없엉~ 위젯이나 이런걸 지정할걸 감안해서 알려주면네이버는 지정해놔서가로 170px인 위젯을 사용할수있어(세로는무관)그래서 170px 사이에 8px , 8px 여백이있고 또 170px위젯을 놓을수 있어 한마디로 말하자면 <table class="txc-table" width="700" cellspacing="0" cellpadding="0" border="0" style="border:none;border-collapse:collapse;;font-family:gulim;font-size:13.3333px"><tbody><tr><td style="width: 137px; height: 79px; border: 1px solid rgb(204, 204, 204);">170px위젯 </td><td style="width: 62px; height: 79px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(204, 204, 204); border-right-width: 1px; border-right-style: solid; border-right-color: rgb(204, 204, 204); border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204);">8px공백</td><td style="width: 58px; height: 79px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(204, 204, 204); border-right-width: 1px; border-right-style: solid; border-right-color: rgb(204, 204, 204); border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204);">8px공백</td><td style="width: 143px; height: 79px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(204, 204, 204); border-right-width: 1px; border-right-style: solid; border-right-color: rgb(204, 204, 204); border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204);">170px위젯</td><td style="width: 55px; height: 79px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(204, 204, 204); border-right-width: 1px; border-right-style: solid; border-right-color: rgb(204, 204, 204); border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204);">8px공백 </td><td style="width: 58px; height: 79px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(204, 204, 204); border-right-width: 1px; border-right-style: solid; border-right-color: rgb(204, 204, 204); border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204);">8px공백 </td><td style="width: 187px; height: 79px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(204, 204, 204); border-right-width: 1px; border-right-style: solid; border-right-color: rgb(204, 204, 204); border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204);">170px위젯</td></tr></tbody></table> 이렇게 생각하고 만들면돼 <img src="https://t1.daumcdn.net/cfile/cafe/255B754056B2D9D204" class="txc-image" actualwidth="1024" hspace="1" vspace="1" border="0" width="1024" exif="{}" data-filename="설명2.jpg" style="clear:none;float:none;" id="A_255B754056B2D9D2049F37"/> 타이틀 만드는게 가이드가 힘들다 싶으면 알려줄게! 블로그 전체 가로가 966PX이야 (포토샵작업기준)996px로 일단 만들고 세로는 자유롭게 작업해!높이가 짧은 안짧든 무관해 다만들었으면 블로그 가서 <img src="https://t1.daumcdn.net/cfile/cafe/262A9E3E56B2D9F50F" class="txc-image" actualwidth="478" hspace="1" vspace="1" border="0" width="478" exif="{}" data-filename="관리선택.PNG" style="clear:none;float:none;" id="A_262A9E3E56B2D9F50FBFD1"/> 상단 오른쪽에 관리부분이 있어 <img src="https://t1.daumcdn.net/cfile/cafe/2558C24656B2D9E610" class="txc-image" actualwidth="759" hspace="1" vspace="1" border="0" width="759" exif="{}" data-filename="꾸미기설정버튼.PNG" style="clear:none;float:none;" id="A_2558C24656B2D9E610FD91"/> <img src="https://t1.daumcdn.net/cfile/cafe/2772E64556B2D24D14" class="txc-image" actualwidth="212" hspace="1" vspace="1" border="0" width="212" exif="{}" data-filename="세부디자인설정.PNG" style="clear:none;float:none;" id="A_2772E64556B2D24D14C92C"/> 꾸미기 설정을 누르고세부디자인설정을 눌러 <img src="https://t1.daumcdn.net/cfile/cafe/24334B3F56B2DA030E" class="txc-image" actualwidth="1024" hspace="1" vspace="1" border="0" width="1024" exif="{}" data-filename="타이틀선택.PNG" style="clear:none;float:none;" id="A_24334B3F56B2DA030E186B"/> <img src="https://t1.daumcdn.net/cfile/cafe/21691F4556B2D24F1F" class="txc-image" actualwidth="345" hspace="1" vspace="1" border="0" width="345" exif="{}" data-filename="타이틀높이설정.PNG" style="clear:none;float:none;" id="A_21691F4556B2D24F1FE7E2"/> 여기서 부터 중요한데 타이틀 높이를 일단 임의로 잡아100이든 200px이든 잡고적용을해 그러면 내 블로그 메인홈페이지로 가는데거기서 f12를 눌러 <img src="https://t1.daumcdn.net/cfile/cafe/235FC64556B2D24F29" class="txc-image" actualwidth="852" hspace="1" vspace="1" border="0" width="852" exif="{}" data-filename="f12누르면.PNG" style="clear:none;float:none;" id="A_235FC64556B2D24F29AE92"/> 이런창이뜨는데 저기 왼쪽에 마우스 보이지저부분을 클릭하고타이틀부분을 클릭하면 <img src="https://t1.daumcdn.net/cfile/cafe/2706304256B2D25032" class="txc-image" actualwidth="1024" hspace="1" vspace="1" border="0" width="100%" exif="{}" data-filename="높이설정.PNG" style="clear:none;float:none;" id="A_2706304256B2D250324676"/> 이렇게 파란색으로딱 잡혀 (타이틀은 사실 필요없어 배경에 이미깔았기때문에 그래서 높이값만 지정해주는거임!) 그래서 하단에 떠있는 아까 그창을보면 <img src="https://t1.daumcdn.net/cfile/cafe/2410CE4256B2D25129" class="txc-image" actualwidth="634" hspace="1" vspace="1" border="0" width="634" exif="{}" data-filename="높이수정해보기.PNG" style="clear:none;float:none;" id="A_2410CE4256B2D251294C94"/> 이렇게 소스부분이 뜬다그래서 오른쪽에 276px 이렇게되있는부분 더블클릭하면 수정할수가 있어창에보면 아까그 파란색으로 선이 잡혀있으니까저부분을 수정하면서 보면 어디까지 타이틀 높이를 설정 할지 딱 정할수가있어 저높이값으로 타이틀 높이를 설정해주면돼그아래부터 위젯이 깔리기때문에위젯부분을 편하게 설정할 수 있겠지? <img src="https://t1.daumcdn.net/cfile/cafe/250AB94256B2D2512E" class="txc-image" actualwidth="934" hspace="1" vspace="1" border="0" width="934" exif="{}" data-filename="드래그.PNG" style="clear:none;float:none;" id="A_250AB94256B2D2512EE8BF"/> 타이틀 높이를 수정하면 다시 내 블로그 메인으로오잖아그럼 이제 위젯을 설정해야돼 나같은경우 맨왼쪽에 보면 위젯이 비어있어야해그래서 <img src="https://t1.daumcdn.net/cfile/cafe/2456464456B2D58E28" class="txc-image" actualwidth="763" hspace="1" vspace="1" border="0" width="763" exif="{}" data-filename="레이아웃위젯설정.PNG" style="font-size: 13.3333px; line-height: 21.3333px; clear: none; float: none;" id="A_2456464456B2D58E28EFB6"/> 이렇게 설정해놨어공백코드를 알려줄게 위젯설정에가서 위젯집적등록을 눌러 <img src="https://t1.daumcdn.net/cfile/cafe/244E294456B2D58D2F" class="txc-image" actualwidth="189" hspace="1" vspace="1" border="0" width="189" exif="{}" data-filename="위젯직접등록.PNG" style="font-size: 13.3333px; line-height: 21.3333px; clear: none; float: none;" id="A_244E294456B2D58D2FE8FE"/><img src="https://t1.daumcdn.net/cfile/cafe/2255094456B2D58D29" class="txc-image" actualwidth="511" hspace="1" vspace="1" border="0" width="511" exif="{}" data-filename="공백위젯.PNG" style="font-size: 10pt; line-height: 1.6; clear: none; float: none;" id="A_2255094456B2D58D29B397"/> 그리고 <table><tbody><tr><td width="170" height="80" /></tr></tbody></table> 이소스를 그대로 넣어아까 말했듯이 높이값은 자유롭고높이는 너희가 만든 버튼크기정로도 정하면 좋을것같아 일단 위젯이 정해진게 없기때문에 공백으로 일단 다채워서 넣어야해! 다넣고 저장하면 다시홈으로와 <img src="https://t1.daumcdn.net/cfile/cafe/230D9E3E56B2D61B0F" class="txc-image" actualwidth="934" hspace="1" vspace="1" border="0" width="934" exif="{}" data-filename="드래그.PNG" style="clear:none;float:none;" id="A_230D9E3E56B2D61B0F84ED"/> 이렇게 되거든? 나같은경우 버튼이미지같은걸 다 배경에 깔았기때문에투명위젯을 만들어줄거야~ <img src="https://t1.daumcdn.net/cfile/cafe/2435C94656B2D64A1D" class="txc-image" actualwidth="582" hspace="1" vspace="1" border="0" width="582" exif="{}" data-filename="투명포토샵.PNG" style="clear:none;float:none;" id="A_2435C94656B2D64A1D9795"/> 포토샵을 켜서가로는 무조건 170높이값은 자유롭게그리고 백그라운드 부분을 transparent이걸로 설정하면돼아마 한글판인 사람은 투명일거야! 그렇게 만들면 배경없는 이미지가 만들어져 <img src="https://t1.daumcdn.net/cfile/cafe/2722DD3F56B2D6BB07" class="txc-image" actualwidth="525" hspace="1" vspace="1" border="0" width="525" exif="{}" data-filename="ㄴㅇㄹㄴㅇ.PNG" style="clear:none;float:none;" id="A_2722DD3F56B2D6BB074AF4"/>이렇게 그럼 save as나 save for web을 눌러서확장자를 png로 저장해줘! png로 저장안하면 투명이 만들어지는데혹시몰라서 내가 투명이미지를올려줄게! <img src="https://t1.daumcdn.net/cfile/cafe/233D0D3A56B2D70324" class="txc-image" actualwidth="170" hspace="1" vspace="1" border="0" width="170" exif="{}" data-filename="투명이미지.png" style="clear:none;float:none;" id="A_233D0D3A56B2D703242822"/><오른쪽버튼눌러서 다른이름저장하기 눌러 내꺼는 170가로에 세로는 80px야 <img src="https://t1.daumcdn.net/cfile/cafe/2112364256B2D25226" class="txc-image" actualwidth="170" hspace="1" vspace="1" border="0" width="170" exif="{}" data-filename="456456465.png" style="clear:none;float:none;" id="A_2112364256B2D25226ADA7"/> 아까 드래그 한부분을 캡쳐해서 잘라줘 여기서 중요한건 내가 아까 말했듯이 내가 설정한 위젯(투명이미지)값이 공백값이랑 똑같아야해!그래야 이미지맵을 설정했을때 정확하게 위치값을 정확하게 설정해줄수 있어 <img src="https://t1.daumcdn.net/cfile/cafe/2613EC4256B2D25326" class="txc-image" actualwidth="653" hspace="1" vspace="1" border="0" width="653" exif="{}" data-filename="이미지맵설정.PNG" style="clear:none;float:none;" id="A_2613EC4256B2D2532622E0"/> 난드림위버로 했는데 없는 사람 많을것같아서http://handy-image-mapper.soft112.com/download.html 여기서 이 프로그램을 다운받으면 이미지맵을 만들수있어 아까 캡쳐본을 잘라와서원하는 모양툴로 잡아주고 맨왼쪽으로 마우스로 위치를 맞춰줘그리고 아래 왼쪽에 저버튼을 클릭하면 클립보드가 저장돼 <img src="https://t1.daumcdn.net/cfile/cafe/210AC94256B2D2532E" class="txc-image" actualwidth="617" hspace="1" vspace="1" border="0" width="617" exif="{}" data-filename="이미지경로바꾸기.PNG" style="clear:none;float:none;" id="A_210AC94256B2D2532E6891"/> 메모장에 붙여넣기를 하면 이렇게 소스가 만들어진다. <img src="https://t1.daumcdn.net/cfile/cafe/2653713756B2D84E11" class="txc-image" actualwidth="228" hspace="1" vspace="1" border="0" width="228" exif="{}" data-filename="투명나만보기.PNG" style="clear:none;float:none;" id="A_2653713756B2D84E11F9D0"/>나같은 경우 블로그 포스팅하는곳에 투명이미지를 이미지 첨부해서 올렸어공개는 나만보기로그래서 그이미지가 내포스팅에 되있거든? 그럼 그 이미지에서 오른쪽 마우스를 클릭하면이미지 url복사가 있어 그걸 복사해서 <img src="https://t1.daumcdn.net/cfile/cafe/210CF64256B2D2532C" class="txc-image" actualwidth="621" hspace="1" vspace="1" border="0" width="621" exif="{}" data-filename="이미지링크수정.PNG" style="clear:none;float:none;" id="A_210CF64256B2D2532CF9C1"/> 내가 파란색으로 괄호친부분에 넣어~! 그리고 지금 저 노란색으로 된부분을 꼭 적어줘야해blank="_top" < 이건 기본이동이고blank="_blank" < 이건 새창으로 열기야 인스타나 페이스북 링크걸기 좋아~ 수정한다음에 복사해 <img src="https://t1.daumcdn.net/cfile/cafe/2760CF4556B2D25427" class="txc-image" actualwidth="532" hspace="1" vspace="1" border="0" width="532" exif="{}" data-filename="위젯수정.PNG" style="clear:none;float:none;" id="A_2760CF4556B2D254273B44"/> 그리고 아까 만들어놨던 공백 1234등등이 있잖아원하는위치에 붙여넣기해주고 저장하면 끝이야 너무 복잡하게 설명했나?모르는거나 문제되는거 있으면 바로말해줘ㅠㅠ <img src="https://t1.daumcdn.net/cfile/cafe/2412723B56B2D97D1A" class="txc-image" actualwidth="936" hspace="1" vspace="1" border="0" width="""" exif="{}" data-filename="블로그디자인 (1).jpg" style="clear:none;float:none;" id="A_2412723B56B2D97D1A011C"/>이쁜 블로그 만들어보장!~ </div>