상단바 배경 넣기 / 상단바 색상 변경하기

  이번에 상단바가 추가되면서 흰색이라서 밋밋한 느낌을 받으시는 분들이 많으실 것이라 생각됩니다. 시험삼아 그냥 구름배경을 한번 저는 넣어봤는데, 이미지만 잘 고르면 나쁘지 않을 것이라 생각이 되네요. 간단한 수정이라서 굳이 강좌가 필요할까 싶지만, 스킨 수정에 어려움을 겪는 분들을 위해 준비해보았습니다.

1. 이미지 고르기 / 혹은 색상 선택하기

  이미지를 잘 선택해야 합니다. 너무 어두우면 메뉴바에 있는 글씨들이 보이지 않겠죠. 또한 좌우 해상도도 어느정도(1920px는 나와야..)있어야 다른 큰 모니터에서 봤을 때 이미지 반복이 안되어 이상해지지 않습니다. 이제 이 이미지를 받아서 포토샵이나 그림판 등으로 적당한 사이즈로 자르셔야 하는데, 권장하는 사이즈는 높이 130px에 좌우 1920px입니다. 이렇게하면 상단바 영역을 가득 채우게 됩니다. 좀 커도 브라우저에서 알아서 잘라서 처리하니 너무 딱 맞추실 필요는 없구요..

  단순히 색상으로 채우실 분들은 검색엔진 등에서 HTML Color로 검색하시면 될 겁니다. 이렇게 찾아보시면 #AABBCC 형식으로 된 코드를 얻으실 수 있는데, 이제 이것을 가지고 꾸미면 됩니다.

2. 이미지 업로드 / 경로 얻기

  이미지를 업로드 하기 위해 티스토리 관리자모드로 들어갑니다.

  추가버튼으로 업로드 해주시고,

  업로드한 이미지를 누르셔서 이미지 URL 복사(크롬의 경우), 혹은 익스플로러 같은 경우 우클릭 후 속성에 들어가시면 이미지 주소가 나옵니다. 다른 브라우저에서도 어떤 방식이든지 URL을 얻어올 수 있는 방법이 있으니 우클릭해보시면 찾으실 수 있습니다.

3. CSS 수정

  style.css에 다음과 같이 추가해줍니다.

	
#desktopNav {
  background: url(http://cfs.tistory.com/custom/blog/161/1613108/skin/images/cloud.jpg?=7475857820.47036068071611226);
} 
	

  url(aaa)에서 안에 들어가는 aaa는 위에서 복사한 주소를 의미합니다. 이렇게 주소를 얻으신 후에 넣어주시면 됩니다.

  배경 색상을 적용하고자 하는 경우에는 다음과 같이 합니다.

	
#desktopNav {
  background-color: #aabbcc;
} 
	

  추가적으로 투명도를 주고 싶으신 분들은 아래와 같이 추가합니다.

	
#desktopNav {
  background-color: #aabbcc;
  opacity: 0.9;
}  
	

  이미지든 컬러로 하든 opacity 속성을 통해 투명도를 줄 수 있습니다.

  이미지 로딩 실패에 대비해, 이미지와 원하는 컬러를 같이 넣으실 수도 있습니다.

	
#desktopNav {
  background: #aabbcc url(http://cfs.tistory.com/custom/blog/161/1613108/skin/images/cloud.jpg?=7475857820.47036068071611226) top center;
} 
	

  뒤쪽에 붙은 top center는 이미지 크기가 모니터에 출력되는 것을 넘어갈 경우 보여주는 위치를 선택하는 것입니다. 없으면 좌상단기준으로 이미지가 보이고, 저렇게 조정하면 이미지가 어느 위치가 보일 것인지 지정할 수 있습니다.