본문 바로가기
프로그래밍/HTML, CSS, JavaScript

[티스토리] 상단 가로 메뉴 만드는 법

by [바가지] 2017. 9. 15.
반응형

 

 

티스토리 상단 가로 메뉴 만들기

 

 

 

이전 포스팅에서 티스토리 상단 카테고리 메뉴 만들기에 대하여 올렸습니다
초기 단계까지만 포스팅하여 추가 포스팅을 할까 생각하였으나
개인적으로 가로 메뉴를 더 선호하기에 가로 메뉴 만드는 방법에 대하여 먼저 포스팅을 하고자 합니다

 

■ HTML 영역

먼저 HTML 영역입니다

 <header>
  <div id="container">
   <div id="title"><a href="https://erunjoy.tistory.com/">이런조이</a></div>
   <div id="tab_menu">

</div>
  </div>
 </header>

 

<body>  아래에 추가한 소스 입니다

header 영역을 설정하고 container 영역안에 타이틀 부분과 탭메뉴(가로메뉴) 영역을 추가 하였습니다

그리고 또하나 <br/> 태그로 기존 내용을 조금 아래로 이동 시켰습니다(보기쉽게)

여기까지 HTML 영역 추가 작업이였습니다

 

여기에서 처음 티스토리 스킨만들기를 처음 접하는 분들은 개발자도구로 HTML 코드를 확인 해 보세요

부분이 어떤형식으로 나타나는지 알아야 진행을 할 수 있습니다

아래 이미지를 보시면 이해 하실 것 입니다

 

 

위 캡쳐화면처럼 자신의 ul, li, a 태그 등으로 구성되어 생성 됩니다

 

■ CSS 영역

이제 CSS 소스입니다

 

이제 CSS 속성에 대하여 알아보도록 하겠습니다

 

기초학습으로 margin, padding, border에 대하여 알아보도록 하겠습니다 꼭 알고 넘어가셔야  편합니다
<style>
 #container {margin:20px; padding:20px; border:10px solid blue; max-width:187px; height:50px; background-color:#2d3434;}
</style>

<div id="container" >

위 소스를 메모장에 붙여넣어 확인 웹화면에서 확인 해 보세요

크롬 브라우저에서 개발자도구를 이용해서 확인하면 정확하게 알 수 있습니다

margin 영역 표시 입니다 border은 파란색 padding 영역은 다음 켭쳐화면에 표시되어 있습니다

 

 

padding 안쪽이 넓이, 높이를 설정한 max-width:187px; height:50px; 값이 적용 됩니다

 

 

한가지더 알아야 할 기초 부분은 아무런 설정을 하지 않아도 margin이 8로 설정되어 있다는 것입니다

따라서 보통  CSS소스margin, padding 부분을 0으로 설정하는 코드를 넣습니다

 

 

 

다음음 그림자 효과입니다 알아두면 보다 멋진 스킨을 만들 수 있습니다 
box-shadow:(오른쪽 위치) (아래쪽 위치) (흐림효과) (색);
<style>
 #container {width:300px; height:50px; box-shadow:5px 10px 10px rgba(0,0,0,0.1); }
</style>

<div id="container" >

 

이제 스킨 CSS 코딩에 들어가야 하는데 하루에 너무 많이 하면 힘들겠죠

 

먼저 작업된 화면 및 추가한 소스 전체를 올려드리도록 하겠습니다

(디자인 감각이 없어서 조금씩 수정해서 자신만의 멋진 스킨을 만들어 보세요)

 

작업화면

 

 

@charset "utf-8";@charset "utf-8";


body, header, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button{
 margin: 0;
 padding: 0;
}

header {position:fixed; -- 스크롤화면 이동을 하여도 현재 위치 고정시키기 위해 설정
width:100%; --넓이설정
height:50px; --높이설정
box-shadow:0px 1px 1px rgba(0,0,0,0.1); 그림자 설정
background-color:#2d3434 --배경화면 설정
}

#container {margin:auto; max-width:900px; height:50px;}

-- margin:auto 부분은 사이트명 및 메뉴가 표시되는 container 영역을 중앙 설정을 위해

-- max-widt:900px으로 설정하면 더 늘어나지 않고 스크롤 없이 줄어 듭니다 
header #container {color:#fff;}
#title {float:left; width:30%; padding-top:10px;}

--float는 가로로 내용을 표시하도록 설정하는 부분이며 기준은 left 정렬로 설정 하였습니다
#title a {text-decoration:none; color:#fff; font-size:20px; font-weight:800; font-family:"Noto Sans KR", sans-serif; text-align: -webkit-match-parent; }
#tab_menu {float:right; width:70%; height:50px; width:auto; font-size:20px; }
#tab_menu ul {list-style:none; }
#tab_menu ul li { float:right;}
#tab_menu ul li a {position:relative;display:none;}
#tab_menu ul li ul li a {position:relative; display:block; float:left; padding:15px; text-decoration:none; color:#fff; font-family:"Malgun Gothic", "Noto Sans KR", sans-serif;}
#tab_menu ul li ul li:hover ul {display:block;}
#tab_menu ul li ul li ul {position:absolute; top:40px; display:none; background-color:transparent; box-shadow:0px 1px 1px rgba(0,0,0,0.1); text-decoration:none; padding:15px 0px 0px 0px; } /*display:none;*/
#tab_menu ul li ul li ul li a {float:none; color:rgba(66, 67, 67, 1); font-family:"Noto Sans KR", sans-serif; text-align: -webkit-match-parent;}
#tab_menu ul li ul li ul li { float:none;}
#tab_menu ul li ul li ul li:hover { float:none; background-color:#666;}


#tab_menu ul li a .c_cnt {display:none;}

 

 

여기까지 메뉴 만들기에 대하여 알아보았습니다

 

주석을 적다가 다 못 적었습니다

다음 블로그에서 추가 설명을 하도록 하겠습니다

가장 빠르게 배울 수 있는 방법은 한줄씩 추가하며 직접 확인 해 보는 것입니다

 

그럼 멋진 나만의 스킨을 만드는 그날 까지 화이팅입니다

반응형