• 모바일 배너

  아래 부분에서 변경 -> 대략 800x400 정도가 적당

  

• 레이아웃의 구조 변경하기

  

배경 이미지 넣기

배경 이미지 만들기

배경 이미지를 넣기 위해선 우선 배경 이미지를 만들어야 함

1. 가이드 라인 영역 잡기 ( 포토샵 사용 )

   
   • 프롤로그 왼쪽이 시작지점
   • 아래 아이콘 오른쪽이 끝지점
     
   • 모니터 해상도가 큰 상황을 대비하기 위해서 배경 이미지의 가로 전체 크기는 1920으로 잡을 것
     ( 세로는 디자인에 맞게 )

---

어우 다쓰기 힘들다 그냥 방법만 써야겠네

구성한 배너 블로그에 적용하기

타이틀 영역 높이 설정

--> 배너에서 로고 부분의 높이 픽셀을 확인하여 여기를 설정해주면 됨

--> 혹은 투명 위젯이 너무 아래로 내려가 있다면 여기서 조정하면 됨

---

투명 위젯

투명 위젯 추가 및 투명 위젯에 코드 넣기

위젯 투명하게 만들기

• 이미지 경로 주소:

  1. 포토샵에서 메뉴 크기에 맞게 투명 이미지를 구성해서 내보냄

  2. 그걸 비공개로 블로그 포스터에 올림

  3. 올린 이미지의 속성을 확인 -> 서버에 올라간 이미지의 절대주소를 따서 이미지 경로주소라고 함

     ( 위치를 확인하기 위해서 검은색으로 먼저 확인해볼 수 도 있음 )

• 투명 위젯에 html 문법 삽입

  <img src= "이미지 경로주소 " />

  링크 걸기

• 링크 알아내기

  1. 이동할 링크를 브라우저로 띄움 ( 일반적으로는 메뉴 )
  2. 브라우저에서 우클릭 -> 속성
  3. 거기에 해당 링크의 url이 있음

• 링크를 거는 방법은 2가지

  1. 내부 링크 -> 자신의 블로그 자체 내에서 페이지 이동 ( 이미지맵 이용 )
     --> 즉, 브라우저에서 새 페이지를 만들어서 이동하는 것이 아니라, 해당 페이지 내에서 이동하는 것

  2. 외부 링크 -> 타 사이트에 새창 열기

  • 외부링크걸기
    --> <a> 를 사용하여 링크 설정

    <a href = " 해당 이미지 클릭시 이동할 링크 주소 ">
    <img src ="이미지 경로주소"/>
    </a>

    • 위에서 투명 위젯에 img 태그 걸었던 것을 <a> 태그로 감싸서 링크 설정

  • 내부 링크 걸기
    --> <map> 를 사용하여 링크 설정

    <img src="이미지 경로주소" width="가로" height="세로" usemap="#mm1" border="0"/>
    <map name="mm1">
         <area shape="rect" coords="좌표" href="링크 주소" target="_top"/>
    </map>

    • <img> 태그의 가로 세로 사이즈는 "투명 위젯"의 가로세로 사이즈를 넣어주면 됨

    • <img> 태그에 usemap 속성을 통해 <map> 태그를 참조하여 설정

    • 아래에 <map> 태그 생성 ( 직사각형 모양, 좌표, 클릭시 이동할 링크 주소, 내부링크로 하겠다는 설정 )
      --> 각 투명 위젯의 <map> 태그의 이름은 각각 다르게 할 것 !
      ( 첫번째 투명위젯의 map은 mm1, 두번째 투명위젯의 map은 mm2 이런식 )

    • 내부 링크 예시 )

      <img src="이미지 경로주소" width="170px" height="50px" usemap="#mm1" border="0"/>
      <map name="mm1">
         <area shape="rect" coords="0,0,170,50" href="링크 주소" target="_top"/>
      </map>

    • <map> 태그에 들어가는 coords에 대한 설명

      • coords에 들어가는 매개변수는 ( x1, y1, x2, y2 )인데,
        <img> 태그 영역의 맨 왼쪽 위를 기준으로 해서 ( x1, y1 )만큼 떨어진 영역을 시작점으로 하여
        다시 <img> 태그 영역의 맨 왼쪽 위를 기준으로 ( x2, y2 )만큼의 영역을 끝점으로 하여
        <map> 태그를 통한 링크영역으로 할 것이란 얘기이다.
        ( 즉, 이 클릭 영역을 말하는 것 )

한 투명 위젯 안에서 다중 링크 걸기

• 내부 링크 걸기를 사용하여 다중 링크를 걸면 됨
  --> <map> 태그의 coords 부분을 조절하여 이미지 위치에 맞게 링크 위치 설정
  ( 이것을 한 투명 위젯 안에서 여러개 해놓으면 다중 링크가 되는 것임 )

---

공간 띄우기용 투명 위젯

--> 위의 투명 위젯 만드는 방식으로 공간 띄우면 됨

--> 단 위젯의 위치 조각을 크게 만들수는 없으므로
위에서 링크용 투명 위젯을 5개 만들었다면 공간 띄우기용 투명 위젯도 5개 만들어줘야 함

• 예시_)
  mm1, mm2, mm3, mm4, mm5 가 링크용 위젯이므로 아래에 공간을 띄워주기 위해
  br1, br2, br3, br4, br5 의 5개의 공간 띄우기용 위젯을 만들어줬음

  

공간 띄우기용 투명 위젯 만들기

• 두가지 방법이 있음

  1. <br> 태그 반복을 통해 구현 ( 약간 야매 )

  2. 테이블 소스를 통해 구현 ( 정식 방식 )

1. <br> 태그 반복을 통해 공간 띄우기용 투명 위젯 만드는 법

   

   • 투명 위젯의 코드에 <br> 태그를 사용하여 위젯을 높이를 키움
     --> 이를 통해 띄우는 크기 조절

2. 테이블 소스를 통해 공간 띄우기용 투명 위젯 만드는 법

   <table width="공간 띄우기용 투명 위젯 너비">
      <tbody>
        <tr>
          <td height="공간 띄우기용 투명 위젯 높이"></td>
        </tr>
      </tbody>
   </table>

   • 사용 예시

     <table width="170px">
        <tbody>
          <tr>
            <td height="500px"></td>
          </tr>
        </tbody>
     </table>