본문 바로가기

티스토리 스킨

티스토리 블로그 프로필 카드 바꾸기 언제부터인가 티스토리에 블로그를 소개하는 공간이 나타난다. 찾아보니 모바일 화면에 있던 것을 이제 피씨 화면에도 보여주는 것이라고 한다. 그런데 이게 살짝 눈에 거슬린다. 약간 구글스러운 걸 좋아해서 이대로도 괜찮지만 이것이 눈에 거슬려서 없애는 사람이 있다는 사실을 알았다. 없애는 방법을 찾다가 보니 이걸 꾸며서 남겨두고 싶다. 그래서 아래와 같이 바꿔서 남겨두려고 한다. 관리/꾸미기/스킨편집/ CSS에서 적당한 곳에 아래를 넣어준다. div[data-tistory-react-app="Namecard"] { display: block; } .tt_box_namecard{ border-radius: 20px; border: 1px solid #ddd ; margin-bottom: 20px; } 만약에 아.. 더보기
글꼴의 종류 글꼴에 따라 블로그 분위기가 달라지므로 블로그 스킨을 만들 때 어떤 글꼴을 고를까를 고민해야 한다. 글꼴 모임 글꼴 보기 Serif: 글꼴을 꾸미는 삐침(serif)이 있다. Noto Serif KR Times New Roman Georgia Garamond Sans-serif: 삐침이 없다. 'sans'는 프랑스어로 '없이'라는 뜻이다. Noto Sans KR Arial Verdana Helvetica Monospace: 모든 글자가 같은 폭을 가져서 기계적인 느낌이 든다. Courier New Lucida Console Monaco Cursive: 손글씨를 닮은 글꼴. Brush Script MT Lucida Handwriting Fantasy: 장식이 많은 재밌는 글꼴. Copperplate Pap.. 더보기
행-높이(line-height)와 행간(leading) 글자 크기와 마찬가지로 행 높이(line-height) 또한 가독성에 큰 영향을 미친다. 전통적인 행간(leading)은 아래 그림과 같이 아래 끝선과 위 끝선 사이의 거리를 말한다. 금속활자로 찍을 때 행과 행 사이에 기다란 납(lead)을 끼우는 데서 유래한 말이라고 한다. 활자에서 문자 'M'을 찍는 틀은 정사각형에 가깝다. em square는 뜻으로 글자 크기를 나타내는 단위를 em으로 정했다. 'M'의 가로 길이가 기준이 된다. CSS에서 조절하는 행-높이(line-height)는 선-상자(line-box)의 높이를 말하는데 행간을 이등분하는 선 사이의 높이와 같다. 행-높이가 글자 크기의 1.5배가 될 때가 가독성이 좋다고 한다. 사람마다 다르겠지만 나는 조금 더 넓어야 보기 좋다. 그래서 이.. 더보기
블로그 본문 글씨 크기는 얼마? 블로그 스킨을 바꾸면 고치고 싶은 부분이 눈에 띈다. 그 가운데 본문에 쓰는 글꼴과 크기가 있다. 블로그 본문에 가장 좋은 글꼴과 크기는 뭘까? 사람마다 느낌은 다르니까 정답은 없다. 블로그 본문은 쉽게 읽을 수 있어야 한다고 생각한다. 개인적으로 노안이라서 작은 글씨는 눈에 잘 들어 오지 않는다. body { font-weight: 400; font-family: 'NEXON Lv1 Gothic OTF''; font-size: 1.0em; line-height: 2.1em; } CSS에서 글자 크기를 나타내는 단위는 여러 가지다. 단위 설명 pt (points) 1pt=1/72인치=0.35mm로 절대 크기. 1inch=25.4mm px(pixels) 화면 해상도에 대한 상대 크기 em 1em은 지정된 .. 더보기