티스토리 인용구 폰트설정 및 꾸미기

자, 이제부터 당분간은 카테고리를 늘리지 않고 여기서 글을 작성하려고 한다. 서브로 잠시 나갔다가, 다시 접어서 본 블로그로 넘어왔다. 서브에서는 다른 정보를 올릴 생각이고 거기서 잠깐 했었던 포토샵을 비롯해서 파워포인트, 그리고 티스토리 설정을 작성하려고 한다. 잠깐 시군내버스를 1편 작성했는데, 그때도 '아 이거 보통 일이 아니겠는데' 싶었는데 정말 보통일이 아니라 없앴다. 생각해보니 각 터미널에서 면소재지로 들어가는 것뿐만 아니라 나오는 것도 다뤄야 하고 마을버스도 있고 생각했던 것보다 훨씬 방대해서 편집하는 것이 장난 아닐 것 같다. 그래서 다시 한번 생각해보고 어떻게 해야할지 결정을 해야 할 것 같다.

오늘부터 작성하는 이 카테고리는 물론 다른 사람들이 많이 언급한 것들도 있지만, 내가 그동안 알고 있는 것들이나 몰랐던 것을 알게 되면서 습득한 것들을 다시 공유하는 개념으로 작성을 하려한다. 왠만하면 쉽게 해드리려고 하지만 그러지 못할 수도 있다. 최대한 따라오기 쉽게 해드릴 예정이다.

첫 포스트는 며칠전에 알게된 설정방법이다. 티스토리에는 다양한 스킨들이 존재한다. 그 중에 폰트도 다양한데, 거기서 더욱 들어가보면 이 [ 인용구 ] 폰트도 다른 부분이 있다. 

어떤 스킨은 따옴표가 나오는 것이 있고, 또 어떤 것은 명조체가, 또 어떤 것은 박스가 있는 것도 있다. 현재 스킨은 마음에 드는데 인용구가 마음에 안들고, 반대로 스킨은 별론데 인용구가 좋아서 저것만 어떻게 나올 수 있을까 싶은 것이 있다. 그러면 어떻게 해야 설정을 할 수 있을까??

---

에디터와 실제 블로그에서 출력되는 차이

에디터에서 작성되는 글씨와 실제 블로그에서 출력되는 글씨는 차이가 발생한다. 폰트의 이름이나 크기를 비롯해서 다양한 설정에 의해 달라지게 된다. 그래서 일반 폰트로 쓴 것과 인용구를 작성한 것으로 비교하려고 한다.

↓↓↓↓↓↓↓↓

작성 후 실제 출력되는 폰트

현재 이 출력은 티스토리의 뉴스킨 포스터(POSTER) 스킨에서의결과이다. 에디터처럼 인용구에는 왼쪽에 막대바같은 것이 생성되어 있다. 이게 기본인데 이제 이것을 하나하나 바꿔보겠다.

---

쓰고 싶은 폰트를 먼저 찾자

자, 폰트를 설정해보자. 잘 알려진 눈누폰트에서 고르는게 좋다. 보통 인용구의 경우 강조하는 면이 크기 때문에 고딕보다는 명조체 계열이 어울린다. 나눔명조도 괜찮고 다양한 것들이 있는데 일단 나는 경기천년바탕체로 선택해봤다. 실제 본 블로그도 이것으로 설정되어 있다. 누르게 되면 아래에 웹폰트 소스가 나오는데 이 부분을 복사하자. 이 화면은 2개를 캡쳐해서 붙여놓았기 때문에 실제모습과는 다르다.

그 뒤로 스킨편집 html부분에서 복사한 것을 붙여넣자. 보통은 최상단에 넣는다. 나는 그냥 통일성을 위해서 스킨에서 제공하고 있는 폰트 부분에 붙여 넣었다. 자 일단 폰트는 이제 여기서 설정만 해주면 된다.

우리가 하려고 하는 것은 인용구 폰트이다. 티스토리에서 인용구는 [ blockqutoe ] 라는 부분이다. 스킨에서 이 부분을 만져주면 변경이 가능하다. 그래서 찾기로 단어를 입력해주고 찾아주면 된다.

각 스킨마다 다르다. 그렇기에 위의 화면과 같이 나오지 않다는 점을 명심하며, 포스터 스킨에서는 이 부분이 해당한다. 우선적으로 폰트자체를 바꿔보는 것부터 연습을 해보자. 그렇기에 위의 사진처럼 font-family:'GyeonggiBatang';을 추가하자. 그러면 어떻게 변화게 될까?

---

단순 폰트 변경

이것만 해도 폰트가 바뀌게 되었다. 이정도만 하더라도 충분하다. 차이가 발생하게 되니깐 강조가 되고 다르게 보인다. 하지만 인간의 욕심은 끝이 없다고 자꾸 뭘 만지고 싶어진다. 크기도 좀 키우고 싶고, 진하게 하고 싶고, 옆에 회색바도 없애고 싶고, 또는 박스로 해서 더 강조하고 싶고. 이제부터는 응용방법이다.

margin과 padding

일단은 인용구 소스에서 보이는 margin과 padding이다. 간단하게 설명을 하면 마진은 외곽여백이고, 패딩은 안쪽여백이다. 이해가 잘 안되실텐데 예를 들어 모니터가 있다. 최근엔 베젤리스 모니터가 많이 나왔다. 모니터 액정이 폰트라면 이 베젤이 패딩에 속한다. 패딩이 크면 베젤이 넓어지고, 좁아지면 역시 좁아진다. 마진은 이 베젤까지 포함한 것으로 모니터로 치면 눈에는 보이지 않는다. 하지만 마진이 있다고 상상을 하면 대충 예감이 온다. 나도 처음에 이 부분을 검색해서 살펴보았는데 보통 뭔 소리인지 몰랐다가 겨우 알게 되었다.

자, 다시 설명을 이어가자면, 현재 이게 기본 상태이다. margin-top이라는 것은 위쪽 여백을 말하는 것이고 bottom은 당연히 아래이다. 패딩은 이제 인용구박스가 있는데 폰트로부터 8px 16px떨어져 있다는 것이다. 참고로 여기서 8px 16px는 무얼 의미하는 것이냐면 상하로 8px, 좌우로 16px가 각각 줬다는 것이다. 보통은 8px 16px 8px 16px 이렇게 4개로 나눈다. 마진도 마찬가지이지만 상 우 하 좌 이렇게 돌아가게 된다. 그래서 다시 앞서 말한 4개의 px 값을 보면 상으로 8, 우로 16, 하로 8, 좌로 16만큼 패딩을 주었다는 것이다. 근데 이걸 2개로 축소하면 상하 좌우로 바꿀 수 있다.  

근데 이것을 바꿔보았다. top 마진을 주지 않고 패딩을 각 30px 주니 바뀌게 이렇게 되었다. 보기 편하게 앞선 그림과 같이 드래그를 해서 차이점이 선명하게 나오도록 했다. 뭐가 바뀌었는지 알 수 있다.

---

박스형태를 만들어보자

다음은 박스만들기이다. 더욱 강조되는 것이 있다. 기존에는 border-left로 왼쪽에 회색바가 있었다. 이부분을 지워주면 다소 밋밋한 감이 있어서 박스 외곽에 다른 색상으로 테두리를 생성했다. border가 외곽선이다. 나는 1px짜리 점선을 생성했다. dashed가 점선이다. 근데 점선이 아닌 그냥 실선으로 하고 싶다면 solid로 바꿔주면 된다. 이러면 회색바가 사라지게 된다. 그냥 이것을 없애고 싶으면 border-left를 지우기만 하면 된다. 

이정도만 하더라도 충분히 다른 분위기를 만들 수 있다. 여기에 추가로 이미지를 넣는 것도 있다. backgroud에서 url(주소)를 하면 된다. 그래서 따옴표를 불러올 수도 있다. 다양한 방법들이 있으니 위의 기본적인 것에서 더욱 자신이 응용을 하면 된다.