본문으로 바로가기

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

로딩중..
2016. 3. 20. 14:37

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

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


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


우선 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;} 이렇게

60px70px로 늘려줍니다.

 확장 메뉴의 여백설정을 해주는 것입니다. 이것도 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 부터.. #sidebarpadding-top값까지

수정을 해줘야하는데.. 아.. 이부분은 진짜 노코멘트하겠습니다. 여기까지 수정하는 것은 권장 안합니다.

어차피 익플8은 앞으로 사라져야할 브라우저이고.. 

지금도 2015년 후반기기준으로 약 7~15%정도가 익플8을 사용한다고 추정하는데..

이제는 신경 쓰지 않아도 된다고 생각합니다.


암튼 구형IE부분은 여기까지할 수 있는 것을 알고만 넘어가도 될 것 같습니다.

저는 그냥 경고문구를 집어넣으면서 살짝 수정은 해줬습니다.

http://cocosoft.kr/366 - 구형 IE 익스플로러 브라우저 경고 문구 넣기(IE 조건부 주석)(구형익플에서만보임)

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

PC 화면에서 늘리기를 할때는 @media (min-width: 992px) 안에 있는 속성 바꿔주었다면


모바일 화면을 설정할 때는 절대로 절대로 @media 쿼리 안에 있는 속성을 바꿔주면 안됩니다.

따로 (max-width: 400px) @미디어쿼리 조건을 부여해서 수정할 수도 있지만..

암튼 CCZ-CROSS 기본 상태에서 수정하는 방법을 다루겠습니다. 마찬가지로 style.css에서 작업을 해줍니다.


첫 번째로 #site-header{...;line-height: 50px;...}40px로 줄여줍니다.


두 번째로 .icon-navbar { height: 50px;}40px로 줄여줍니다.

이 부분은 개인의 취향대로 width:50px도 40px로 줄여줘도 상관은 없습니다.

우측 상단 확장메뉴 아이콘의 크기를 줄여 주는 것입니다.


마지막 #main-inner{padding-top: 51px;} 이부분을 41px로 줄여줍니다.

모바일 본문영역의 여백을 설정 해주는 것입니다.




끝입니다. 


모바일에서는 사이트헤더 부분에 영향을 주는 부분이 많이 없죠??

사이드바도 없고 확장메뉴와 검색도 따로 보여지니 말이죠.

결론 - 마무리

사이트 헤더 상단 하나의 높이를 조절하는데도 이렇게 많은 코드를 수정 해야합니다.

#site-header 하나만 수정을 할 수 도 있겠지만


관련된 부분의 여백을 전부 수정하는 작업을 하는 것을 권장합니다.

이렇게 한 번하고 나면 먼저 사이트의 구조가 쉽게 보이며!

앞으로도 꾸미기를 할 때 여백조절에 대한 이해가 매우 높아집니다.


힘들지만 하나씩 수정하고 완성이 되었을 때는!! 한단계 웹언어 이해에 대해서 발전한 자신의 모습을!!

볼 수 있을 것이라고 기대합니다. +_+