본문 바로가기

SKIN & CSS74

다시 블로그 살결을 다듬다 티스토리 블로그는 스킨을 마음대로 고칠 수 있어서 좋다. 블로그 스킨을 살결로 부르고 싶다. 2020년 한두 달 동안 블로그 살결 다듬기에 빠져 지냈다. 다른 이들이 만든 스킨을 짜깁기하는 수준에 지나지 않지만 나름 만족스러운 스킨을 만들고 뿌듯해하던 기억이 난다. 갑자기 며칠 째 블로그 살결을 다듬고 있다. 그전에 만들어서 공개한 스킨인 수학이야기 2단(Mathstory_2 dan)에 오류가 있음을 알았기 때문이다. 이제까지 잘 보이던 이미지가 며칠 전부터 보이지 않다가 어느 때는 보였다가 하는 문제가 발생했다. 여러 가지 시도를 해보다가 겨우 답을 찾았다. 문제는 따옴표(" ")였다. 1번처럼 img 태그에서 따옴표가 없어도 이미지를 잘 불러오다가 이제는 2번처럼 url을 따옴표로 분리해 주어야 제대.. 2022. 11. 12.
누구나 할 수 있는 다크-모드 스킨 만들기 오늘 갑자기 스킨에 다크-모드를 넣고 싶어졌다. 언제부턴가 낮과 밤에 보는 화면을 다르게 만드는 스킨이 많아졌다. 구글링에 답이 있다. https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ A Complete Guide to Dark Mode on the Web | CSS-Tricks “Dark mode” is defined as a color scheme that uses light-colored text and other UI elements on a dark-colored background. Dark mode, dark theme, black mode, night mode… they all refer to and mean the sam.. 2022. 11. 4.
HTML 이미지 불러 들이기 오류 고침 이 블로그는 티스토리에서 제공하는 스킨을 고쳐서 쓰고 있다. 오른쪽 아래에 위와 아래로 바로 이동할 수 있는 단추를 만들어 두었다. 이제까지 잘 보이던 이미지가 며칠 전부터 보이지 않다가 어느 때는 보였다가 하는 문제가 발생했다. 여러 가지 시도를 해보다가 겨우 답을 찾았다. 문제는 따옴표(" ")였다. 1번처럼 img 태그에서 따옴표가 없어도 이미지를 잘 불러오다가 이제는 2번처럼 url을 따옴표로 분리해 주어야 제대로 불러온다. 1. 2. 멀쩡하던 스킨이 이미지 하나 때문에 보기 싫어서 계속 새로고침을 누르면서 답답해하다가 이제 속이 후련해졌다. 티스토리 스킨 편집 기능이 날로 좋아져서 이제는 html 태그들을 색깔까지 구분해 준다. 기분이 좋다. 2022. 11. 1.
Whatever 스킨을 살짝 바꾸다 이 블로그는 티스토리 왓에버(Whatever) 스킨을 고쳐서 쓰고 있다. 1. 색을 바꿨다. 2. 카테고리를 글갈래로 부르며 꾸몄다. 3. 웹폰트를 일부분에 적용하였다. 4. $\LaTeX$로 수식을 자유롭게 입력할 수 있다. 5. 분위기를 쉽게 바꿀 수 있도록 맨 앞에 root:에 글꼴과 색을 변수로 만들어 놓았다. 2022. 5. 16.
글꼴 이름 알려주는 확장프로그램 블로그를 하다 보면 어제와 다른 느낌을 내고 싶어진다. 가장 확실한 방법은 스킨 바꾸기다. 하지만 블로그 스킨을 바꾸면 여러 가지 설정을 다시 하기가 매우 번거롭다. 블로그에 쓰인 글꼴을 바꾸면 분위기가 확 달라진다. 세상에 글꼴은 엄청나게 많지만 막상 쓰려고 하면 몇 가지 없다. 서핑을 하다가 보기 좋은 사이트를 만나면 어떤 글꼴을 쓰고 있나 궁금할 것이다. 이때 Ctrl+F12를 눌러서 HTML과 CSS를 살피면 쉽게 알 수 있다. 글꼴 이름을 알려주는 확장프로그램을 소개한다. 크롬용 무슨 글꼴? WhatFont The easiest way to identify fonts on web pages. chrome.google.com 확장프로그램을 설치하고 활성화 하면 상단에 f?가 생긴다. 이걸 누르고 .. 2022. 2. 20.
'카카오 프렌즈 티스토리 블로그에 넣기' 이제야 알았다 티스토리 블로그는 네이버처럼 이웃을 만드는 기능은 부족해 보인다. 그런 기능이 있다고 하더라도 별로 쓰지는 않았을 것이다. 블로그를 그냥 일기장처럼 일상을 기록하거나 나중에 찾아볼 데이터 저장고처럼 쓰고 있기 때문이다. 댓글이 달리면 부지런히 댓글을 달고는 있으나 댓글이 아주 많이 달리면 하나하나 댓글을 달지도 못할 것 같다. 방학이라 한가해서 열심히 블로깅을 하다 보니 요즘은 방문자수에 민감하다. 그래도 열심히 다른 사람 글도 읽고 공감도 누르고 구독도 하게 된다. 질문도 했는데 구독 단추를 누르면 구독 실패라고 뜨는 까닭을 알고 싶다. 다른 블로그 글을 읽다가 알았다. 요즘 중간에 카카오 프렌즈 이모티콘을 넣은 글을 자주 만난다. 제법 유행인 모양이다. 카톡을 즐기는 편도 아니라 별 관심이 없었는데 .. 2022. 2. 8.
블로그 글 중간에 있는 작은 제목 꾸미기 보기 좋은 떡이 먹기도 좋다. 블로그 글도 보기 좋아야 한다. 블로그 스킨을 만들 때 가독성을 고려해야 하는 까닭이다. 사람마다 차이가 있겠지만 나는 명조체처럼 삐침이 있는 바탕체가 삐침이 없는 고딕체보다 읽기 편하다. 글꼴 이름에 serif가 있으면 삐침이 있고 sans가 있으면 삐침이 없다. 참고로 sans는 프랑스어에서 '~없다.'를 뜻한다고 한다. 짧은 글은 작은 제목을 따로 빼지 않아도 되지만 긴 글은 아무래도 중간에 작은 제목을 따로 적어야 읽기 편하고 보기도 좋다. 제목을 두껍게 하거나 본문 글꼴과 색을 다르게 만들면 눈에 띄게 보일 수 있다. 당연히 하나하나 정하지 말고 CSS로 조절해 주어야 좋다. CSS로 제목을 꾸미는 방법 먼저 HTML에서 제목(head)을 구별해 두는 태그는 tit.. 2022. 1. 28.
티스토리 스킨 목록더보기 해제 현재 쓰고 있는 스킨은 whatever를 고친 것이다. 오늘 댓글이 달렸다. 정성스레 올려주시는 글 잘 보고 갑니다. 전체보기로 볼 때, PC에서는 '더보기'를 눌러야만 이전 글이 보이는데, 한 편 보고 뒤로 가기를 하면 다시 처음부터 눌러서 내려가야 보입니다. 요 부분이 좀 바뀌어서 편하게 숫자로 넘길 수 있다면, 보기 좀 더 수월할 것 같습니다 ^^ 편안한 저녁시간 보내세요. 나도 내 블로그를 볼 때 글갈래(카테고리)를 보여주는 목록에서 목록에 보이지 않는 다른 글을 찾을 때 불편하다고 느꼈다. 안 그래도 이거 바꾸려고 하고 있었다. 처음엔 HTML이나 CSS를 손 봐야 한다고 생각했는데 꼼꼼히 살펴봐도 찾을 수 없었다. 이 스킨은 원래 그렇게 만든 것이라 바꿀 수 없다고 여기고 포기할까 했는데 의외.. 2022. 1. 28.
티스토리 스킨 카테고리 꾸미기 개인적으로 블로그 스킨을 우리말 '살결'로 부르고 있다. 영향력 없는 나 혼자 그렇게 부른다고 뭐가 달라지랴마는 스킨보다 정이 가는 말이다. 내 식대로 제목을 달자면 '티스토리 살결 꾸미기'에서 글갈래 꾸미기가 되겠다. 티스토리 카테고리를 불러 들이는 치환자는 둘이 있다. 하나는 [ ##_category_##]이고 다른 하나는 [ ##_category_list_##]이다. 첫째는 큰 갈래만 보여주고 아래 작은 갈래는 감추어지는 것이고 둘째는 작은 갈래까지 모두 펼쳐서 보여주는 것이다. 차이는 목록을 table로 만드느냐 아니면 ul li로 만드느냐다. 두 번째로 만들어야 카테고리 꾸미기가 쉬워진다. 치환자는 아래와 같은 HTML로 치환되게 된다. 글갈래 글갈래 전체 메뉴1 메뉴2 메뉴3 메뉴3-1 메뉴3.. 2022. 1. 22.
인용 서식 꾸미기 인용문을 예쁘게 꾸미면 블로그 스킨도 덩달아 예뻐진다. 검색해 보니 보기 좋은 인용이 참 많다. 그 가운데 하나를 골라 고쳐 보았다. 번지가 앎에 관해 여쭈었다. 공자께서 말씀하셨다. "백성의 마땅한 바를 힘쓰고 귀신을 공경하되 멀리하면 안다고 말할 수 있다." 번지가 또 인에 관하여 여쭈었다. "인한 사람은 항상 어려운 큰일을 먼저 도모하고 자신을 위하여 얻는 일은 뒤로 한다. 그리하면 가히 인하다 말할 수 있다." —논어 옹야편 20장 /* HTML */ 번지가 앎에 관해 여쭈었다. 공자께서 말씀하셨다. "백성의 마땅한 바를 힘쓰고 귀신을 공경하되 멀리하면 안다고 말할 수 있다." 번지가 또 인에 관하여 여쭈었다. "인한 사람은 항상 어려운 큰일을 먼저 도모하고 자신을 위하여 얻는 일은 뒤로 한다. .. 2022. 1. 17.
티스토리에서 $\LaTeX$ 수식 입력 이 블로그는 MathJax로 $\LaTeX$ 수식을 입력할 수 있다. 어떤 스킨을 쓰더라도 스킨 편집에서 index.html 파일을 열고 아래를 복사하여 사이에 붙여 넣으면 된다. 수식을 입력할 수 있는 블로그로 만들 수 있다. 수식을 보일 수 있는 문자를 불러들이는 스크립트 한 줄 수식을 볼 수 있게 하는 스크립트 MathJax 사용법은 아래를 참고하자. http://docs.mathjax.org/en/latest/misc/faq.html MathJax Frequently Asked Questions — MathJax 3.2 documentation Will MathJax make my page load slower even if there’s no math? It depends on how you h.. 2022. 1. 16.
아이콘 내려받기 블로그 스킨을 만들 때 필요한 아이콘을 내려받을 수 있는 곳이다. 1. 구글 폰트 역시 구글이다. 가끔은 구글이 만들어 가는 제국이 무섭다. 이러다 모든 것이 구글 안에서 이루어질 수 있겠다 싶다. Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. Font Awesome 이름 그대로 글꼴이 엄청나다. 정리가 아주 잘 되어 있다. Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.. 2022. 1. 15.
반응형

티스토리툴바