동적뷰 타이틀에 이미지 삽입하기 #2

그림1

지난번에 동적뷰 타이틀에 이미지를 삽입하는 방법에 대해서 제가 두가지 방법을 알고 있다고 말씀을 드리면서, 첫번째 방법을 알려드렸습니다.

동적뷰 타이틀에 이미지 삽입하기 #1

오늘은 두번째 방법입니다. 첫번째 방법은 코드 수정을 거의 필요로 하지 않는 대신 원하는 크기의 이미지를 올릴 수는 없었습니다. 오늘 소개하는 방법을 이용하면, 원하는 크기의 이미지를 올릴 수 있습니다.


코드의 출처는 해외 블로거 +Yogaratnam N. 님의 블로그 southernspeakers 입니다. 참고로, 저는 아래의 코드가 어떻게 작동하는지 100% 이해하고 있지는 못합니다. 그러나, 따라하기가 어렵지는 않습니다.

1:  #header .header-drawer.sticky, #header .header-drawer {  
2:  top: 134px;  
3:  }  
4:      
5:  #header .header-bar{  
6:  height: 165px;  
7:  }  
8:      
9:  #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {  
10:  top: 165px;  
11:  }  
12:      
13:  #header-container {  
14:  height: 205px;  
15:  }  
16:      
17:  .viewitem-panel .viewitem-inner {  
18:  top: 100px;  
19:  padding-bottom: 120px !important;  
20:  height: auto !important;  
21:  }  
22:      
23:  #header-container #header.header .header-bar span.title{  
24:  background: url(이미지 주소)  
25:  no-repeat center;  
26:  margin-left: auto !important;  
27:  margin-right: auto !important;  
28:  height: 165px;  
29:  }  

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS 추가] 입니다. (복사하실 때 코드 왼쪽의 숫자 행 표시는 삭제하시기 바랍니다.)

코드를 삽입할 때는 자신이 삽입하고자 하는 이미지의 높이(height)에 맞게 코드를 약간 수정해주어야 합니다. 위의 코드에서 헤더 이미지의 높이를 가리키는 수치는 165px입니다. 그리고, 하이라이트 된 부분, 즉 2행, 6행, 10행, 14행, 18행, 28행의 134px, 165px, 205px, 100px 은 각각 같은 간격으로 움직이는 수치입니다. (10px을 늘리고 싶다면, 똑같이 10px을 더해주면 됩니다.)

예를 들어, 자신이 삽입하고자하는 이미지의 높이가 200px 이라면, 165px 대신 200px을 입력하고, 증가한 35px 만큼을 나머지 134px, 205px, 100px에도 그대로 더해줍니다. 그러면, 169px, 200px, 240px, 135px 이 되겠죠.


한번 더 예를 들어보겠습니다.

그림2

<그림2>의 이미지를 헤더에 삽입한다고 가정해보겠습니다. <그림2>는 URL이 "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUMSW7E_x7ql1n1lQvIlEGzbfc4p6dfNE1gUjo_OBC9koV9mbJ2bgXh99lxq50NM3eMm02e6WmcR3obgVlQkFC1SWzlM4HGAsLghOBk4YVjZWRseC9AnTARElJQ_fMSbdIWa2JiemrMoo/s1600/407x300.png" 이고, 높이가 300px인 이미지입니다. <그림2>의 이미지를 헤더에 삽입한다면 코드는 아래와 같은 모습이 될 것입니다.

1:  #header .header-drawer.sticky, #header .header-drawer {  
2:  top: 269px;  
3:  }  
4:      
5:  #header .header-bar{  
6:  height: 300px;  
7:  }  
8:      
9:  #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {  
10:  top: 300px;  
11:  }  
12:      
13:  #header-container {  
14:  height: 340px;  
15:  }  
16:      
17:  .viewitem-panel .viewitem-inner {  
18:  top: 235px;  
19:  padding-bottom: 120px !important;  
20:  height: auto !important;  
21:  }  
22:      
23:  #header-container #header.header .header-bar span.title{  
24:  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUMSW7E_x7ql1n1lQvIlEGzbfc4p6dfNE1gUjo_OBC9koV9mbJ2bgXh99lxq50NM3eMm02e6WmcR3obgVlQkFC1SWzlM4HGAsLghOBk4YVjZWRseC9AnTARElJQ_fMSbdIWa2JiemrMoo/s1600/407x300.png)  
25:  no-repeat center;  
26:  margin-left: auto !important;  
27:  margin-right: auto !important;  
28:  height: 300px;  
29:  }