본문으로 바로가기

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

로딩중..
2016.03.01 00:01

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


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

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


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

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


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


생활코딩 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;
}




화려한 이미지나 코드로도 구현하기 힘든 배경이미지들은 파일경로로 등록 시키는 것이 좋고

간단한 그라데이션이나 패턴들은 소스코드로도 충분히 구현이 가능하니 크기도 가볍고 손쉽게 request도 줄이면서 할 수 있습니다.


배경 이미지나 패턴, 배경 소스코드들은 구글에서 아주 많이 손쉽게 구할 수 있으니 찾아보면 좋을 것 같습니다.




오늘은 여기까지!! 높이조절배경만 잘꾸며도

남들과 다른 나만의 블로그 특색을 잘보여주는 헤더를 꾸밀 수 있습니다.


그럼 예쁘게 꾸며보세요!!!

챱챱챱

.

.

.

.

.

.

.

하고 끝내기는 너무 서운해서..

사실!!!!!!

제 블로그의 헤더의 속성은 자그마치 3개의 코드 기술이 합쳐진 컴비네이션.


은 아니구요.. ㅎㅎ^^:;


제목이 보이시나요? 

제목이 너무 길면 자동으로 줄임점으로 표시를 해주는 것입니다.

아무리 제목이 길어도 두 줄로 표시는 되지 않겠죠?


바로 이렇게 모바일에서 제목을 줄여서 표현하는 방법 그리고

CCZ-CROSS 스킨은 구형 IE 익플도 지원하기 때문에

구형 익플에서 헤더부분을 수정하는 방법 까지


너무 내용이 길어 질 것 같아서 2편으로 따로 준비하겠습니다. 그럼 다음편에서 봐요.

오늘은 여기까지


PS. 우측 사이드 드랍박스 꾸미기 문의도 있는데 저거 너무 구려서 바꿔야합니다. 소스코드 다꼬여있어서 

구분도 안되고 영역이.. 사파리나 애플디바이스에서는 열리지도 않는다는..

하단 부분 썸네일 최신글 모듈이나 꾸미기관련은 하나씩 완성되면 포스팅을!!

신고

댓글을 달아 주세요

  1. BlogIcon SONYLOVE 2016.03.01 01:11 신고

    본격적으로 시작하셨군요. ㅎㅎ
    저도 많이 보고 배워야겠어요.
    대충 겉보기만 신경썼는데 수정해야할곳이 많네요.
    카테고리 하트 뿅뿅 멋진데요. ㅎㅎ
    2탄도 기대됩니다. 얼른 올려주세요. ^_^

    • BlogIcon COCOSOFT COCO Media 2016.03.01 01:52 신고

      넵 ㅎㅎ 감사합니다. 특정카테고리 하트 다는것도 찾게되어서+_+달아보았어요. 아이콘폰트를 집어넣어야되는데 ㅠ 안들어가서 방법을 찾게되면 정리를 하려구요 ㅎㅎ 2탄도 빨리준비하겠습니다!!

    • BlogIcon SONYLOVE 2016.03.01 02:14 신고

      하위 카테고리는 저도 잘 안되서 포기했어요. 없는게 더 낫기도 한거 같고요.

    • BlogIcon SONYLOVE 2016.03.01 17:56 신고

      카테고리에 하트 넣을 정도면 카테고리에 아이콘 폰트 넣는건 금방 하실꺼 같은데요. 위치만 알아내면 나머지는 쉽더라고요. 저도 전에 카테고리에 아이콘 폰트 넣는걸 포스팅 하려고 생각했다가 관뒀다는...

    • BlogIcon COCOSOFT COCO Media 2016.03.01 19:23 신고

      감사합니다. ㅎㅎ 성공했습니다.!! 댓글 보고나니 갑자기 해결법이 생각이 나네요. 다른 아이콘폰트 위치를 살펴보다가. 폰트패밀리를 빠저먹었네요ㅎㅎ. 와플님 블로그에서 특정카테고리만 문구추가하는 소스를 사용해서 만들었는데 요렇게요
      a:after {}
      .module-category a[href*=Site]:after{
      font-family: cczicon!important;
      content:"\e6ee";
      font-size:12px;
      }
      이런식으로 하면 나오긴하는데 a:after {} 넣어서 초기화(?)를 시켜야지 표시가 나오더라구요 ㅎㅎ 왜 제일 처음에 a:after {}를 안넣으면 안나오는 건지는 나중에 ㅠ 알아보고 배워야겠습니다. 일딴 성공했으니 나두고 천천히 바꿔야겠어요 ㅎㅎ 채널 구독 모듈 다시 만든다고 힘을 너무 뺐네요 ㅎㅎ

    • BlogIcon SONYLOVE 2016.03.01 19:26 신고

      저도 채널구독 버튼 보고 뭔가 하시는구나 싶었는데 .. 정말 이뻐요. ㅎㅎ
      제게 필요한 기능이었으면 설치하고 싶었을텐데 아쉽다는...

  2. BlogIcon 프루신월 2016.03.01 02:09 신고

    실력이 없어서 손대고 싶어도 할 수가 없었는데 좋은 정보 감사드립니다.

  3. 박수민 2016.03.01 12:26 신고

    감사합니다.

  4. BlogIcon heyor 2016.06.07 17:58 신고

    모바일 헤더부분.. 소스코드 하이라이트? 이거 보고 따라했는데.. 안되네요 ㅠ

  5. BlogIcon 유쾌한삼이 2016.11.03 11:45 신고

    참고 잘 했습니다.

  6. BlogIcon 라오꽁 2017.04.04 19:28 신고

    와오...
    그냥 이 블로그 스킨튜닝하신걸 보면 딱 찾던답이 여기있네 라는 느낌입니다.
    카테고리들 더보기 이미지표시, 라이브리 별도탭구성 이런거 따라서 해봐야겠습니다.
    오늘 다잤네 ㅠ

티스토리 툴바