CCZ-CROSS 스킨 상단 site-header 높이 조절하기

예전에 꾸미기 상단헤더 꾸미기 관련해서 간단하게 소개한 적이 있는데 본격적으로

상단 헤더 부분을 수정하는 방법에 대해서 알아보겠습니다.

그중 가장 하이라이트!! 상단 헤더부분의 높이를 변경하는 방법에 대해서 소개해보겠습니다.

우선 CCZ-CROSS 스킨의 site-header 기본 높이는 40px 모바일은 50px 입니다.

모바일화면에서는 적당하지만 PC 화면에서는 조금 작다고 생각되어서 늘려보도록 하겠습니다.

반응형웹이라서 생각보다 조절해야하는 부분이 많아서 잘보고 따라오셔야합니다!!

#1 site-header PC화면 40px →50px 으로 늘리기 (바로가기)

#2 모바일 화면 50px → 40px로 줄이기 (바로가기)

본격적으로 시작해보자

#0 인트로 - 사전 지식

반응형웹페이지에서 PC화면과 모바일 화면의 구분은 @media 쿼리를 이용해서 구분 됩니다.

style.css부분에 #site-header{} 과 @media (min-width: 992px) {#site-header{}}

2개의 스타일이 있다면 오른쪽은 화면해상도가 최소992px 이상 일 때만 적용되게 됩니다.

예를들어보죠

style.css 입력스타일

#site-header { 
   width: 100%;
   line-height: 50px;
   background-color: rgba(255,255,255,.9); 
} 
@media (min-width: 992px) {
 #site-header {
   line-height: 40px;
   background-color: #333;
 } 
}

해상도992px 이상의 PC화면일 때 적용 스타일

  #site-header {
   width: 100%;
   line-height: 50px;
   background-color: rgba(255,255,255,.9); 
  } 
  @media (min-width: 992px) {
   #site-header {
    line-height: 40px;
    background-color: #333;
   } 
  }

해상도 992px이하인 모바일or태블릿일 때 적용 스타일

  #site-header {
   width: 100%;
   line-height: 50px;
   background-color: rgba(255,255,255,.9); 
  } 

이렇게 보듯이 같은 CSS속성이어도 @미디어쿼리로 구분을 해놓으면

해상도에 따라서 적용되는 스타일이 달라지게 됩니다.

중복되지 않는 스타일속성은 그대로 상속되는 것을 알고 시작하면 좋습니다.

#1 site-header PC화면 40px →50px로 늘리기

첫 번째로 @media (min-width: 992px) {#site-header{...;line-height: 40px;...}} 부분을 찾아서

@media (min-width: 992px) {#site-header{...;line-height: 50px;...}} 이렇게 40px에서 50px로 수정해줍니다.

스킨 설치 후 기본 사용자 분이라면 style.css 128번째 줄에 위치해 있습니다.

그리고 #expand-menu .scrollable {padding: 60px 30px 90px;} 이부분을 찾아서

#expand-menu .scrollable {padding: 70px 30px 90px;} 이렇게

60px을 70px로 늘려줍니다.

확장 메뉴의 여백설정을 해주는 것입니다. 이것도 2개가 있습니다.

꼭@media (min-width: 992px)안의 코드를 수정 해야 합니다.

그리고 #tt-search { margin-top: 40px; ... } 을 찾아서 50px로 늘려줍니다.

검색창의 여백을 수정 해줘야 합니다.

이것도 꼭@media (min-width: 992px)안의 코드를 수정 해야 합니다.

그리고 #main-inner { ...; padding-top:40px; ... } 을 찾아서 50px로 늘려줍니다.

메인 본문 영역의 여백을 수정 하는 것입니다.

이것도 물론 꼭@media (min-width: 992px)안의 코드를 수정 해야 합니다.

여기까지 왔는데 미디어쿼리 안에 수정안하면 정말 화낼거임

그리고 마지막 #sidebar { ...; padding-top: 15px;} 찾아서 25px로 늘려줍니다.

사이드바 여백 수정 하는 것

물론 이것도 알죠??

끝입니다. 어때요? 쉽죠?..생각보다 많이 손이 가는 작업입니다.

누누이 말하지만 #sidebar 같은 동일속성명이 여러개가 있을 거에요?!!

근데 꼭 @media (min-width: 992px) 안에 있는 속성을 수정해야지

다른거 수정하고 안된다고 하면 절대로 답변안합니다.

40px에서 50px로 매우 작은 수치를 늘리는 것이기 때문에 site-header 부분만 늘려만 줘도 별 문제 없이 보일 수는 있지만

연관된 부분의 여백 설정도 미리 잘해두어야지 계속 꾸미기를 할 때 문제 없이 할 수 있다고 생각합니다.

혹시나 속성이 잘못 틀어졌을 때도 문제 되는 부분을 쉽게 찾을 수 있구요.

여백이 하나 둘 문제가 쌓이다 보면 전체적으로 큰 문제가 발생할 수 있기에

여백 부분도 따라서 수정하는 것을 권장합니다.

자.. 끝난줄 알았쮸??

CCZ-CROSS스킨은.. 브라우징 크로스 스킨이기 때문에 구형 익스플로러(IE8이하)도 셋팅을 해줘야합니다..
old.css 파일을 다운로드받아서 메모장으로 열어준다음.. 위와 똑같이.. #site-header 부터.. #sidebar의 padding-top값까지
수정을 해줘야하는데.. 아.. 이부분은 진짜 노코멘트하겠습니다. 여기까지 수정하는 것은 권장 안합니다.
어차피 익플8은 앞으로 사라져야할 브라우저이고.. 
지금도 2015년 후반기기준으로 약 7~15%정도가 익플8을 사용한다고 추정하는데..
이제는 신경 쓰지 않아도 된다고 생각합니다.