부트스트랩 5 티스토리 스킨 만들기 5 - 사이드바 와꾸
사이드바 와꾸
지난 포스팅에서 블로그의 레이아웃을
잡았는데 메인콘텐츠는 글 본문을
출력하는 곳이고 사이드바는
블로그정보, 카테고리 등 사이드적인
내용을 출력하는 영역입니다.
부트스트랩 5 티스토리 스킨 만들기 4 - 블로그 레이아웃 (container/row/col)
블로그 레이아웃 부트스트랩에서 레이아웃은 container안에 row/col 을 사용하는 반응형(responsive) 그리드 레이아웃입니다. 그리드(grid)는 바둑판 같은 2차원 평면을 사용하는 레이아웃입니다. 이게
digiconfactory.tistory.com
이번 포스팅에서는 사이드바의
와꾸(구조)를 만들어 보겠습니다.
부트스트랩 5에는 여러가지
표준 컴포넌트가 있습니다.
블로그의 사이드바에는 보통
박스를 쓰면 되는데 카드(card)
컴포넌트가 여기에 어울립니다.
아래 캡쳐에서는 카드를 써서
블로그 정보와 카테고리를 구현합니다.
블로그 정보에는 프로필 이미지가
들어가는데 웬지 카드(card)
컴포넌트를 쓰는게 어울립니다.
이미지를 top으로 하면 위쪽에
나오고 bottom은 아래쪽입니다.
세부적인 class 이름은 부트스트랩5
문서를 참고하면 됩니다.
카테고리는 치환자가 바꾸는 태그에
부트스트랩의 클래스가 적용이
안되니까 나중에 좀 손을 봐야하구요.
일단 전체 그림을 보기 위해서
자리를 잡아놓습니다.
티스토리 관리자에서 사이드바에
관련한 각종 모듈과 설정을
할 수 있는데 그럴려면 이렇게
만들어 놓은 HTML에다가
티스토리 치환자를 적절한 위치에
배치하는 작업이 필요합니다.
HTML에다가 치환자를 추가로
입히는 작업이 쉽지는 않습니다.
태그가 많아지면 헷갈리기도 하니까요.
해서 모듈에 대한 세부적인 내용은
전체 스킨 구조가 나온 후에
추가하도록 하겠습니다.
일단은 이 정도로 스킨의
기본구조를 만듭니다.
card문서를 적당히 베껴와서
html 문서를 만듭니다.
<!-- 사이드바 시작 -->
<div class="col-xl-3 col-md-4 border">
<h2>*사이드바</h2>
<!-- profile card s -->
<div class="card bg-warning text-dark border-danger mb-3">
<div class="card-header">블로그정보</div>
<div class="card-body">
<img src="https://picsum.photos/300/300" alt="image" class="card-img-top">
<hr>
<h5 class="card-title"><b>블로거</b></h5>
<p class="card-text">블로그 설명</p>
<hr>
<a href="#" class="btn btn-primary">button</a> 이메일 등 아이콘
</div>
<div class="card-footer text-muted">
footer
</div>
</div>
<!-- profile card e -->
<!-- category s -->
<div class="card border-secondary mb-3">
<div class="card-header">
카테고리
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">item-1</li>
<li class="list-group-item">item-2</li>
<li class="list-group-item">item-3</li>
</ul>
<p>카테고리 치환자로 바꿔야함</p>
</div>
<!-- category e -->
</div>
<!-- 사이드바 끝 -->사이드바 치환자로 변경
몇가지 항목을 치환자로 바꿔서
티스토리 스킨에 업로드하면
아래와 같이 블로그 정보와
카테고리 리스트가 나옵니다.
블로그 정보야 뭐 별거 없을 테고
카테고리 같은 경우 두가지 치환자가
있는데 첫번째는 테이블 방식
두번째는 리스트 방식입니다.
요새는 리스트를 많이 쓰지만
선택은 자유입니다.
나중에는 검사 html을 열고 치환자로
변경된 클래스 이름을 찾아서 직접
수정할 것들이 좀 있습니다.
콤포넌트를 사용해서 부분을 만드는
방식이므로 세부적인 수정사항은
모두 뒤로 미뤄 두겠습니다.
텍스트 정렬이라던가 그런 것도
지금 당장할 필요는 없겠지요.
이런 코드가 치환자입니다.
아래는 skin.html의 사이드바 부분입니다.
딱히 별거 없습니다.
블로거 이름이 들어가는 곳에
⟪코딩갘 - 100°⟫ 넣으면 됩니다.
<!-- 사이드바 시작 -->
<div class="col-xl-3 col-md-4 border">
<h2>*사이드바</h2>
<!-- profile card s -->
<div class="card bg-warning text-dark border-danger mb-3">
<div class="card-header">블로그정보</div>
<div class="card-body">
<img src="https://tistory1.daumcdn.net/tistory/3367011/attach/8cfe2971401a480a879223f2119e4075" alt="profile-image" class="card-img-top">
<hr>
<h5 class="card-title"><b>⟪코딩갘 - 100°⟫</b></h5>
<p class="card-text">코딩 (파이썬, C언어, 자바) 및 IT정보 블로그</p>
<hr>
<a href="#" class="btn btn-primary">button</a> 이메일 등 아이콘
</div>
<div class="card-footer text-muted">
footer
</div>
</div>
<!-- profile card e -->
<!-- category s -->
<div class="card border-secondary mb-3">
<div class="card-header">
카테고리
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">item-1</li>
<li class="list-group-item">item-2</li>
<li class="list-group-item">item-3</li>
</ul>
<p>카테고리 치환자로 바꿔야함</p>
<p>
분류 전체보기 (1291)
IT뉴스 (94)
IT일반 (227)
IT출판 (161)
블록체인 - Blockchain (31)
암호화폐 투자 (191)
운영체제 메뉴얼과 팁 (31)
코딩(CODING) (380)
컴퓨터구조 (10)
FRAMEWORK (58)
모바일 게임 (8)
알고리즘(Algorithm) (13)
IT 수학 (25)
IT 서적 리뷰 (23)
로블록스(Roblox) (2)
일본어 (8)
영화 (1)
IT상품평 (14)
과학일반 (1)
컴퓨터보안 (2)
</p>
<p>
</p>
</div>
<!-- category e -->
</div>
<!-- 사이드바 끝 -->
와꾸가 완성될 때까지는
하나의 포스팅을 좀 짧게짧게
끓어서 가겠습니다.
이 코드들을 추가하는 것은
어렵지 않지만 자신의 코드로
소화시키려면 꽤 생각도 하고
이것저것 시도해봐야 될겁니다.
이 포스팅의 코드 조각들은 하나의
참고로써 보면 되고 중요한 것은
자신만의 코드를 짜는 겁니다.
보잘것 없어 보여도 한줄이라도
자신의 코드로 소화하는 것과
남의코드를 영혼없이 복붙하는 것과는
나중가면 엄청난 차이가 납니다.
사이드바는 이정도로 하겠습니다.
나중에 스킨 구조가 나오면
그때가서 자잘하게 할일이 많으니까
일단 큰 구조를 잡으면서 가겠습니다.
