내맘대로 티스토리 스킨 1 - 서론 및 초기 준비

728x90

서론

내 블로그 스킨 만들기 프로젝트

처음부터 끝까지 손수 블로그 스킨 만들기! 목표도 기간도 없습니다.

그냥 배우면서 하나씩 덕지덕지 만들어보려고 하고 있습니다.

가능하면 순수 HTML & CSS & Javascript만을 사용하려 하고 있습니다.

GitHub - Gon-91/TISTORY-SKIN

Contribute to Gon-91/TISTORY-SKIN development by creating an account on GitHub.

github.com

index.xml

우선 index.xml파일을 다른 기본 스킨들에서 가지고 와서 만들었습니다.

우선 메인 url의 커버쪽을 만들기 위한 데이터와 기본 정보에 대한 데이터를 정의했습니다.

<?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>
</skin>

skin.html

커버 영역에 대해서 간단하게 만들고 있습니다.

처음에 s_cover name의 이름에 공백이 있으면 적용이 안되어서 상당히 애를 먹었습니다.

<!DOCTYPE html>
<html lang="ko">
<head>

    <title>내맘대로 티스토리 스킨 1 - 서론 및 초기 준비</title>
    <meta name="title" content="내맘대로 티스토리 스킨 1 - 서론 및 초기 준비 :: 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">
</head>
<body id="tt-body-page">
    <s_t3>
    <!-- 헤더 영역 -->

    <!-- 홈 커버 영역 -->

            <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>

style.css

기본적인 레이아웃 배치를 위해서 그리드를 적용해서 만드려 보려고 합니다.

단순하게 잘게 쪼갠 레이 가수 배치판에서 요소를 배치하는 방식으로 할 예정입니다.

@charset "UTF-8";

/* 초기화 */
*{
    margin:0;
    padding: 0;
    border : 0;
    list-style: none;
    text-decoration-style: none;
    text-decoration: none;
}

/* 홈 커버 */
.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;
    z-index: 1;
}
.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;

}

728x90

'컴퓨터 > Projects' 카테고리의 다른 글

내맘대로 티스토리 스킨 3 - Bata Ver 업로드 (1)	2022.10.31
내맘대로 티스토리 스킨 2 - 아이콘 및 상단 바 추가 (0)	2022.06.25
C언어로 스톱워치/타이머 만들기6 - 소스코드 나누기 및 배포 (1)	2022.01.05
C언어로 스톱워치/타이머 만들기5 - 구조 다듬기(함수화2) (0)	2022.01.03
C언어로 스톱워치/타이머 만들기5 - 구조 다듬기(함수화) (0)	2021.12.31