내맘대로 티스토리 스킨 2 - 아이콘 및 상단 바 추가
컴퓨터/Projects
728x90
반응형
서론 및 Githup
역시 아무 계획도 없이 무질서하게 시작하다 보니, 벌써부터 전면적인 수정을 하고 싶다.
근데 귀찮으니 일단 구조만 먼저 만들어 보록 합시다..
GitHub - Gon-91/TISTORY-SKIN
Contribute to Gon-91/TISTORY-SKIN development by creating an account on GitHub.
github.com
상단 바 및 아이콘 추가.
어플과 비슷한 형태로 만들고 싶어서 상단바를 추가했습니다.
좌측에는 블로그 로고가, 우측에는 검색과 메뉴를 들어갈 수 있는 아이콘 버튼을 만들었습니다.
역시나, 내 맘대로 이해한 그리드 기법을 이용해서 배치하였습니다.
로고 부분
xml에 로고에 대한 부분을 추가하여 로고 이미지를 등록할 수 있게 했습니다.
또한, 해당 로고를 클릭하면 메인 홈페이지로 돌아오게 됩니다.
아이콘
아이콘은 Falticon의 unicons를 이용했습니다.
SVG사용법을 익숙해지고자 SVG data의 형태로 사용했습니다.
메뉴 부분 추가
정말 말 그대로 부분만 추가했습니다.
다음 포스트에서는 아마 이 부분에 대한 내용들이 주를 이룰 것 같습니다.
우선 메뉴 부분을 누르면 표시되게 하기 위해서 javascript를 추가했습니다.
전체 소스코드 살펴보기
자세한 부분은 Githup을 참조하세요.
- xml
<?xml version="1.0" encoding="utf-8"?>
<skin>
<information>
<name>Compact_Blog</name>
<version>1.0</version>
<description>
<![CDATA[ 학문용 최적화 블로그 스킨입니다.]]>
</description>
<license>
<![CDATA[ MIT License]]>
</license>
</information>
<author>
<name><![CDATA[ 지구일 ]]></name>
<homepage>https://github.com/Gon-91/TISTORY-SKIN</homepage>
<email>hk1069@naver.com</email>
</author>
<default>
<entriesOnPage>6</entriesOnPage>
<entriesOnList>6</entriesOnList>
<recentEntries>4</recentEntries>
<recentComments>4</recentComments>
<recentTrackbacks>4</recentTrackbacks>
<itemsOnGuestbook>4</itemsOnGuestbook>
<tagsInCloud>20</tagsInCloud>
<sortInCloud>3</sortInCloud>
<expandComment>8</expandComment>
<lengthOfRecentNotice>40</lengthOfRecentNotice>
<lengthOfRecentEntry>30</lengthOfRecentEntry>
<lengthOfRecentComment>40</lengthOfRecentComment>
<lengthOfRecentTrackback>40</lengthOfRecentTrackback>
<lengthOfLink>30</lengthOfLink>
<commentMessage>
<none>0</none>
<single>1</single>
</commentMessage>
<trackbackMessage>
<none>0</none>
<single>1</single>
</trackbackMessage>
<contentWidth>700</contentWidth>
<toolbar>white</toolbar>
</default>
<cover>
<item>
<name>fullscreen</name>
<label>
<![CDATA[ 전체 화면 모드 ]]>
</label>
<description>
<![CDATA[ 전체 화면을 100%로 채우는 슬라이더 입니다. ]]>
</description>
</item>
</cover>
<variables>
<variablegroup name="이미지">
<variable>
<name>logo_img</name>
<label>로고 이미지</label>
<description>상단 헤더에 표시될 로고 이미지를 추가하세요.</description>
<type>IMAGE</type>
</variable>
</variablegroup>
</variables>
</skin>- html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>내맘대로 티스토리 스킨 2 - 아이콘 및 상단 바 추가</title>
<meta name="title" content="내맘대로 티스토리 스킨 2 - 아이콘 및 상단 바 추가 :: G91개발일지" />
<meta name="description" Content="91년생 공학엔지니어의 개발일지" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<!-- 스타일 및 자바 스크립트 -->
<link href="./style.css" rel="stylesheet">
<script src="./images/com.js"></script>
</head>
<body id="tt-body-page">
<s_t3>
<!-- 사이드바 영역 -->
<nav class="sidebar_wrap">
<div class="sidebar_logo" style="background-image:url('<s_if_var_logo_img></s_if_var_logo_img>');" onclick="location.href ='https://blog-of-gon.tistory.com/'" >
<a href="https://blog-of-gon.tistory.com/" title="Gon91(지구일)" class="logo_wrap">
<s_not_var_logo_img>
Gon91(지구일)
</s_not_var_logo_img>
</a>
</div>
<div class="sidbar_category">
</div>
<div class="sidbar_banner">
</div>
<div class="sidbar_counter">
</div>
</nav>
<!-- 헤더 영역 -->
<header class="header_wrap">
<div class="header_logo" style="background-image:url('<s_if_var_logo_img></s_if_var_logo_img>');" onclick="location.href ='https://blog-of-gon.tistory.com/'">
<a href="https://blog-of-gon.tistory.com/" title="Gon91(지구일)" class="logo_wrap">
<s_not_var_logo_img>
Gon91(지구일)
</s_not_var_logo_img>
</a>
</div>
<div class="header_content"></div>
<div class="header_menu" onclick="OpenMenu()">
<svg>
<use xlink:href="#icon_menu" class="icon"/>
</svg>
</div>
<div class="header_search" onclick="">
<svg>
<use xlink:href="#icon_search" class="icon"/>
</svg>
</div>
</header>
<!-- 홈 커버 영역 -->
<s_cover_group>
<s_cover_rep>
<div class="cover_fullscreen_wrap">
<s_cover name='fullscreen'>
<s_cover_item>
<div class="cover_fullscreen_grid" style="background-image:url('<s_cover_item_thumbnail></s_cover_item_thumbnail>');">
<div class="content_wrap">
<div class="content_subject">
<h1><strong></strong></h1>
</div>
<div class="content_text">
</div>
<div class="content_detail">
<a href="">Go to detail</a>
</div>
</div>
</div>
</s_cover_item>
</div>
</s_cover>
</s_cover_rep>
</s_cover_group>
</s_t3>
</body>
</html>
<!-- SVG -->
<!-- icon -->
<div claas="svg symbol" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol xmlns="http://www.w3.org/2000/svg" id="icon_menu" viewBox="0 0 24 24">
<rect y="11" width="24" height="2" rx="1"/><rect y="4" width="24" height="2" rx="1"/><rect y="18" width="24" height="2" rx="1"/>
</symbol>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol xmlns="http://www.w3.org/2000/svg" id="icon_search" viewBox="0 0 24 24">
<path d="M23.707,22.293l-5.969-5.969a10.016,10.016,0,1,0-1.414,1.414l5.969,5.969a1,1,0,0,0,1.414-1.414ZM10,18a8,8,0,1,1,8-8A8.009,8.009,0,0,1,10,18Z"/>
</symbol>
</svg>
</div>- style
@charset "UTF-8";
/* 초기화 */
*{
margin:0;
padding: 0;
border : 0;
list-style: none;
text-decoration-style: none;
text-decoration: none;
}
/* 아이콘 */
svg{
width: 100%;
height: 75px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
svg:hover{
fill: #fff;
}
/* 사이드바 */
.sidebar_wrap{
visibility: hidden;
position: fixed;
top:0;
right: 0;
height: 100%;
width: 80vw;
z-index: 10;
}
/* 헤더 */
.header_wrap{
display: grid;
grid-template-columns: repeat(100, 1%);
grid-template-rows: 1 auto;
position: fixed;
height: 100px;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
z-index: 1;
}
.header_wrap .header_logo{
grid-column: 3/11;
grid-row: 1/2;
background-size: 100% 100%;
}
.header_wrap .header_menu{
grid-column: 95/99;
grid-row: 1/2;
}
.header_wrap .header_search{
grid-column: 90/94;
grid-row: 1/2;
}
/* 홈 커버 */
.cover_wrap{
}
.cover_fullscreen_grid{
position: relative;
height: 100vh;
width: 100%;
display: grid;
grid-template-columns: repeat(100, 1%);
grid-template-rows: repeat(100, 1%);
background-size: cover;
overflow: hidden;
}
.cover_fullscreen_grid .content_wrap{
position: relative;
grid-column: 21/61;
grid-row: 31/81;
display: grid;
grid-template-columns: repeat(100, 1%);
grid-template-rows: repeat(100, 1%);
}
.cover_fullscreen_grid .content_wrap .content_subject{
position: relative;
grid-column: 1/101;
grid-row: 1/31;
}
.cover_fullscreen_grid .content_wrap .content_subject h1{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.cover_fullscreen_grid .content_wrap .content_text{
position: relative;
grid-column: 1/101;
grid-row: 31/81;
margin-left: 10%;
}
.cover_fullscreen_grid .content_wrap .content_detail{
background: #ff567a;
margin-left: 30%;
padding-left: 10%;
position: relative;
grid-column: 1/101;
grid-row: 86/101;
}
.cover_fullscreen_grid .content_wrap .content_detail a{
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 1.5em;
}- com.js
function OpenMenu(){
let sidebar = document.querySelector('.sidebar_wrap');
sidebar.style.visibility = 'visible';
}
function CloseMenu(){
}728x90
반응형
'컴퓨터 > Projects' 카테고리의 다른 글
| 내맘대로 티스토리 스킨 4 - 검색 및 댓글 구현 추가 (0) | 2022.11.07 |
|---|---|
| 내맘대로 티스토리 스킨 3 - Bata Ver 업로드 (1) | 2022.10.31 |
| 내맘대로 티스토리 스킨 1 - 서론 및 초기 준비 (0) | 2022.06.12 |
| C언어로 스톱워치/타이머 만들기6 - 소스코드 나누기 및 배포 (1) | 2022.01.05 |
| C언어로 스톱워치/타이머 만들기5 - 구조 다듬기(함수화2) (0) | 2022.01.03 |
Commnet