[티스토리] HTML / CSS 를 활용한 상단 꾸미기 - 메뉴

티스토리 스킨 만들기로 배우는 HTML/CSS

상단 꾸미기 첫번째

 

 

티스토리 스킨 상단 꾸미기를 해 보도록 하겠습니다

티스토리 관리자화면에서 HTML/CSS편집화면으로 이동 해 주세요

 

 

먼저 추가 해 주어야 할 부분입니다

<link rel="stylesheet" href="./style.css" />

링크를 걸어 주어야 style.css 파일이 어디있는지 알고, CSS부분을 수정 해 주면 이 화면에 적용이 되겠죠

 

기존 코딩 했던 부분들 중 필요 없는 부분들은 주석 처리를 해 가며 만들어 가 보겠습니다

주석 방법은 <!-- 주석 처리 내용 --> 이렇게 하면 됩니다

블로그 제목등은 나중에 추가 할려고 일단 주석 처리 했습니다

 

상단 TOP 부분을 40px 높이로 영역을 설정하고 메뉴 아이콘을 추가 해 보았습니다

마우스 오버 하면 카테고리 메뉴가 나타나도록 해 보겠습니다

 

div 는 사각형 형태의 블록 같은 영역이라고 생각하시면 됩니다

div 블록 안에 class 값이 설정 되어 있죠 바로 저 값으로 설정 된 CSS부분이 div에 적용이 되는 것 입니다 

 

그럼 CSS부분을 보도록 하겠습니다

 

 

id 값이 "header" 인 div 를 CSS 설정하는 부분이 가장 먼저 코딩 되어 있습니다

position 은 위치 설정입니다 fixed 란 말 그대로 고정이라는 뜻입니다

div 영역은 높이(height) 가 40px, 넓이(width)가 화면 100% 라고 설정을 했습니다 

영역 배경색(background-color) 은 살짝 뒷부분이 비치도록 설정 했습니다

여기서 색 값을 얻고 싶을 때, 좋은 Tip를 알려 드리겠습니다

 

인터넷익스플로러 11 에서 F12 키를 눌러 보세요 그러면 개발자 도구 창이 나타납니다

 

 

DOM 탐색기에서 상단 화면과 같이 하여 색상 값을 얻을 수 있습니다

값을 얻고 싶은 색상 화면이 있으면 클릭하면 되고 색상, 채도, 명도를 통해 색상을 조절할 수 있습니다

그리고 알파 값으로 투명도를 조절 할 수도 있습니다

rgba 값을 복사하여 CSS 배경색 값에 붙여넣기 하면 끝이죠

 

다시 CSS코드로 넘어가서 #header 아래 부분은 body, div 등 html 태그 영역 값을 설정 합니다

margin과 padding 는 영역(블록) 안/밖 공간을 설정합니다 0으로 설정을 하도록 하겠습니다

 

이런식으로 설정을 하고 나면 아래와 같이 적용 된 모습을 확인 할 수 있습니다

스크롤을 조금 올려 상단 영역부분이 투명하다는 것을 보여 줍니다

 

 

.category:hover .category_panel{
 display:block;
}

.category:hover .menu_icon{
 background-image:url('./images/menu_icon-02.png');
}

 

CSS 내용 중 이 부분을 설명 드리면

class 값이 "category" 인 div 영역에 마우스를 올리면(hover) "category_panel" 값으로 설정된 div 영역이 보이게 된다는 것입니다

아래 부분은 동일하게 마우스 오버하면 class 값이 "menu_icon" 인 div 영역 배경 이미지를 설정하는 부분입니다

즉, 아래와 같이 동작을 하게 됩니다

 

 

앞으로 계속해서 CSS 부분을 설명 해 드릴 것입니다 오늘은 여기까지 설명을 드리도록 하겠습니다

 

그럼 CSS 전체 소스를 올려 봅니다

 

@charset "utf-8";

#header {
 /*float:left;*/
 position:fixed;
 height:40px;
 width:100%;
 background-color:rgba(0, 129, 158, 0.91); /*rgba(215, 235, 251, 1);*/
 z-index:90000;
}

body, 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;
}

#content {
 position:relative;
 top:50px;
}

.category{
 position:relative;
 float:right;
}

.menu_icon{
 position:relative;
 float:right;
 width:30px;
 height:30px;
 background-image:url('./images/menu_icon-01.png');
 margin:5px;
 cursor:pointer;
 background-size:30px 30px;
}

.category_panel{
 position:relative;
 display:none;
 background-color:rgba(41, 46, 50, 0.53);
 z-index:99999;
 padding:10px 10px 10px 30px;
 top:40px;
 width:200px;
 height:700px;
}

.category:hover .category_panel{
 display:block;
}

.category:hover .menu_icon{
 background-image:url('./images/menu_icon-02.png');
}

 

알고 싶은 기능이나, 추가 설정이 필요하시면 언제든지 댓글 부탁 합니다

아.. 투명 이미지 만들기에 대하여 잠깐 언급 한다는 것이 깜빡했네요;;

 

그럼 저와 이 글을 읽는 당신이 멋진 스킨을 만들 수 있는 그날까지

"화이팅!"