HTML/CSS에서 블로그타이틀 이미지 설명 넣기

2011. 11. 18. 11:25컴퓨터/블로그 만들기

반응형
 

티스토리 블로그는 HTML/CSS을 폭 넓게 소스를 바꾸거나 다양한 광고를 적용하기에 알맞은 블로그 스킨입니다.
오늘은 HTML/CSS에서 블로그 타이틀이 이미지와 블로그메인 화면의 이미지에 설명을 넣는 방법을 알아 봅니다.

블로그 타이틀미지의 설명은 HTML/CSS소스보기에서 상황에 따라 알맞은 설명을 바꿀수 있기 때문에 블로그의 특징을 설명하거나 간략한 공지사항을 넣을 수도 있습니다.

주의 할점은 HTML/CSS소스를 적용하면서 반드시 스킨을 저장하고 블로그 이미지 설명 넣기등을 하여야 합니다.  HTML/CSS 소스는 저장 않고 적용된 소스를 적용하면 블로그를 되돌릴 수 없는 상황에 처하 기도 힙니다.

HTML/CSS에서 블로그타이틀 이미지 설명 넣기를 알아 봅니다.

1. HTML/CSS소스에서 <div class="blogTitle"> 아래 설명을 삽입합니다. 

</head>
<body>
<s_t3>
 <div id="wrapTop">
  <div class="tCenter"></div><div class="tRight"></div>
 </div>
 <div id="wrapMid">
  <div class="mRight">
   <div id="container">
    <div id="header">
     <div class="blogTitle">

2. 위 HTML/CSS소스의
<div class="blogTitle"> 아래에 같은 소스를 넣습니다. 

<a href="https://sjy8593.tistory.com/"><img src="./images/블.GIF" title="녹색주택 홈으로 갑니다.
카타고리는 드롭다운 메뉴에 있습니다.자원을 재활용하여 만든 에너지를 절감하는 친환경주택. 단열성이 우수, 결로현상이 없는 주택, 주거생활에 관한 일을 소개하는 블로그입니다
."></a>

위의 "블.GIF", "녹색주택 홈으로 갑니다.카타고리는 드롭다운 메뉴에 있습니다.자원을 재활용하여 만든 에너지를 절감하는 친환경주택. 단열성이 우수, 결로현상이 없는 주택, 주거생활에 관한 일을 소개하는 블로그입니다."는 자신의 블로그 타이틀이미지 파일과 블로그타이틀 설명이므로 본인의 블로그에 파일과 설명은 넣어야합니다.

3. 블로그 타이틀이미지 파일은 HTML/CSS소스 적용에서 CSS부분에 파일이 삽입되어 있어야 합니다. CSS의 Header 내에
 블.GIF 가 자기의 블로그타이틀 파일입니다. 파일 이름은 대문자 GIF,소문자 gif를 구분하므로 동일하게 적용하여야 합니다.  
 
참고 : CSS부분에 파일이 삽입 

 /* ***** Header ***** */
#header .blogTitle  {
 width:/*@post-width:290=*/975px/*@*/; height: /*@title-height=*/88px/*@*/;
 background: /*@title-background-color=*/#FFFFFF/*@*/ /*

@title-background-image=*/url("images/블.GIF")/*@*/ /*

@title-background-image-repeat=*/no-repeat/*@*/ /*

@title-background-image-position=*/left bottom/*@*/;


4. 블로그타이틀 이미지는 미리 자신의 블로그 스킨에 맞게 제작하여 컴퓨터에 저장하여 HTML/CSS소스보기 옆의
"파일업로드"에서 파일의 추가하여 저장하여 놓습니다. 이때 파일이름이 HTML/CSS소스의 <div class="blogTitle"> 아래에 같은 소스에 적용된 파일과 일치하여야 합니다.

HTML/CSS에서 블로그타이틀 이미지는 스킨위자드에서 쉽게 넣을수 있는 방법도 있지만 블로그타이틀 이미지에 설명을 넣는 것에 대하여 살펴보았습니다. 저의 블로그타이을 위주로 말씀드렸으나 블로그마다 스킨이 다르기 때문에 주의하시기 바라면서 반드시 스킨을 저장하시고 적용하시면 좋겠습니다.

 

 HTML/CSS을 폭 넓게 소스를 바꾸거나 다양한 광고를 적용하기에 알맞은 블로그 스킨입니다.

 
블로그메인 화면의 이미지에 설명도 마우스를 대면 나타납니다.


 이미지 설명이 마우스를 대면 나타납니다.


 
블로그메인 화면의 이미지에 글 제목이 마우스를 대면 나타납니다.


 HTML/CSS소스에서
<div class="blogTitle"> 아래 설명을 삽입합니다. 
<a href="https://sjy8593.tistory.com/"><img src="./images/블.GIF" title="녹색주택 홈으로 갑니다.
카타고리는 드롭다운 메뉴에 있습니다.자원을 재활용하여 만든 에너지를 절감하는 친환경주택. 단열성이 우수, 결로현상이 없는 주택, 주거생활에 관한 일을 소개하는 블로그입니다
."></a>


블로그 타이틀이미지 파일은 HTML/CSS소스 적용에서 CSS부분에 파일이 삽입되어 있어야 합니다. CSS의 Header 내에
 
블.GIF
가 자기의 블로그타이틀 파일입니다. 파일 이름은 대문자 GIF,소문자 gif를 구분하므로 동일하게 적용하여야 합니다.   


HTML/CSS소스보기 옆의
"파일업로드"에서 파일의 추가하여 저장하여 놓습니다. 이때 파일이름이 HTML/CSS소스의
<div class="blogTitle"> 아래에 같은 소스에 적용된 파일과 일치하여야 합니다. 





반응형