티스토리 스킨 만들기! 친효스킨2 개발 일지 - 헤더 완성

안녕하세요! 친절한효자손입니다. 발등에 불이 떨어져서 겨우 움직이기 시작한 요즘입니다. 사이드바는 거의 완성되었고 그 다음으로는 HTML 문서의 시작이라고 할 수 있는 <header> 영역을 만들었습니다. 이번 「친효스킨:아트북」의 컨셉은 사이드바의 책갈피 느낌을 살리고 본문 콘텐츠를 부각시키는 것을 목표로 하고 있습니다. 때문에 나머지 영역인 헤더나 푸터는 크게 눈에 띄지 않도록 만들 생각입니다.

 

미리보기

빨간색 점선 윗 부분이 헤더 영역입니다. 아래는 본문이 들어갈 공간이구요. 보시는 것처럼 완전 초 단순하게 만들었습니다. 모든 영역은 당연히 반응형으로 제작됩니다. 모바일에서 사이드바는 본문 아래로 배치됩니다.

 

HTML 구조

뼈대라 할 수 있는 HTML 태그를 살펴봅니다.

 

<!-- 헤더 시작 -->
<header>
    <div class="blogTitle">
        <h1><a href="https://rgy0409.tistory.com/">친절한효자손 취미생활</a></h1>
    </div>
    <nav>
        <ul class="navMenu">
            <li><a href="/" title="홈으로">홈</a></li>
            <li><a href="/category" title="전체글">전체글</a></li>
            <li><a href="/guestbook" title="방명록">방명록</a></li>
            <li><a href="/manage/post" title="글쓰기">글쓰기</a></li>
            <li><a href="/manage" title="관리자">관리자</a></li>
            <li><a href="#" class="tab_login" id="tab_login_toggle" onclick="fnLoginToggle();"></a></li>
        </ul>
    </nav>
</header>
<!-- 헤더 끝 -->

친효스킨1에 비하면 엄청 단순한 구조입니다. 기존 친효스킨에서는 헤더안에 반응형 <nav> 요소가 2중 레이아웃 구조로 되어있어 더욱 복잡했었습니다. 검색바가 고정인데다 반응형 모바일 버튼까지 들어가있었기 때문입니다. 허나 이번 친효스킨:아트북의 경우는 검색창을 사이드바로 보냈기에 내부 요소가 훨씬 줄어들었습니다. 그렇기에 구조도 단순해졌구요. 모바일과 데스크탑 해상도의 차이점이라고 한다면 텍스트 위치밖에 없습니다. 모바일에서는 중앙으로, 데스크탑에서는 오른쪽으로 배치됩니다.

 

CSS 스타일

다음은 스타일시트 상황입니다.

 

/* 헤더 시작 */
header {
    padding: 5px 10px;
    outline: 1px dashed red;
}

header .blogTitle {
    display: flex;
    justify-content: center;
}

header .blogTitle h1 {
    border-bottom: 2px solid #555;
    font-size: 1.3rem;
    font-weight: normal;
} 

header .blogTitle h1:hover {
    border-bottom-color: #f54;
}

header .blogTitle h1 a {
    color: #555;
}

header .blogTitle h1 a:hover {
    color: #f54;
}

header nav .navMenu {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    font-size: 12px;
}

header nav .navMenu li {
    padding: 5px 0;
}

header nav .navMenu li::before {
    content: "｜";
}

header nav .navMenu li:first-child::before {
    display: none;
}

header nav .navMenu li a {
    color: #555;
}

header nav .navMenu li a:hover {
    color: #f54;
}
/* 헤더 끝 */

친효스킨1에서는 홈, 글쓰기, 관리자에 대한 메뉴가 모두 폰트어썸 아이콘 폰트로 구성되어 있습니다. 이번 친효스킨:아트북에서는 폰트어썸을 아예 사용하지 않습니다. 로딩 속도를 최대한 끌어올리기 위함입니다. 따라서 기본기에 충실한 메뉴를 구성하고자 했습니다. 또한 컨샙이 아트북이다보니 아무래도 텍스트가 많아질 수 밖에 없다고 생각했습니다. 텍스트만으로 이루어진 메뉴바라면 좀 밋밋하지 않을까 생각했는데 블로그 이름 바로 아래에 배치가 되니 생각보다 잘 어울리는 듯 합니다. 다음 작업할 과정은 인덱스 페이지입니다. 티스토리의 기본 화면이죠. 끝.