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

Posted by Readiz
2014.05.09 13:33 반응형 티스토리/FastBoot




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



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는 이미지 크기가 모니터에 출력되는 것을 넘어갈 경우 보여주는 위치를 선택하는 것입니다. 없으면 좌상단기준으로 이미지가 보이고, 저렇게 조정하면 이미지가 어느 위치가 보일 것인지 지정할 수 있습니다.

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 요즘엔 QHD 모니터도 나오고 있어요^^;
    혹시 모르니 컬러와 위치 지정도 같이 해주면 좋을거 같네요.

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

    그리고 이미지 경로는 (./images/cloud.jpg) 이렇게 넣어도 나오더라구요^^
    • 그렇네요~ 본문 추가하겠습니다.
      맞아요 style.css에서는 ./images/ 로 해도 알아서 변경 되드라구요~
      제가 오히려 배우고 갑니다.. ^^
  2. 이미지를 넣는경우 축소될 시점을 스크롤 40픽셀(고정되었을때 상단바가 top -40px이므로)로하면 이미지는 움직이지 않게할수있네요
    세컨네비는 확올라오는 느낌이 있지만 본문은 같이안올라오독 수정해주셔서 40픽셀로하는쪽이 더 부드러운것 같습니다
    • 음.. 그렇군요...
      지금 또 보고 있는것은 아예 상단바를 좀 투명도를 주고, 전체적으로 깔려있는 회색 배경을 이미지로 하는 것도 나쁘지 않은 것 같아요.
    • 블로그 제목맞춘다고 계란을 넣었더니 요리블로그같아졌네요..ㅋㅋ
      제가 직접 디자인만하면 영... 이상해집니다 ㅜㅜ
      그런데 세컨네비에 투명도를 주니 가운데 점이생기는데 저건 뭘까요.. 이미지에있는건 아닌데..
    • 진짜 요리블로그 같네요 (..;)
      이참에 요리블로그로 만드시는건..
      점은 저도 왜생기는지는 모르겠는데,
      #secondNav>ul>li {height:32px;color:#434A54;background-color:transparent;}
      색상 바꾸는거면 여기서 색상을 바꾸면 색상이 맞춰지기는 합니다.
      크롬 개발자도구로 봐도 점 생기는 이유를 모르겠어요.
    • 저도 점이 하나 떴었는데 원본파일로 갈아엎고 하니까 또 되네요 ...
  3. 잘보고가요
    잘응용하면 다른부분도 이쁘게 할수있을꺼같네요 ㅎㅎ
  4. 세컨네비바를 뭐하라님 블로그같이 투명도를 줘서 데스크톱 바랑 일체화해도 나쁘지 않을것 같습니다.
  5. 데스크톱 메뉴바에 배경을 넣으신분들 보니... 대부분 이미지 파일을 사용하셨네요... 역시 이미지 파일을 넣는 것이 가장 좋으려나요?? ㅎㅎ 저는 아직 무엇도 손대지 못한 상태로 걍 백지상태로 두고 있는데.... 고민좀 더 해봐야겠네요 ㅋ 욕심만 많아져서 ... 그런거 같네요 .

    저는 우주 풍경의 배경에다가,,, 별들이 깜빡이는 효과가 있는 배경을 넣고 싶은데, 이거를 그라디언트와 애니메이션 효과로 적용하려고 하니, 머리만 아파지네요 ㅋ

    저도 걍 적당한 이미지 파일 구해서 .... 배경을 이미지로 해야 될려나봐요
  6. 세컨드 메뉴바에서 색상 변경시 쩜이 보이는 문제에 대해서 전에 누군가 리드이즈님 블로그에서 댓글로 남긴걸 봤는데,,, 어느 글에 남긴 댓글인지 찾을 수가 없네요 ㅜㅜ;

    그래서 저도 비슷한 증상에 대한 해결 방법 조언을 구하고자 댓글을 남겨 봅니다.

    https://api.monosnap.com/image/download?id=u1FeUXeNgXKikmRdorivhU7k7GfIKN

    위의 URL 은 세컨드 메뉴바를 그라디언트로 수정했을 때, 점이 보이는 현상을 캡쳐 한 이미지 파일이 있는 url 입니다.

    분명 전에 누군가 문의를 해서,, 리드이즈님이 답변 달아주신거 같은데.... 찾을 수가 없네요 ㅜㅜ;;

    그리고 그라디언트를 적용하려고 하니,,, 접두사를 붙혀줘야 하는 등의... 구버전 브라우저들을 신경써줘야 해서... 점점 더 이미지 파일로 배경을 지정하는 것에 대해서 고민중이네요 ㅜㅜ;;
    • #secondNav>ul>li {height:32px;color:#434A54;background-color:transparent;}
      이 부분이 style.css에 있을 것입니다. 이 부분을

      #secondNav>ul>li {height:32px;color:transparent;background-color:transparent;}
      이렇게 수정하세요. 저도 이제 알았네요 ^^;
    • 빠른 답변 감사합니다. ㅎㅎ 바로 적용 해야겠네요...

      그리고... 내용과는 다른 사항인데요.

      혹시 배경 이미지가, 날짜, 요일, 기념일 ... 과 같이 특정 날짜에 맞춰서 변경되도록 하는게 가능 할까요??

      가능하다면 자바스크립트로 되지 않을까 싶은데... 자바스크립트로도 가능한 요소라면 한번 연구좀 해보려고요 ㅎㅎ 클스마스, 설날, 기타등등 기념일에 맞춰서 배경 이미지를 지정 해놓고, 자동으로 변경되도록 하면 편하고 유용하게 사용할 수 있을거 같네요 ㅋ
    • 됩니다. ㅋㅋ
      메인화면에서 티에디션 없이 표현하는 것처럼, 날짜 인식해서 CSS싹 바꿔버리면 됩니다.
    • 가능한거였군요. ㅎㅎ 천천히 관련 자바스크립트좀 뜯어보고 연구 해봐야겠습니다. 알려 주셔서 감사합니다 ^^ 즐건 주말되세요
    • 2014.05.11 21:59
    비밀댓글입니다
    • RSS 발행을 하고 계신지 확인하시구요, 글을 쓰실 때도 '발행' 으로 하셔야 합니다.
      블로그주소/rss 로 들어가시면 (ex: http://blog.readiz.com/rss) 현재 글이 발행중인지 알 수 있습니다. 여기에 글이 뜨면 FastBoot 메인에도 똑같이 뜹니다.
    • 이미발행은하고있었습니다만... rss발행이란것은 어떻게보통 뜨는지 알려주실수있으실까요? 죄송합니다.
    • 설정 들어가보세요..
      지금 확인하니까 뜨네요. 아깐 발행 안되고 있었습니다.
    • 알려주셔서 감사합니다. 이제된거 확인했네요. ㅎㅎ
  7. 블로그 스킨 감사히 쓰고 있어요. ^^그런데 새로 작성한 글들이 메인화면에 적용되려면 원래 시간이 좀 걸리는 건가요. rss 등록 되어있고 글 쓸 때도 발행으로 설정해 놓았는데요.새로 글 작성하고 나서 메인화면으로 가면 글이 시간을 두고 적용되는 것 같아서요. 아직 초보라서 궁금한 것이 많네요.
    • 브라우저 캐싱 때문입니다. 다른 컴이나 다른브라우저에서 확인해보세요.
  8. http편집들어가서 제가 style부분에 #desktopNav {
    background: url(http://cfs.tistory.com/custom/blog/161/1613108/skin/images/cloud.jpg?=7475857820.47036068071611226);
    } 를 직접추가해야하는건가요? url은제가따로넣구?
    • style.css에 추가하시면 됩니다..
      url은 위 글 참조하시구요..
  9. 혹시 모바일 상단바(?) 배경 색상은 어떻게 변경하지요??
    • 모바일 상단바는 이전버전과 동일하게 수정하시면 됩니다.
      .navbar-inverse {
      background-color: #xxxxxx;
      }
  10. 안녕하세요! 스킨 잘 사용하고있습니다. 데스크탑 내비 배경에 투명도를 주니 글씨까지 투명해지네요... 배경에만 투명도를 주는 방법이 없을까요? 그리고 로고를 을 떼고 로고 이미지로 넣어주니데스크탑 내비 크기가 readiz님이랑 달라졌네요... 더 작아졌습니다. 얇아졌다고 해야 하나...
  11. 블로그에 글 다시 올리면서 반응형 스킨 검색했다가 Readiz님의 FastBoot이 깔끔하고 예뻐서 적용해봤습니다. 단순하게 적용만 해놨다가 오늘 찬찬히 살펴보는 중인데, 살짝 밋밋해보일 수도 있던 상단바에 배경을 넣는게 이렇게 따로 글이 있었네요. 아직 맘에드는 배경사진이 없어서 그냥 색상만 봐꿔봤습니다 ^^

    올려주신 스킨을 잘 쓰고 있다는 인사를 어디서 해야할지 몰라서 여기다 합니다 ^^
    • 2015.06.25 16:33
    비밀댓글입니다

티스토리 툴바