티스토리 스킨8 #11. 티스토리 스킨 상단바 만들기 2탄 지난번에 만든 티스토리 스킨 상단바는 정말 너무 안이뻐서 참을수가 없었다. 노력한게 아까워서 그냥할까싶다가도, 그래도 이왕하는거 제대로 예쁘게 해보자는 생각에 상단바 디자인을 변경하게 되었다.티스토리 스킨 상단바 만들기완전히 새로운 스타일이다. 구버전과 신버전을 이미지로 만나보도록 하자.이것은 구버젼이다. 보다시피, 카테고리가 상단바에도 있지만 좌측에도 따로 메뉴로 만들어놓았다. 굳이 이럴 필요가 없다고 판단했고, 또 상단바에 적용했던 navbar이나 dropdown형식의 부트스트랩 기능이 생각보다 예쁘게 표현되지 않았기 때문에.......아래와 같이 좀 더 깔끔하게 가져가기로 결정하였다.그냥 심플하게 상단바를 만들기로 했다. 부트스트랩을 토대로 하는 것인만큼, 철저히 부트스트랩처럼 느껴지는 블로그로 만.. 2018. 4. 11. #10. 티스토리 상단바를 창 크기에 따라 조절하기 이번 포스팅에서는 만들고있는 티스토리 상단바, 즉 네비게이션 바를 좀 더 섬세하게 다듬어보는 작업을 해보았다. 특히, 필자의 경우 이쁜 네온사인같은 블로그 간판을 만들고 싶었기 때문에, 포토샵으로 작업한 이미지를 업로드하여 진행했다.문제는, 사람들이 보는 브라우져 창의 크기가 변해버리면, 이미지가 그에 맞게 자동으로 축소되거나, 사라지는 등의 효과가 있어야한다는 점이다. 그게 없이 이미지 크기가 그저 일정하기만 하다면, 웹 창 크기가 줄었을 때 보일 내 블로그 모습이 안봐도 눈에 뻔할만큼 기괴할 것이리라...티스토리 상단바를 브라우져 창 크기에 따라 조절하기먼저, 다양한 상단바를 제공하고 있는 부트스트랩을 이용한다. 지금까지 필자가 구현했던 코드와 웹페이지의 모습은 아래와 같다.보다시피, 티스토리 스킨경.. 2018. 4. 10. #8. 티스토리 본문 글자 크기 / 글씨체 바꾸는 방법 지난 포스팅에서는, 러프하게 만든 스킨데이터를 티스토리에 업로드하여 적용시키는 과정까지 진행했다. 실제로 결과물을 보면서 작업하는 것이 더 좋기 때문에 진행한건데.. 바로 문제가 보였다. 바로 본문이 너무 작고, 폰트가 너무 못생겼다는 점이다.그래서 이번 포스팅에서는 본문 글씨체를 키우고, 폰트도 원하는 것으로 바꾸는 방법에 대해 알아보자.티스토리 글씨체를 바꿔보자먼저 글씨체를 적용하는 방법에 대해서 알아보자. 두가지 방법이 있다. 첫째, 웹폰트를 이용, 별도의 폰트 업로드과정 없이 바로 적용. 둘째, 별도의 폰트를 다운받고, 티스토리 스킨 데이터에 같이 업로드해서 적용.원하는 폰트가 웹 상에서 제공된다면, 굳이 다운받고 스킨에 업로드할 필요는 없다. 특히 아래 구글에서 제공하는 자체 웹폰트를 사용할 경.. 2018. 4. 1. #7. 티스토리 스킨 업로드하는 방법 지난 포스팅에는 기본적인 치환자 사용 방법까지에 대해 설명했다. [대괄호로 묶인] 다양한 치환자들이 있다는 것을 설명하고, 일단은 글 제목과 글쓴 시간, 그리고 저자 정도까지만 HTML 태그로 구현해보았다. 이제 정말로 그런 치환자들이 잘 작동하는지 살펴볼 시간이다. 이론에 너무 얽매이고 눈에 보이지도 않는 코드와 싸우는 것보다는, 이왕이면 직접 눈으로 결과물을 봐가면서 하면 좋지 아니한가?티스토리 스킨 업로드하는 방법티스토리 유저라면 스킨을 변경하는 방법에 대해서는 잘 알것이다. 그냥 관리자 페이지 들어가서, 원하는 스킨으로 변경하면 자동으로 적용이 된다. 그러나, 필자는 직접 스킨을 만들었기 때문에 이를 업로드하는 과정이 필요하다. 업로드하기 위해서 준비해야할 파일은 최소 3개이다.skin.htmls.. 2018. 3. 30. #6. 티스토리 스킨만들기::: 글제목, 글내용을 배치해보자. 이번 포스팅은 실제 내 계정의 티스토리 글 제목과 글 내용을 배치하는 것을 살펴보도록 하자. 글 제목과 내용 자체를 불러오는 것은 티스토리에서 치환자로써 제공한다. 다만, 확인하기 위해서는 실제로 티스토리 블로그에 우리가 만든 스킨데이터를 입혀야하는데... 일단 포스팅을 통해 알아보도록 하자.티스토리 글 제목, 글 내용 배치시키기.먼저, 우리가 티스토리에 글을 쓴다고 가정해보자. 카테고리를 선택하고, 글 제목을 입력하고, 본문과 태그까지 작성하는 일련의 과정을 떠올려보자. 우리가 HTML과 CSS로 만든 스킨 데이터는, 방금 전에 떠올렸던 모든 과정들을 포함할 수 있어야한다. 대체 어떻게 포함하는 것일까? HTML 코드 상에서 티스토리 글 제목과 글 본문을 대체 어떤 방식으로 불러오는걸까? 정답은 티스토.. 2018. 3. 29. #3. 웹 코딩을 위한 ATOM 에디터 및 패키지 설치 티스토리 스킨 제작은 웹코딩에 대한 기본적인 이해가 약간 필요하다. 약간이라면 약간이고.. 깊게 들어가면 또 한없이 깊게 들어가는데, 기초 중의 기초만 가지고 스킨을 제작해보려고 한다. 필자가 관련 분야 종사자가 아니기 때문에 전문적인 이해도도 없어서이기도 하지만, 간단한 스킨의 경우 깊은 내용까지 필요하지 않다고 생각하기 때문이다. ATOM 에디터 및 패키지 설치기본적으로 코딩을 한다는 것은 컴퓨터 언어로 무언가를 쓰는 행위를 말한다. 즉, 메모장 같은 곳에 TEXT 형식의 무언가 입력하게 되어 있다. 필자가 초등학교 시절, 방과 후 5명 남짓 듣던 코딩 수업에서는 메모장을 이용했다. 메모장에 프로그래밍 언어를 통해 코딩을 하고, 파일 형식을 변환하여 실행시켜보곤 했다.하지만 이번에 연재하는 스킨 제작.. 2018. 3. 16. 이전 1 2 다음
