Customize
헤더에 이미지 넣는 방법
Ungki, H
2010. 11. 6. 02:29
답변이 많이 늦어져서 죄송합니다.
헤더 부분 전체에 이미지를 넣는 방법은 간단합니다. 배포된 스킨의 전체 가로 사이즈가 800px입니다. 즉 이미지 가로 사이즈도 800px로 맞춰 제작하시면 됩니다.
먼저 html/css편집 메뉴의 html에 해당하는 창에서 <!-- header -->라고 표시된 부분을 찾으신 후 header-alpha와 header-beta로 되어 있는 부분은 싹 지우시면 됩니다. 그리고 이미지 링크를 해주면 되겠지요. 아래와 같습니다.
지우시면 되는 부분
이미지 링크를 보시면 "./image/...jpg" 처럼 되어있는데요. html/css편집 메뉴의 오른쪽에 이미지 업로드 하는 곳이 있습니다. 스킨에 해당되는 이미지를 업로드하실 수 있습니다.
옆의 width="800px"는 옵션입니다. ^^ 이미지 사이즈가 800px라면 없어도 됩니다. 다만 사이즈가 조금 작을 경우 가로로 강제적으로 800px로 늘려라 하는 html 사용방법입니다.
만약 헤더의 전체에 큰 이미지를 넣는게 아니라 텍스트로 블로그 명칭은 그대로 두되, alpha 영역에만 이미지를 넣고 싶다면 <!-- header-alpha --> 부분의 <p>.</p> 대신에 <img src="./image/...jpg" /> 헤더 이미지 링크로 변경해주시면 됩니다. alpha 영역의 사이즈는 560px로 설정되어 있습니다.
또한 이미지를 누르면 블로그 홈으로 링크를 걸고 싶으시다면 다음과 같이 하시면 됩니다.
<a href="http://your-site.com"><img src="./image/...jpg" /></a>
주의하실 점은 header-alpha는 css에 visibility:hidden; 속성을 넣어두었습니다. header-beta에는 블로그 명칭이 출력되지만 alpha에는 무엇을 하든 감추어지는 속성이지요. 때문에 html/css편집 메뉴의 style.css에서 아래와 같이 #header-alpha-inner { ... } 부분을 찾으세요.
그리고 visibillity:hidden; 을 삭제하시면 됩니다.
^^
헤더 부분 전체에 이미지를 넣는 방법은 간단합니다. 배포된 스킨의 전체 가로 사이즈가 800px입니다. 즉 이미지 가로 사이즈도 800px로 맞춰 제작하시면 됩니다.
먼저 html/css편집 메뉴의 html에 해당하는 창에서 <!-- header -->라고 표시된 부분을 찾으신 후 header-alpha와 header-beta로 되어 있는 부분은 싹 지우시면 됩니다. 그리고 이미지 링크를 해주면 되겠지요. 아래와 같습니다.
<!-- header -->
<div id="header">
<div id="header-inner">
<img src="./image/lifeisfun.jpg" width="800px" />
</div>
</div>
지우시면 되는 부분
이미지 링크를 보시면 "./image/...jpg" 처럼 되어있는데요. html/css편집 메뉴의 오른쪽에 이미지 업로드 하는 곳이 있습니다. 스킨에 해당되는 이미지를 업로드하실 수 있습니다.
옆의 width="800px"는 옵션입니다. ^^ 이미지 사이즈가 800px라면 없어도 됩니다. 다만 사이즈가 조금 작을 경우 가로로 강제적으로 800px로 늘려라 하는 html 사용방법입니다.
만약 헤더의 전체에 큰 이미지를 넣는게 아니라 텍스트로 블로그 명칭은 그대로 두되, alpha 영역에만 이미지를 넣고 싶다면 <!-- header-alpha --> 부분의 <p>.</p> 대신에 <img src="./image/...jpg" /> 헤더 이미지 링크로 변경해주시면 됩니다. alpha 영역의 사이즈는 560px로 설정되어 있습니다.
또한 이미지를 누르면 블로그 홈으로 링크를 걸고 싶으시다면 다음과 같이 하시면 됩니다.
<a href="http://your-site.com"><img src="./image/...jpg" /></a>
주의하실 점은 header-alpha는 css에 visibility:hidden; 속성을 넣어두었습니다. header-beta에는 블로그 명칭이 출력되지만 alpha에는 무엇을 하든 감추어지는 속성이지요. 때문에 html/css편집 메뉴의 style.css에서 아래와 같이 #header-alpha-inner { ... } 부분을 찾으세요.
#header-alpha-inner {
width:560px;
visibility:hidden;
}
그리고 visibillity:hidden; 을 삭제하시면 됩니다.
^^