부트스트랩 5 티스토리 스킨 제작하기

부트스트랩 5 티스토리 스킨 제작

글 모음입니다. 시리즈로 포스팅해서

순서대로 참고할 수 있습니다.

bootstrap 5 grid 시스템 - bootstrap 5 기초 1 (tistory.com)

bootstrap 5 grid 시스템 - bootstrap 5 기초 1

bootstrap 5의 그리드 시스템에 대해서 알아보겠습니다. bootstrap 5 설치하기 bootstrap 5를 설치하는 것이 어렵지는 않지만 간단히 설명하면 직접 다운로드 받아서 사용하는 것과 온라인에서 CDN을 사용

digiconfactory.tistory.com

- 부트스트랩의 핵심인 그리드 시스템에

대해서 설명합니다. 티스토리 스킨에

적용하기 전에 부트스트랩을 먼저 알아야 합니다.

부트스트랩 학습 방법 - bootstrap 5 기초 2 (tistory.com)

부트스트랩 학습 방법 - bootstrap 5 기초 2

부트스트랩은 전세계 프론트엔드 프레임워크에서 70%가 넘는 시장점유율을 가지고 있다고 합니다. 어쩐지 해외의 웹사이트를 돌아다니다 보면 비슷한 레이아웃의 디자인이 많아 보입니다. 심플

digiconfactory.tistory.com

- 부트스트랩 학습방법입니다.

온라인에는 좋은 소스가 많이 있습니다.

하나의 포스팅만으로 부트스트랩을

배우기는 쉽지 않습니다. 모든 컴퓨터

강사가 말하지만 공식문서를 볼 수

있어야 합니다. 부트스트랩은 일부

한글 페이지도 제공하고 있습니다.

부트스트랩 5 티스토리 블로그 스킨 만들기 1 - 개요 (tistory.com)

부트스트랩 5 티스토리 블로그 스킨 만들기 1 - 개요

부트스트랩 5 티스토리 스킨 티스토리는 CMS 블로그 서비스를 제공하는 국내 업체 중에서는 가장 자유롭게 사용할 수 있는 블로그입니다. 자유도에서 호스팅이나 클라우드 컴퓨터와 비교할 수는

digiconfactory.tistory.com

티스토리에서 부트스트랩 5를

활용해서 스킨을 만드는 튜토리얼의

개요입니다. 한글 페이지에 부트스트랩의

사용이 저조한 것은 국내 블로그 시장의

특성(네이버, 티스토리) 때문입니다.

다행히 티스토리에는 부트스트랩5를

사용해서 스킨을 만들 수 있습니다.

부트스트랩 5 티스토리 블로그 스킨 만들기 2 - 블로그 준비 (tistory.com)

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

블로그 준비 본격적으로 부트스트랩 5 티스토리 스킨을 만들기 위한 준비를 해보겠습니다. 우선 티스토리 블로그가 필요합니다. 티스토리 계정을 만드는 방법은 아래 게시물을 참고합니다. 추

digiconfactory.tistory.com

티스토리 블로그 준비하는 방법입니다.

국내 CMS 중에는 그래도 티스토리가

가장 쓸만하고 자유도가 있습니다.

티스토리에 부트스트랩을 적용하기

위해서는 티스토리 블로그를

다룰 수 있어야 합니다.

부트스트랩 5 티스토리 블로그 스킨 만들기 3 - 헤더 (Header, Navbar) 블로그 타이틀과 메뉴 치환자 (tistory.com)

부트스트랩 5 티스토리 블로그 스킨 만들기 3 - 헤더 (Header, Navbar) 블로그 타이틀과 메뉴 치환자

헤더(Header) 블로그 타이틀 부트스트랩 5 navbar 헤더(header)는 블로그의 맨위에 타이틀을 표시하고 반응형 메뉴를 넣는 곳입니다. 시멘틱태그(Sementic Tag)에서는 header와 nav 를 분리하기도 하는데 부

digiconfactory.tistory.com

헤더와 네비게이션(navbar)를

만드는 방법입니다. 디자인이

흔하다고 할 수도 있지만 반응형이고

이 정도로도 괜찮은 스킨이 나옵니다.

SEO를 위해서는 그렇게 복잡한

스킨보다 나을 수 있습니다.

부트스트랩 5 티스토리 블로그 스킨 만들기 3 - 헤더 (Header, Navbar) 블로그 타이틀과 메뉴 치환자 (tistory.com)

부트스트랩 5 티스토리 블로그 스킨 만들기 3 - 헤더 (Header, Navbar) 블로그 타이틀과 메뉴 치환자

digiconfactory.tistory.com

본격적으로 티스토리 치환자를 사용해서

부트스트랩을 만들어 봅니다.

부트스트랩 5 티스토리 스킨 만들기 4 - 블로그 레이아웃 (container/row/col) (tistory.com)

부트스트랩 5 티스토리 스킨 만들기 4 - 블로그 레이아웃 (container/row/col)

블로그 레이아웃 부트스트랩에서 레이아웃은 container안에 row/col 을 사용하는 반응형(responsive) 그리드 레이아웃입니다. 그리드(grid)는 바둑판 같은 2차원 평면을 사용하는 레이아웃입니다. 이게

digiconfactory.tistory.com

부트스트랩의 레이아웃은 그리드를 씁니다.

모바일과 PC 데스크탑 두개를 우선시하면

가성비가 좋은 레이아웃이 나옵니다

부트스트랩 5 티스토리 스킨 만들기 5 - 사이드바 와꾸 (tistory.com)

부트스트랩 5 티스토리 스킨 만들기 5 - 사이드바 와꾸

사이드바 와꾸 지난 포스팅에서 블로그의 레이아웃을 잡았는데 메인콘텐츠는 글 본문을 출력하는 곳이고 사이드바는 블로그정보, 카테고리 등 사이드적인 내용을 출력하는 영역입니다. 부트스

digiconfactory.tistory.com

사이드바에 대한 스킨을 만듭니다.

보통 PC에서 사용하기 편한

스킨을 목표로 합니다.

부트스트랩 5 티스토리 스킨 만들기 6 - 본문 글 정보 출력 (tistory.com)

부트스트랩 5 티스토리 스킨 만들기 6 - 본문 글 정보 출력

본문 글 정보 이번 포스팅은 부트스트랩 5 티스토리 스킨의 본문 글 정보 출력입니다. 티스토리 치환자 웹사이트의 글 치환자를 참고해서 만들 수 있습니다. html 의 문서로 출력하면 아래와 같습

digiconfactory.tistory.com

이제 본문을 출력해 봅니다.

블로그는 무엇보다 포스팅이 중요합니다.

포스팅 제목에 h1 태그를 적용하는 것부터

사소한 것들이지만 중요한 작업입니다.

부트스트랩 5 티스토리 스킨 만들기 7 - 사이드바 치환자

사이드바(sidebar) 사이드바에는 블로그 프로필, 카테고리, 카운터, 배너 등이 들어갑니다. 티스토리 스킨이 좋은게 사이드바를 이용해서 코드를 삽입할 수 있습니다. html 뿐만 아니라 자바스크립

digiconfactory.tistory.com

사이드바 치환자를 사용해서

와꾸를 잡아놓은 사이드바의

각 기능들을 추가합니다.

사이드바 기능은 나중에

필요할 때 더 추가할 수 있습니다.

부트스트랩 5 티스토리 스킨 만들기 8 - 구글 SEO /리스트, 리스트 페이징

구글 SEO 부트스트랩 5 티스토리 스킨 제작에 대한 8번째 포스팅입니다. 지난 포스팅에서 사이드바의 기능들을 몇가지 구현하고 요령을 알았다면 이제 티스토리 치환자 기초 문서를 한 6~70%는 커

digiconfactory.tistory.com

부트스트랩 5 티스토리 스킨 만들기 9 - 방명록 치환자

방명록 치환자 이번 포스팅은 방명록 치환자를 간단히 알아보겠습니다. 방명록은 타인이 블로그에 다녀가면서 인사를 하는 페이지입니다. 티스토리 로그인이 된 사용자와 비로그인 사용자가

digiconfactory.tistory.com

부트스트랩 5 티스토리 스킨 만들기 10 -스킨 정보 파일 / 홈커버

스킨 정보 파일 스킨 정보 파일은 스킨 초기화 정보를 담고 있는 xml 파일입니다. 기본적인 분류를 하면 skin 태그 안에 - 스킨에 대한 정보는 information - 저자 기본 정보 author - 스킨 기본 설정 defaul

digiconfactory.tistory.com

부트스트랩 5 티스토리 스킨 만들기 11 튜토리얼 완료 - 스킨 옵션, SVG 태그 아이콘

마지막 튜토리얼 부트스트랩 5 티스토리 스킨 만들기의 마지막 튜토리얼입니다. 그 동안 부트스트랩 5의 티스토리 적용에 대해서 가이드를 작성했는데, 스킨옵션 에 대해서 다루면 이제 기본 튜

digiconfactory.tistory.com

부트스트랩 5 티스토리 스킨 제작하기

공유하기

티스토리툴바