티스토리 스킨 만들기로 배우는 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');
}
알고 싶은 기능이나, 추가 설정이 필요하시면 언제든지 댓글 부탁 합니다
아.. 투명 이미지 만들기에 대하여 잠깐 언급 한다는 것이 깜빡했네요;;
그럼 저와 이 글을 읽는 당신이 멋진 스킨을 만들 수 있는 그날까지
"화이팅!"
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
[티스토리] 홈(카테고리) 화면 만들기로 배우는 CSS 태그 (0) | 2017.09.24 |
---|---|
[티스토리] 상단 가로 메뉴 만드는 법 (0) | 2017.09.15 |
[HTML/JavaScript] 로또번호 자동생성 소스 설명 (1) | 2017.09.06 |
[HTML/JavaScript] 로또번호 생성 프로그램 만들기 (0) | 2017.09.06 |
[티스토리 스킨만들기] 두번째 치환자 적용하기 (4) | 2017.09.01 |