티스토리 블로그 CCZ-CROSS스킨 상단 헤더 꾸미기

안녕하세요. 오늘은 블로그 스킨 상단 헤더 부분 꾸미기를 해보겠습니다.

하단 부분 이미지 넣기나 티스토리 블로그 꾸미기 포스팅을 보셨던 분들이라면

손쉽게 따라 올 수 있을 겁니다.

헤더부분 꾸미기를 잘하신다면 거의 꾸미기의 정점(?) 웬만한 이미지 첨부 및 박스 태그나

앞으로 꾸밀 수 있는 모든 부분에서 손쉽게 해결을 할 수 있을 것입니다.

우선 이번 강좌를 따라오기만 해도 괜찮지만 미리 사전지식을 습득하고 온다면 정말 좋습니다.

생활코딩 CSS 수업중 - 박스모델 강의 입니다.

https://opentutorials.org/course/45/6

(저도 그냥 이것 저것 하나씩 붙혀넣기하다보니깐 대충 구조는 알았지만 기본용어 및 정의등

개념에 대해서 정리가 없어서 시간 날 때 마다 틈틈히 기초강좌부터 보고 있습니다.)

두번째 사전지식으로

미디어 쿼리라는 지식이 필요합니다. ※ 반응형 웹의 꽃이라고 할 수 있습니다.

http://bootstrapk.com/css/#grid-media-queries

이것을 많이 사용 할 것입니다.

요즘 출시되는 대부분의 기본적인 반응형 웹스킨들은 부트스트랩기반으로 제작 되어지는데

기본적으로 반응형 유틸리티를 제공합니다.

주로 .hidden-* 과 .visible-* 클래스를 사용하죠 ( 예: .hidden-xs 768px 화면해상도 미만의 매우작은 모바일기기에서는 숨겨짐)

하지만 .hidden-* 과 .visible-* 만으로는 모든 반응형웹을 표현하기는 매우 힘듭니다.

가능은 하겠죠.. 모바일용 태블릿용 PC용 만들고 숨기고 보이고..

그렇기 때문에 @media 미디어쿼리를 사용을 하게 됩니다.

간단하게 설명을 하자면

미디어쿼리를 사용해 각각의 화면 해상도에 따라서 스타일을 다르게 줄 수 있습니다.

(저는 간단하게 설명만 하고 자세한 내용은 강좌를 참고하세요.)

예를 들어 우리가 꾸미려하고 하는 헤더를 기준으로 살펴보면


/* 헤더부분 */
.hd {
    height: 280px;
}
@media (min-width: 992px) {
    .hd {height: 220px;}
}

이렇게 되어 있는 게 보일 겁니다.

하나는 .hd 클래스의 높이 속성이 280px 인데 다른하나는 220px입니다

어떤게 맞는 것일까요? 두개다 맞긴 맞습니다. 바로 미디어 쿼리로 구분이 되어져 있기 때문인데요.

평소에는 height:280px 이지만 화면크기가

화면 가로 해상도가 992px이상일 경우에는 .hd클래스의 높이 속성은 220px일 되는거죠

그래서 모바일이나 태블릿에서 보면 280px 높이로 보이게 되는 것이죠!!

height: 280px; 상태일때

어떤식으로 미디어쿼리가 사용되는지 감이 오셨나요?

첫 번째 본격적으로 상단 꾸미기 헤더부분 높이

그럼 이미 예제가 나온김에 모바일에서 헤더부분의 영역을 수정을 해봅시다.

사실 제가생각하기에는 모바일용의 헤더 영역은 너무 큽니다.ㅠ_ㅠ 웬만한 스마트폰 절반 정도의 크기죠.

상단의 제목영역을 크게 사용하길 원하시는 분들도 있지만

저는 최소한의 높이로 헤더부분을 바꿔 보려고 합니다.

(특히 저는 상단에는 광고가 있기 때문에 충분히 콘텐츠 영역이 보이지 않고 광고를 배치한다면

방문객에게 클릭을 유도할 수 있기 때문에 부정클릭을 방지하기 위해서 헤더의 크기는 최소한으로 맞춰 놓았습니다.)

아까 위에 설명드린 .hd의 280px→ 부분을 100%로 바꾼다면

헤더부분의 높이가 딱맞게 줄어들겠죠??

앞에 말씀드린 것 처럼 특정 @media 쿼리 안을 수정하면 해당 조건일때만!!!! 적용이 되기 때문에

꼭 기본 클래스 속성값 부분에서 수정을 하셔야합니다.


/* 헤더부분 */
.hd {
    display: table;
    position: relative;
    width: 100%;
    height: 100%; /*이부분을 수정해주세요*/
    text-align: center;
}

자 제대로 확인을 해보며 모바일에서는 헤더부분이 줄어든 것이 보이겠죠?

height: 100%; 상태일때

@media쿼리를 사용하더라도 겹쳐진 속성 값만 교체되지 기본 베이직에 깔려있는 클래스 속성은 종속되게 됩니다. 그렇기 때문에 수정이 필요하지 않는 클래스값들은 추가로 중복해서 적을 필요가 없습니다.

이것은 여러개의 @media 쿼리를 사용해도 마찬가지입니다. 가장 기본부터 속성값이 발생해서 종속되게 됩니다. 만약 동일한 속성일경우에는 상위 미디어쿼리가 우선순위를 가져가게 됩니다.

웬만한 모바일 디바이스의 해상도는 portrait(초상화):세로모드일따 360px*640px landscape(풍경화):가로모드일때 640px*360px입니다. 모바일디바이스의 해상도테스트사이트

두 번째 배경 변경하기


/* 콘텐츠 공통
-------------------------------------------------------------------------- */
/* 헤더부분 */
.hd {
    display: table;
    position: relative;
    width: 100%;
    height: 100%px;
    text-align: center;
    background:url(./images/bg.svg) center no-repeat; /*이부분을 추가해주면 배경이 생깁니다.*/
}

배경을 교체하는 방식은 더 쉽습니다.

저는 기존 CCZ-CROSS 스킨에 포함되어있는 배경이미지파일을 이용해서 헤더의 배경을 넣어봤습니다.

배경을 채우는 방식은 다양하지만 주로 background태그를 사용해서 CSS에서 속성을 주게 됩니다.

background태그의 사용도 두가지로 나눠지는데요.

위와 같이 이미지파일 경로를 이용해서 불러오거나

아니면 직접 CSS코드를 사용해서 배경이미지를 표현을 할 수도 있습니다.

아래와 같이요.


/* 콘텐츠 공통
-------------------------------------------------------------------------- */
/* 헤더부분 */
.hd {
    display: table;
    position: relative;
    width: 100%;
    height: 100%px;
    text-align: center;
	  background-image: -webkit-linear-gradient(0deg, #cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px), -webkit-linear-gradient(#cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px), -webkit-linear-gradient(#e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px), -webkit-linear-gradient(0deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px), -webkit-linear-gradient(transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px), -webkit-linear-gradient(0deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, #e0e0e0 99px, #e0e0e0 100px), -webkit-linear-gradient(0deg, transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px), -webkit-linear-gradient(transparent 0px, transparent 1px, #f6f6f6 1px, #f6f6f6 99px, transparent 99px, transparent 100px), -webkit-linear-gradient(#cdcccc, #cdcccc);
    background-image: linear-gradient(90deg, #cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px), linear-gradient(#cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px), linear-gradient(#e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px), linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px), linear-gradient(transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px), linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, #e0e0e0 99px, #e0e0e0 100px), linear-gradient(90deg, transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px), linear-gradient(transparent 0px, transparent 1px, #f6f6f6 1px, #f6f6f6 99px, transparent 99px, transparent 100px), linear-gradient(#cdcccc, #cdcccc);
    background-size: 100px 100%, 100% 100px, 100% 10px, 10px 100%, 100% 100px, 100px 100%, 100px 100%, 100px 100px, 100px 100px;
}