헤더 영역 로고 & 카테고리 메뉴바 꾸미기 헤더 영역

안녕하세요 별깡솔입니다 : )

별깡솔 블로그를 방문하신 모든 분들 진심으로 감사드립니다

헤더 수정

첫 메 인페이지 상단 부분에 카테고리 영역 즉 메뉴바 사이즈가
컨텐츠 부분 인기글 커버와 최신글 커버를 담고 있는 컨테이너 크기가 달라서 틀어져 있는 상태입니다

티스토리 꾸미기 컨텐츠로만 글을 작성하고 있던 와중에 스킨에 설정되어 있는 레이아웃이 마음에 들지 않아 간간히 수정을 하도록 하겠습니다

로고 타이틀과 카테고리 영역 즉 메뉴바를 담고 있는 크기와 인기글 커버, 최신글 커버를 담고 있는 컨테이너 영역의 사이즈가 달라서 보기 좋지 않게 틀어져 있습니다

한사람 한사람 개인의 입맛에 맞추어 만들어진 스킨이 아니니까 당연하게 야기될 일이라 생각합니다

글을 발행하기 전에 비공개로 수정을 하면서 레이아웃을 그때 그때 임시적으로 수정을 하다보니 작은 부분을 하나 둘 놓치고 있어서 마음만 급해집니다
하나씩 하나씩 천천히 고쳐나가 보도록 하겠습니다

글을 담고 있는 article-view 부분이 기본 세팅에서 너무 작게 설정된 것이 아닌가?라고 생각하여
640px에서 800px로 늘리고 오른쪽 프로필 영역과 margin 부분을 더해 넉넉하게 1200px 까지 늘려버렸습니다

헤더 영역을 그에 맞게 늘려보도록 하겠습니다

bodywrapinner-header

inner-header에서 max-width:1020px; 부분을 찾아서 수정하겠습니다

그리고 overflow:hidden을 추가 하겠습니다

134.4px 164.4px 높이 30px 정도의 값을 찾아왔습니다

inner-header에 넓이 값을 늘려줍니다

.header .inner-header {
    position: relative;
    max-width: 1200px; /* 1020px -> 1200px 변경*/
    margin: 0 auto;
    overflow: hidden; /* 추가 */
}

logo 수정

inner-header box-header title-logo a tag

html 코드는 span tag를 추가하고 가상 클래스(before, after)를 이용하여 content에 덧붙일 text나 image를 더해준다

예를 들어 별깡솔 로고 부분에 's tistory를 덧붙이면 별깡솔's tistory가 된다

body wrap header inner-header box-header

스킨에 따라 구조가 다를테지만 일반적으로 헤더 안에 있을테니 잘 찾아보자

<div class="box-header">
  <h1 class="title-logo">
  <span class="sgs-title-logo">
    <a href="https://starggangsol.tistory.com/" title="별깡솔" class="link_logo">
    <s_if_var_logoImage>
        <img src="" class="img_logo" alt="별깡솔">
    </s_if_var_logoImage>
    <s_not_var_logoImage>
        별깡솔
    </s_not_var_logoImage>
    </a>
  </span>
  </h1>
</div>

h1 tag 아래 span만 덧붙였다. 안 붙여도 상관없다

실제론 a태그에 가상클래스를 더해줬다
position 관계를 벗어나지 못하게 span을 추가했다

.title-logo .sgs-title-logo {}
.title-logo .sgs-title-logo a {position: relative;}
.title-logo .sgs-title-logo a:after {
  content: "'s Tistory"; 
  font-size: 16px;
  position: absolute; 
  top: 2px; left: 51px; 
  font-weight: 500;
}

.sgs-title-logo 클래스를 선언하고 아무것도 안 했다
미디어 쿼리 여기 저기에서 position:relative absolute가 있어서
span 밖으로 나가지 않기 위해서다

a tag = link_logo에 선언된 overflow hidden을 잘 살펴보자

나중에 로고 부분이 마우스를 올리지 않아도 무지개 링크 플로그인 같이 color 변화하는 것을 추가해보자

카테고리 메뉴바 수정

카테고리 메뉴바 부분에 마우스를 올리면 빨간 밑줄이 생긴다
태블릿 스크린 사이즈 정도에선 빨간 줄이 생기진 않는다

hover 상태에서 저런 못생긴 녀석이 나온다

마음에 들지 않아 코드 전체를 주석 처리한다

카테고리 수정에서 할 것이 많다
마우스 효과 외에도 화면이 작은 모바일 스크린에 어떤 방식으로 제어할지 고민해보자

스킨의 기본 방식은 카테고리 메뉴를 노출한다
list 구조 안에서 오른쪽 마진을 24px 가지고 있어서 스크린 안에 전부 보여주지 못하고 있다

버튼을 달아 메뉴바를 표시하게 하거나 2줄로 메뉴바를 나타내는 것이 더 좋을 것 같다

우선 pc 화면에서 마우스 효과를 먼저 고치자

.header .tt_category .category_list > li:hover > a::after,
.header .topnavmenu > ul > li:hover > a::after {}

위에 css 부분을 전부 주석 처리하자

다른 스킨을 사용중인 분들은 header 안에서 개발자 도구를 켜고
크롬 & 파이어폭스 기준 ctrl + shift + c를 눌러 메뉴바 부분을 클릭하여 찾습니다

hover 효과를 눌러 찾는 방법이 있다

body wrap header inner-header area-align area-gnb topnavmenu

topnavmenu & ul > li 에서 a::after css 부분을 찾아 주석 처리한다

3가지 마우스 효과를 개성있게 넣어보자

왼쪽에서 오른쪽으로, 가운데에서, 오른쪽에서 왼쪽으로 늘어나는 효과

카테고리 메뉴바 마우스 효과외에도 메뉴바 탭까지 다음 검색창의 색상을 입혔다

D A U M = #8644ff #70bc4c #ffbe00 #f46e85

transition으로 지연 효과를 넣었다

메뉴탭에 다음의 4가지 색이 그라디언으로 들어갈 때
header에 있던 border-bottom은 #fff(흰색)로 사라지는 효과를 넣었다
jQuery hover() Method를 이용했다 참조 : w3schools.com

미디어 쿼리는 모바일 페이지를 꾸밀 때 한번에 진행하자

css & jQuery

html은 위에 있어서 생략했습니다

css

.header {
  overflow: hidden; 
  border-bottom: 1px solid #888;
  transition: 0.3s ease; /*지연 추가 */ } 

.header .box-header .title-logo .sgs-title-logo a {position: relative;}
.header .box-header .title-logo .sgs-title-logo a:after {
  content: "'s Tistory"; 
  font-size: 16px;position: absolute; 
  top: 2px; left: 51px; 
  font-weight: 500; }
 
/* 기존 스킨의 메뉴바 마우스 효과 주석 처리 또는 삭제 */  
.header .tt_category .category_list > li:hover > a:after,
.header .topnavmenu > ul > li:hover > a:after {}

.area-gnb .topnavmenu { /* 보더에 흰색선을 넣어 박스 사이징 */
  border: 1px solid #fff;
  border-top: 1px solid #ddd;
  position: relative; }
  
.area-gnb .topnavmenu:before{ /* 다음 검색창 색상 넣기 */
  content:'';
  position:absolute;
  left:0;top:-1px;
  background:linear-gradient(to right,#86aaff,#70bc4c,#ffbe00,#f46e85) 
  border-box;
  width:0;
  height:2px;
  transition:.8s }
  
.area-gnb .topnavmenu:after{ /* 오른쪽에서 왼쪽으로 */
  content:'';
  position:absolute;
  right:0;
  bottom:-1px;
  background:linear-gradient(to right,#86aaff,#70bc4c,#ffbe00,#f46e85)
  border-box;
  width:0;
  height:2px;
  transition:.8s }
  
.area-gnb .topnavmenu:hover:before,
.area-gnb .topnavmenu:hover:after {width: 100%;}

.topnavmenu ul li a {position: relative;}

.topnavmenu ul li:nth-child(1) a:before { /* 왼 -> 오 */
    content: '';
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 0;
    height: 4px;
    border-radius: 2px;
    transition: 0.5s ease;
    background-color: #86aaff;
}

.topnavmenu ul li:nth-child(2) a:before { /* 가운데 */
    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 0;
    height: 4px;
    border-radius: 2px;
    transform: translateX(-50%);
    transition: 0.5s ease;
    background-color: #86aaff;
}

.topnavmenu ul li:nth-child(3) a:before { /* 오 -> 왼 */
    content: '';
    position: absolute;
    right: 0;
    bottom: -7px;
    width: 0;
    height: 4px;
    border-radius: 2px;
    transition: 0.5s ease;
    background-color: #70bc4c;
}

.topnavmenu ul li:nth-child(4) a:before { /* 왼 -> 오 */
    content: '';
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 0;
    height: 4px;
    border-radius: 2px;
    transition: 0.5s ease;
    background-color: #70bc4c;
}

.topnavmenu ul li:nth-child(5) a:before { /* 가운데 */

    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 0;
    height: 4px;
    border-radius: 2px;
    transform: translateX(-50%);
    transition: 0.5s ease;
    background-color: #ffbe00;
}

.topnavmenu ul li:nth-child(6) a:before { /* 오 -> 왼 */

    content: '';
    position: absolute;
    right: 0;
    bottom: -7px;
    width: 0;
    height: 4px;
    border-radius: 2px;
    transition: 0.5s ease;
    background-color: #ffbe00;
}

.topnavmenu ul li:nth-child(7) a:before { /* 왼 -> 오 */

    content: '';
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 0;
    height: 4px;
    border-radius: 2px;
    transition: 0.5s ease;
    background-color: #f46e85;
}

.topnavmenu ul li:nth-child(8) a:before { /* 가운데 */

    content: '';
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 0;
    height: 4px;
    border-radius: 2px;
    transform: translateX(-50%);
    transition: 0.5s ease;
    background-color: #f46e85;
}

.topnavmenu ul li:nth-child(1) a:hover:before,
.topnavmenu ul li:nth-child(2) a:hover:before,
.topnavmenu ul li:nth-child(3) a:hover:before,
.topnavmenu ul li:nth-child(4) a:hover:before,
.topnavmenu ul li:nth-child(5) a:hover:before,
.topnavmenu ul li:nth-child(6) a:hover:before,
.topnavmenu ul li:nth-child(7) a:hover:before,
.topnavmenu ul li:nth-child(8) a:hover:before {width: 100%;}

jQuery

$('.area-gnb > .topnavmenu').hover(function () {
    $('header').css("border-bottom", "1px solid #fff");
    }, function (){
    $('header').css("border-bottom", "1px solid #888");
});

별깡솔 블로그를 방문하신 모든 분들 다시 한번 진심으로 감사합니다

구독과 좋아요 감사합니다 : )