티스토리 스킨 만들기 - 사이드바 추가로 만들기 [ 카테고리 추가 X ]

스킨 편집을 공부하고 있습니다. 제 블로그 스킨은 Square입니다. 스킨의 구조는 왼쪽 사이드바(카테고리), 오른쪽이 본문입니다. 본문을 기준으로 오른쪽에 사이드바가 하나 더 있었으면 좋겠습니다. 추가해보려 합니다. html/css를 잘 아시는 분들은 쉽게 하지만 하나도 모르는 저 같은 경우엔 너무 힘드네요. 그래도 이걸 해냈습니다.^^ 시간은 좀 걸렸지만 결국 사이드바를 추가했어요. 기쁨.

 

 

▲ 편집 전 화면입니다.

 

▲ 편집 후 화면입니다. 오른쪽에 사이드바가 하나 더 생겼습니다. 오~

 

 

▲ html 편집입니다. 지난 글에 div 구조 이해를 했다면 어디에 태그를 추가해야 할지 알 수 있습니다.

2019/08/06 - [블로그 T.I.P] - 티스토리 스킨 만들기 - div 구조 이해

 

같은 사이드바라서 저는 사이드바 위에 추가 했고 div id="ngside" 를 넣었습니다.

id는 마음대로 정하면 되지만 다른 곳에서 쓰고 있을지도 모르니 확인 후 작성하세요.

 

 

▲ css 태그입니다. 이것 또한 기존 사이드바 근처에 넣었습니다. 사이드바의 크기, 위치를 잡고 반응형 태그로 넣었습니다. 반응형 태그란 창 크기에 따라 사이드의 구조가 변하는 걸 말합니다.

 

▲ 태그 해석입니다. 참고하세요. 태그 중 필요 없는 부분도 있을 수 있어요.

 

 

이게 반응형입니다. 창 크기가 줄어들면 사이드바가 없어지게 했습니다. 추가한 사이드바에는 중요한 내용을 넣을게 아니라서 없어져도 상관없습니다.

 

오늘 이거 하나 만드는데 2시간은 한 것 같습니다. 하나도 모르는 상황에서 만들었다는 거에 만족합니다. 이번에 한번 해봤으니 다음에 뭔갈 추가할 때는 조금 더 빨리할 수 있겠네요.^^ 지금 블로그에는 아직 적용 하지 않았습니다. 아마 이 글이 올라간 날에는 더 변화 되었을지도 모르겠습니다.