부트스트랩 5 티스토리 블로그 스킨 만들기 2

블로그 준비

본격적으로 부트스트랩 5 티스토리 스킨을

만들기 위한 준비를 해보겠습니다.

우선 티스토리 블로그가 필요합니다.

티스토리 계정을 만드는 방법은

아래 게시물을 참고합니다.

추가 계정 만들기라고 했지만

카카오 계정을 통하여 티스토리에

신규로 가입하는 내용입니다.

티스토리 추가 계정만들기 - 카카오 계정 이메일로 가입

티스토리 계정 티스토리를 가입하면 이제는 카카오 계정으로 가입하게 되어 있습니다. 티스토리와 카카오계정이 통합되면서 기존 티스토리 계정들도 카카오 계정에 합쳐질 예정이죠. 기존 계

digiconfactory.tistory.com

티스토리는 계정당 한번에 5개의

블로그를 운영할 수 있습니다.

이 포스팅에서 스킨을 만드는 방식은

기존의 스킨을 수정하면서 진행할 겁니다.

티스토리 공식문서에서는 처음에

와꾸(스켈레톤)를 짜놓은 다음에

파일을 하나씩 만드는 방식인데

그렇게 하면 초보자들은 조금 더

전문적으로 코딩을 배워야 해서

어려울 수 있습니다. 일단 처음에

xml 파일부터 편집하기는 쉽지가 않습니다.

여기서는 기존 반응형 스킨에서

skin.html 을 하나씩 수정하며

확인하는 방식을 사용합니다.

티스토리 스킨을 만들려면 최소 수백줄

이상의 코드를 실수 없이 작성해야

제대로 작동이 되는데 코드가 양이

많은게 난이도와 비례하지는 않지만

가독성이 좋지 않습니다. 특히 티스토리

편집기를 보면 상당히 오래전의

인터페이스를 그대로 사용하고

있기 때문에 좀 불편하기도 하고

뭐하나 수정하려면 찾는 시간이

조금 더 걸리는 것 같습니다.

이런 것은 개인적인 취향이라

사람마다 나름의 노하우에 따라

호불호는 있을 수 있습니다.

더 좋은 방법이 있다면

그 방법을 쓰면 됩니다.

*티스토리 계정관리에 들어가서

새로운 블로그를 개설합니다.

기존에 글이 몇개 없는 방치된

블로그가 있다면 그것을 사용해도

좋습니다. 어차피 테스트를 위해

샘플 게시글이 몇개 필요합니다.

저는 오래전에 개설하고 사용하지 않은

블로그를 하나 사용해서 제작 과정을

하나씩 공유해보겠습니다.

현재 애드센스를 달고 있는 블로그는

SEO나 광고수익상 영향을 미칠 수

있으니 새로운 블로그를 개설하거나

좀 안쓰는 블로그를 사용하는게 좋습니다.

- 트레이드 스마트라고 비트코인이나

주식 전용 블로그를 만들려고

했는데 방치하고 있었습니다.

블로그관리 홈의 스킨변경으로 가서

Book Club 을 적용합니다.

딱히 Book Club이 아니라도 상관은 없으나

xml 파일이 다르기 때문에 이 포스팅의

내용과 차이가 날 수 있습니다.

여기서 편집이나 블로그관리 홈의

메뉴인 스킨편집을 클릭합니다.

왼쪽에는 블로그가 나오고

오른쪽에는 스킨편집 창이 나옵니다.

이게 티스토리에서 제공하는 일종의

WEB IDE (통합개발환경)이라 보면 됩니다.

웹인 것도 그렇지만 VS CODE를 쓰는

시대에 좀 애매합니다. 사실 티스토리가

좀 더 편의적인 툴을 만들어줬다면

좋았을 텐데, 이 화면이 몇년전에도

그대로였던 것으로 봐서는 거의

업데이트는 안하는 것 같습니다.

티스토리 꽁짜로 쓰게 해주는 것은

매우 감사한 일인데 이런 것은 쪼금

시대에는 맞지 않는게 아닌가,

(티스토리 직원들 열심히 하는 것

알고 있습니다, 싸랑해요~!)

일단은 VS CODE시대니까 지적은

해둡니다. 스킨 제작이 외부 에디터에서

끝나는 것이 아니라 조금 아쉬움이 있는

툴인데 어쨋든 스킨을 만들고자 하면

이 화면을 사용해야 합니다.

스킨편집 아래에 홈 설정, 기본설정 그리고

그 아래에 쭈욱 나오는 옵션(변수라고도 한다)은

xml 파일과 관련있는 것들 입니다.

원래는 xml 파일부터 디자인 하는게

맞긴 한데 그렇게 하면 이론만 한시간

듣다가 포기할 수 있으므로,

그래서 skin.html 파일부터

수정하는 방식으로 포스팅을 쓰는겁니다.

처음 xml은 기본을 그대로 사용하고

나중에 skin.html 파일을 완성한 후

손을 대면 자연스럽게 이해가

되니까 걱정할 필요는 없습니다.

그 다음은 스킨편집의 html 편집을

클릭해서 코드 편집기로 들어갑니다.

아래와 같이 HTML | CSS | 파일업로드

탭과 그 옆에 적용이 있습니다.

여기서 skim.html 파일과 CSS를 편집하고

적용을 클릭하면 실제 블로그의 코드가

변경됩니다. 파일업로드는 CSS, 자바스크립트,

이미지 파일, 폰트 등 블로그의 기능을

확장하기 위한 파일을 업로드해서

. 경로로 사용할 수 있습니다.

처음에는 skin.html 파일(화면에 보이는)만

가지고 편집할 것이니까 기존 스킨의

파일들을 그대로 놔둡니다.

부트스트랩을 사용하므로 웬만한 CSS는

HTML 내부에 작성했다가 나중에 깨끗하게

CSS 파일쪽으로 분리할 겁니다.

*다음 순서는 비주얼 스튜디오 코드에서

skin.html을 만들 것 입니다.

이렇게 두개의 에디터를 사용하는게

다소 불편할 수 있습니다만,

티스토리 치환자는 로컬 PC의

에디터에서 작동시킬 수가 없습니다.

결과물을 보려면 티스토리 스킨 편집기에

실제 적용을 할 필요가 있습니다.

코드의 생성은 VSC같은 로컬 에디터가

훨씬 빠르고 편하니까 수정된 내용을

티스토리 스킨 편집기에 덮어씌우는

방식으로 진행하면 그나마 좀 낫습니다.

똑같은 파일을 양쪽에서 수정하다보면

그 찾는 시간이라던가 오래걸리고,

또 빡쳐서 포기할수가 있습니다.

혹시 이것보다 더 좋은 방법을 알고 있는

사람이 있다면 알려주시면 고맙겠습니다.

결국은 귀차니즘을 줄이기 위한

목적이라서, 더 나은 방법이 없다면

- 먼저 VS CODE에 코드를 작성하고

그 다음에 skin.html 파일 전체를

덮어씌워서 티스토리 치환자의

적용 결과를 확인한다.

*이것의 반복작업을 할 겁니다.

스킨작업을 하다보면 복사 붙여넣기의

반복 노가다같이 느낄때도 있습니다.

그러나 코딩이라는게 그렇습니다.

더 추상화가 되고 더 스마트한 방법론이

나오기 전에는 노가다를 할만큼 해야

작업이 끝납니다. 멀쩡한 CSS를 놔두고

SASS 같은 언어를 별도로 사용하는

이유는 조금이라도 스마트한 방법을

찾다보니까 나온 겁니다.

CSS를 편하게 할려고 만들었는데

결국은 CSS와 SASS, SCSS 까지 세 종류를

배워야 한다는 것은... 결국은 손으로

노가다를 하다가 안되니 학습 노가다가

반복되는데 이러면 IT의 미래는 좋아집니다.

지금 하는 사람들이 좀 힘들 뿐이지요.

(코딩은 반복작업을 피할 수 없다)

VSCODE를 설치해서 바로 시작해보겠습니다.

MS 문서를 참고하여 설치하거나

아래 게시물을 참고해도 됩니다.

HTML5 기초 | 비주얼 스튜디오 코드 설치와 초기설정, 테마, 실행 테스트

비주얼 스튜디오 코드 beautify 설치와 단축키 설정

확장 플러그인에 live server를 설치해야 하고

beautify는 개인적으로 추천합니다.

html파일을 작성할 때는 가독성을 위해

많이 사용하는 편입니다.

Emmet 축약인 ! 으로 HTML5 문서의

스켈레톤(와꾸)를 생성합니다.

당연한 거니까 코드는 따로 싣지 않겠습니다.

인제 부트스트랩 5를 설치해야 하는데

다운로드 받거나, 패키지 매니저를

통해 설치해도 되지만 여기서는

CDN을 사용해서 설치하겠습니다.

CDN이 마음에 들지 않을 수도 있는데

티스토리 반응형 스킨도 제이쿼리를

damucdn에서 가져와서 사용합니다.

세계적으로 bootstrap 5 보급이

늘어나고 있기 때문에 나의 블로그가

아니더라도 다른 사이트에서

bootstrap 5를 설치했다면(다운로드)

브라우저에 캐시되서 다운로드 방식보다

더 빨리 바로 실행될 수도 있습니다.

요런 것은 스킨을 다 만들고 SEO 때

고려할 사항이지만 일단 CDN이 그렇게

나쁜 것은 아니다, 클라우드 컴퓨팅을

사용하면 이 boostrap 5를 다운로드

하는 트래픽이 다 돈이기 때문에

소규모 프로젝트에는 CDN 방식이

더 장점이 될 수 있습니다.

암튼 번거로운 설치 과정을 건너뛰게도

해주기 때문에 여기서는 CDN설치합니다.

아래 공식사이트에서 CSS와 JS(Bundle)판을

skin.html 코드에 추가합니다.

Introduction · Bootstrap v5.0 (getbootstrap.com)

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

css는 header에 js는 </body> 전에 추가합니다.

제대로 작동하는지 hello world를 출력해봅니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- bootstrap 5 css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Document</title>
</head>
<body>
    <div class="container-fluid bg-primary text-light">        
        <h1>
            hello tistory!
        </h1>
    </div>

    <!-- bootstrap 5 js bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

container-fluid가 빈틈없이 공백을 매꾸고

bg-primary text-light 가 모두 적용되었습니다.

간단한 모양이지만 html을 가지고 이걸 하려면

CSS에 더 많은 코드가 필요합니다.

부트스트랩을 사용하는 이유입니다.