[TISTORY] 북클럽 스킨(BOOK CLUB) 에서 프로모션을 이용해, 프로필 영역 만들기

 

안녕하세요 오묘v입니다. 이번 포스팅에서는 북클럽 스킨의 좌측에 프로필 영역을 만들어 보려고 합니다.

북클럽스킨은, 책을 홍보하는 용도로, 프로모션 영역을 제공하는데요, 이것을 이용할 것입니다.

① 프로모션 영역 설정 ② HTML 수정 ③ CSS 수정 이렇게

총 3가지 파트로 나뉘는데, 차근차근 따라오시면 그렇게 어렵지 않을거예요

 

<BEFORE>

 

 

<AFTER>

 

---

#1 프로모션 영역 설정하기

꾸미기에서, 스킨편집으로 들어갑니다.

 

 

쭉 내리다 보면 홈프로모션1 이라는 영역이 보일텐데,

프로모션1 - 이미지 파트에, 프로필로 쓸 사진을 넣어주세요.

마지막으로 우측 상단의 검정색 적용버튼 까지 눌러주시면,

 

 

이렇게 사진이 들어가긴 하는데, 너무 큼지막하게 들어갑니다. 이제 HTML 편집을 이용해, 저 위치를 바꿔볼거예요

 

---

#2 HTML 편집하기

 

 

스킨 편집에서 html 편집으로 들어갑시다.

그리고 (Ctrl+F) 검색하기 기능을 이용해, 'promotion-1-image'를 검색해주세요.

(단, 저와 라인이 다를 수 있습니다.)

 

 

제가 파란색으로 드래그한 부분을 모두 지워주세요.

 

 

깔끔하게 지워졌네요 ㅎㅎ 그리고 적용 누르는것도 잊지마세요

 

다음으로 'id="aside" 라고 검색합니다.

 

 

이제 제가 노란색으로 칠한부분에 다음 코드를 복붙해주세요.

 

<s_sidebar_element>
  <div class="profileBox">
    <ul>
      <li style="background-image: url();" />
    </ul>
  </div>
</s_sidebar_element>

 

하지만 여전히 바뀐것은 없을거예요.

마지막 단계입니다! CSS를 수정해서, 실제로 보여지는 부분을 수정해줄거예요

---

#3 CSS 편집하기

CSS 편집으로 들어가서, 검색기능으로 '#aside'를 검색해줍니다.

 

노란색 부분에 다음 코드를 복붙해주세요.

#aside .sidebar-1 .profileBox ul li {
	max-height: 260px;
	max-width: 260px;
	height: 22.296296296296296vw;
	width: 22.296296296296296vw;
	background-size: cover;
	background-position: center;
}

 

이제 마지막이에요. '@media screen and (max-width:767px)' 를 검색 하고 마찬가지로, 바로 아래에 다음 코드를 복붙해 줍니다.

 

 

#aside .sidebar-1 .profileBox ul li {
	width: 100%;
}

width는 취향대로 조절해 주시면 됩니다

이제 적용하시면,

 

 

 

이렇게 바뀌었습니다.!

지금까지 따라오시느냐고 수고하셨습니다. ㅎㅎ