티스토리 스킨9 티스토리 블로그 프로필 카드 바꾸기 언제부터인가 티스토리에 블로그를 소개하는 공간이 나타난다. 찾아보니 모바일 화면에 있던 것을 이제 피씨 화면에도 보여주는 것이라고 한다. 그런데 이게 살짝 눈에 거슬린다. 약간 구글스러운 걸 좋아해서 이대로도 괜찮지만 이것이 눈에 거슬려서 없애는 사람이 있다는 사실을 알았다. 없애는 방법을 찾다가 보니 이걸 꾸며서 남겨두고 싶다. 그래서 아래와 같이 바꿔서 남겨두려고 한다. 관리/꾸미기/스킨편집/ CSS에서 적당한 곳에 아래를 넣어준다. div[data-tistory-react-app="Namecard"] { display: block; } .tt_box_namecard{ border-radius: 20px; border: 1px solid #ddd ; margin-bottom: 20px; } 만약에 아.. 2024. 1. 23. 글꼴의 종류 글꼴에 따라 블로그 분위기가 달라지므로 블로그 스킨을 만들 때 어떤 글꼴을 고를까를 고민해야 한다. 글꼴 모임 글꼴 보기 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.. 2023. 1. 19. 행-높이(line-height)와 행간(leading) 글자 크기와 마찬가지로 행 높이(line-height) 또한 가독성에 큰 영향을 미친다. 전통적인 행간(leading)은 아래 그림과 같이 아래 끝선과 위 끝선 사이의 거리를 말한다. 금속활자로 찍을 때 행과 행 사이에 기다란 납(lead)을 끼우는 데서 유래한 말이라고 한다. 활자에서 문자 'M'을 찍는 틀은 정사각형에 가깝다. em square는 뜻으로 글자 크기를 나타내는 단위를 em으로 정했다. 'M'의 가로 길이가 기준이 된다. CSS에서 조절하는 행-높이(line-height)는 선-상자(line-box)의 높이를 말하는데 행간을 이등분하는 선 사이의 높이와 같다. 행-높이가 글자 크기의 1.5배가 될 때가 가독성이 좋다고 한다. 사람마다 다르겠지만 나는 조금 더 넓어야 보기 좋다. 그래서 이.. 2023. 1. 18. 블로그 본문 글씨 크기는 얼마? 블로그 스킨을 바꾸면 고치고 싶은 부분이 눈에 띈다. 그 가운데 본문에 쓰는 글꼴과 크기가 있다. 블로그 본문에 가장 좋은 글꼴과 크기는 뭘까? 사람마다 느낌은 다르니까 정답은 없다. 블로그 본문은 쉽게 읽을 수 있어야 한다고 생각한다. 개인적으로 노안이라서 작은 글씨는 눈에 잘 들어 오지 않는다. 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은 지정된 .. 2023. 1. 17. 티스토리 제목에 번호 붙이기 HTML은 HyperText Markup Language를 간단하게 적은 것이다. 굳이 우리말로 옮기면 쯤 된다. 종종 잊어버리는데 Markup언어이므로 태그를 잘 활용하면 논문처럼 상당히 체계적인 글을 쓸 수 있다. 글을 입력할 때 그림과 같이 제목과 본문을 따로 설정해 줄 수 있다. 여기서 제목 1, 2, 3을 택하면 자동으로 제목(heading)을 나타내는 h 태그를 입력해 준다. 조심할 점은 티스토리 스킨은 대부분 글 제목에 을 이미 배정되어 있어서 제목 1은 , 제목 2는 을 달아 준다. 스킨에 이미 h 태그에 꾸미기를 해둔 대로 나온다. 이렇게 글 안에 작은 제목을 구별해 두면 검색 로봇이 글을 더 잘 파악할 수 있어서 검색이 잘 되게 만들 수 있다고 한다. 이제 한 발 더 나아가 제목에 자동.. 2023. 1. 12. Whatever 스킨을 살짝 바꾸다 이 블로그는 티스토리 왓에버(Whatever) 스킨을 고쳐서 쓰고 있다. 1. 색을 바꿨다. 2. 카테고리를 글갈래로 부르며 꾸몄다. 3. 웹폰트를 일부분에 적용하였다. 4. $\LaTeX$로 수식을 자유롭게 입력할 수 있다. 5. 분위기를 쉽게 바꿀 수 있도록 맨 앞에 root:에 글꼴과 색을 변수로 만들어 놓았다. 2022. 5. 16. 티스토리 스킨_태그 구름 꾸미기 티스토리는 블로그 스킨을 쉽게 만들고 관리할 수 있도록 치환자를 제공하고 있다. 글을 쓰면서 꼬리표를 잘 달지는 않지만 다른 사람 블로그를 찾았을 때 태그를 살펴보는 습관이 있다. 잘 정리된 블로그는 태그만 보고 주된 관심사를 쉽게 파악할 수 있다. 또 카테고리를 보여주지 않는 스킨을 쓸 때는 태그를 잘 달아서 글갈래를 잘 나누어 주면 좋다. 직접 만든 스킨을 쓰다가 왓에버 스킨으로 바꾸고 몇 가지 손을 보고 있다. 오늘은 태그 클라우드를 고쳐 본다. 참고로 이 블로그에서 '태그'는 '꼬리표'로 바꿔 부르고 있다. 꼬리표 구름으로 해석하면 되겠다. 일반적인 설명은 아래 글을 읽으면 알 수 있다. 태그 클라우드 · GitBook 태그 클라우드 치환자 태그 클라우드는 사용한 태그 리스트를 출력합니다. 태그 .. 2022. 1. 13. 포트폴리오 스킨 톺아보기 티스토리에서 제공하는 블로그 스킨은 아주 좋아서 잘 고르기만 하면 된다. 그동안 직접 만든 스킨을 쓰다가 식상해져서 스킨을 바꿔 보았다.( '스킨skin'을 '살결'로 옮기고 싶지만 이 글에서는 참는다.) 고민 끝에 '포트폴리오'를 골랐다. 기본 스킨이 아주 좋지만 남들과 조금 다르게 고쳐서 쓰고 싶은 사람도 있을 것이다. 예를 들면 배경색이나 글꼴을 바꾸면 분위기가 확 달라진다. 블로그 살결을 고쳐서 개성을 드러내고 싶은 분을 위해 '포트폴리오'을 톺아보려고 한다. 먼저 구조를 살펴보자. 사이드바는 숨겨져 있다가 나타난다. 스킨을 손보려면 해당 영역(Div)의 클래스 이름을 알아야 한다. 파일 index.html을 열어서 클래스 이름을 확인하고 style.css 파일을 고치면 된다. 예를 들어 블로그 .. 2021. 12. 19. 간단-수학 스킨 여러 가지 기본 스킨을 버무려 만들어서 딱히 출발점을 밝히기 어렵다. 그냥 간단한 스킨이다. 1. 사이드바와 헤더를 하나로 모으고 옆에 고정해 두었다. 2. 사이드바 내용을 모두 없애고 카테고리만 남겼다.(카테고리가 너무 많은 블로그는 적당하지 않다.) 3. 커버는 리스트형과 갤러리형 하나씩 남겼다. 4. 아래 파일을 내려받아서 올리면 된다. 2020. 12. 29. 이전 1 다음 반응형
