본문 바로가기
카테고리 없음

푸라치노 공간 메뉴 색 변경하기!

by 메인머니 2017. 5. 30.

현재 제 블로그에는 프라치노 공간 스킨을 적용하고 있습니다.

심플한 스킨이 너무 마음에 들어 골랐고, 현재도 너무 마음에 들어요!!

 

근대 다른 사람들은 스킨 메뉴 색도 바꾸고, 이미지도 넣고 멋지게 꾸미고 있네요!

오늘은 새해를 맞이하여 블로그 메뉴 색을 변경해보려고 합니다!!

워낙 스킨이 잘만들어져 있어서 어렵지 않아요~!

 

 

 ☞ CSS 편집을 통한 배경색 변경

1. 16진수 코드색 확인하기

우선 적용하고자 하는 색을 16진수 코드로 알아야 합니다!

HTML Color Code 사이트 바로가기 (http://html-color-codes.info/)

 

 

2. CSS 편집! 적용하기

"음.. 이번에 메뉴 색은 민트색으로 그라데이션을 90도 방향으로 살짝 주고 싶어!"

이 말을 CSS어로 편집하면 아래와 같아요. 사실 적용하기 전까지는 결과가 어떻게 나올지 알 수 없어요~! 

 /* 데스크탑 모드의 Jacket */

 

.jacket-cover.desktop {


 background: linear-gradient(90deg, #DEFDFF, #3B8486)


}

 

 

3. 적용 후 확인하기


짜잔~! 메뉴 색이 상큼하게 바뀌었어요!! ㅋㅋㅋ

자 이참에 메뉴에 이미지 삽입도 시도해봅시다~!!!

 

 

 

 ☞ CSS 편집을 통한 배경 이미지 삽입

 

1. 배경 이미지 업로드

파일업로드를 누르고, +추가를 클릭하여 넣고자 하는 이미지를 업로드 합니다.

그리고 나서 업로드된 이미지 파일에서 마우스 우클릭하여 URL 주소를 확인하고 복사합니다!


 

 

2. CSS 편집! 적용하기

"음.. 이번에 이미지를 맨위서부터 반복해서 삽입해줘!"

제가 편집한 CSS는 아래와 같아요~! 조금 전에 복사한 URL 주소 넣는 것 잊지마시고~! 

 /* 데스크탑 모드의 Jacket */

 

  background-image: url(http://tistory4.daumcdn.net/tistory/1771554/skin/images/background-1941103_640.jpg);
  background-position: top;
  background-repeat: repeat;
  padding: 2px;

}

 

 

3. 적용 후 확인하기

 

하핫 메뉴에 이미지가 적용되었습니다!

그러나 제가 이미지를 고르는 센스는 실패인듯 합니다.

블로그에 변화가 필요한 순간이 오면,

나중에 다시 한번 시도해보는 걸로 하고..

다시 이전에 적용한 민트색으로 바꿔야겠네요!

 

 

 

잡담 | 스스로에 대한 채찍질

 

4월 초에 글 작성을 하다가 비로서 마무리를 짓는

이상. Lazy Koala 였습니다. ㅠ_ㅜ

6월부터는 다시 주식 공부도하고, 강의도 듣고, 운동도 하고

블로그 글도 지금보다는 자주 작성하도록 노력하도록~!

 

 

 

 

 

 

 

 

 

포스팅을 끝까지 읽어주셔서 감사합니다~!

유익한 내용이라고 생각하신다면,

"비타민" 같은 "공감" "댓글" 부탁드려요~