티스토리 스킨 만들기7 #12. 티스토리 본문 하단 바 만들기 (HTML/CSS) 지난 포스팅까지는 상단바를 완성하였다. 이제는 본문 하단을 꾸며보고자 한다. 사실 원래 의도는 본문 하단에 카테고리를 비롯한 모든 메뉴를 다 집합시킬 생각이었으나.. 너무 스크롤만 길어지고, 심플하다는 컨셉과 멀어지는 듯하여 새로이 꾸며보았다. 스킨을 테스트하는 블로그는 아래와 같다.doony-skin.tistory.com티스토리 본문 하단 바 만들기일단 모든 기획은 피피티부터 시작한다. 러프하게 꾸민 본문하단 바의 모습을 보도록 하자.정말 심플 그자체로 꾸미기로 하였다. 단순한 바탕색을 가지고, 안에 Doony World 라는 문구만 써넣기로 결정. 그리고 두니월드에 커서를 가져다대면, 색이 무지개색으로 자연스럽게 변하는 코드로 구현해보고자 한다. 일단은 html 상에서 본문 하단 영역, 즉 본문 아래.. 2018. 4. 16. #11. 티스토리 스킨 상단바 만들기 2탄 지난번에 만든 티스토리 스킨 상단바는 정말 너무 안이뻐서 참을수가 없었다. 노력한게 아까워서 그냥할까싶다가도, 그래도 이왕하는거 제대로 예쁘게 해보자는 생각에 상단바 디자인을 변경하게 되었다.티스토리 스킨 상단바 만들기완전히 새로운 스타일이다. 구버전과 신버전을 이미지로 만나보도록 하자.이것은 구버젼이다. 보다시피, 카테고리가 상단바에도 있지만 좌측에도 따로 메뉴로 만들어놓았다. 굳이 이럴 필요가 없다고 판단했고, 또 상단바에 적용했던 navbar이나 dropdown형식의 부트스트랩 기능이 생각보다 예쁘게 표현되지 않았기 때문에.......아래와 같이 좀 더 깔끔하게 가져가기로 결정하였다.그냥 심플하게 상단바를 만들기로 했다. 부트스트랩을 토대로 하는 것인만큼, 철저히 부트스트랩처럼 느껴지는 블로그로 만.. 2018. 4. 11. #10. 티스토리 상단바를 창 크기에 따라 조절하기 이번 포스팅에서는 만들고있는 티스토리 상단바, 즉 네비게이션 바를 좀 더 섬세하게 다듬어보는 작업을 해보았다. 특히, 필자의 경우 이쁜 네온사인같은 블로그 간판을 만들고 싶었기 때문에, 포토샵으로 작업한 이미지를 업로드하여 진행했다.문제는, 사람들이 보는 브라우져 창의 크기가 변해버리면, 이미지가 그에 맞게 자동으로 축소되거나, 사라지는 등의 효과가 있어야한다는 점이다. 그게 없이 이미지 크기가 그저 일정하기만 하다면, 웹 창 크기가 줄었을 때 보일 내 블로그 모습이 안봐도 눈에 뻔할만큼 기괴할 것이리라...티스토리 상단바를 브라우져 창 크기에 따라 조절하기먼저, 다양한 상단바를 제공하고 있는 부트스트랩을 이용한다. 지금까지 필자가 구현했던 코드와 웹페이지의 모습은 아래와 같다.보다시피, 티스토리 스킨경.. 2018. 4. 10. #9. 티스토리 본문 크기 제한 / 좌우 여백 주는 방법 이번 포스팅에서는 본문이 위치하는 부분에, padding 이라는 코드를 넣어서 상하좌우로 여백을 주는 방법에 대해서 알아보고자 한다. 참고로, CSS padding만 검색해도 margin, padding 등에 대한 정보가 무수히 많이 쏟아지니, 개념에 대해서는 굳이 언급할 필요가 없을 것 같다.티스토리 본문 중앙에 배치시키기 지난 포스팅까지 완료했던 스킨의 대략적인 모습은 다음과 같다.보다시피, 본문이 너무 옆으로 딱 붙어있기 때문에 가독성이 떨어진다. 특히 모바일 화면의 경우, 저렇게 좌우로 딱 붙게되면 엣지있는 모델의 경우에는 제대로 읽을 수가 없다. 고로 어느정도 좌우로 여백을 두고 본문을 배치시킬 필요가 있는 것이다. 또한, 본문이 배치되는 가로 길이, 즉 Width도 적당히 조절하고 싶다. 요즘.. 2018. 4. 5. #8. 티스토리 본문 글자 크기 / 글씨체 바꾸는 방법 지난 포스팅에서는, 러프하게 만든 스킨데이터를 티스토리에 업로드하여 적용시키는 과정까지 진행했다. 실제로 결과물을 보면서 작업하는 것이 더 좋기 때문에 진행한건데.. 바로 문제가 보였다. 바로 본문이 너무 작고, 폰트가 너무 못생겼다는 점이다.그래서 이번 포스팅에서는 본문 글씨체를 키우고, 폰트도 원하는 것으로 바꾸는 방법에 대해 알아보자.티스토리 글씨체를 바꿔보자먼저 글씨체를 적용하는 방법에 대해서 알아보자. 두가지 방법이 있다. 첫째, 웹폰트를 이용, 별도의 폰트 업로드과정 없이 바로 적용. 둘째, 별도의 폰트를 다운받고, 티스토리 스킨 데이터에 같이 업로드해서 적용.원하는 폰트가 웹 상에서 제공된다면, 굳이 다운받고 스킨에 업로드할 필요는 없다. 특히 아래 구글에서 제공하는 자체 웹폰트를 사용할 경.. 2018. 4. 1. #7. 티스토리 스킨 업로드하는 방법 지난 포스팅에는 기본적인 치환자 사용 방법까지에 대해 설명했다. [대괄호로 묶인] 다양한 치환자들이 있다는 것을 설명하고, 일단은 글 제목과 글쓴 시간, 그리고 저자 정도까지만 HTML 태그로 구현해보았다. 이제 정말로 그런 치환자들이 잘 작동하는지 살펴볼 시간이다. 이론에 너무 얽매이고 눈에 보이지도 않는 코드와 싸우는 것보다는, 이왕이면 직접 눈으로 결과물을 봐가면서 하면 좋지 아니한가?티스토리 스킨 업로드하는 방법티스토리 유저라면 스킨을 변경하는 방법에 대해서는 잘 알것이다. 그냥 관리자 페이지 들어가서, 원하는 스킨으로 변경하면 자동으로 적용이 된다. 그러나, 필자는 직접 스킨을 만들었기 때문에 이를 업로드하는 과정이 필요하다. 업로드하기 위해서 준비해야할 파일은 최소 3개이다.skin.htmls.. 2018. 3. 30. 이전 1 2 다음
