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%; } @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을 사용한다고 추정하는데..
이제는 신경 쓰지 않아도 된다고 생각합니다.
암튼 구형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 하나만 수정을 할 수 도 있겠지만
관련된 부분의 여백을 전부 수정하는 작업을 하는 것을 권장합니다.
이렇게 한 번하고 나면 먼저 사이트의 구조가 쉽게 보이며!
앞으로도 꾸미기를 할 때 여백조절에 대한 이해가 매우 높아집니다.
힘들지만 하나씩 수정하고 완성이 되었을 때는!! 한단계 웹언어 이해에 대해서 발전한 자신의 모습을!!
볼 수 있을 것이라고 기대합니다. +_+