수학과 사는 이야기

날마다 조금씩 블로그 살결을 바꾸고 있다. 오늘은 옆에서 미끄러져 나오는 메뉴 만들기를 소개한다. 수업 시간에 쓸 목적으로 만든 블로그라 목록이 많다. 사이드바가 길어지는 것이 맘에 들지 않아 카테고리만 따로 뗴어내 감춰두고 필요할 때 보이게 하고 싶어졌다. 찾아보니 자바스크립트(javascript)나 제이쿼리(jquery)로 만든 것이 많다. 아무래도 씨에스에스(CSS)로만 만든 것이 맘에 들어서 골랐다. 먼저 skin.html파일 윗부분에 아래와 같은 태그를 넣고 style.css파일에 이어지는 코드를 넣어서 완성하였다. 나름대로 보기 좋다. ≡ /* ---------------------------------------------- */ /* menu*/ /* ---------------------..

요즘은 반응형 스킨이 대세다. 왜일까? 티스토리에서는 모바일로 접속했을 때 보여주는 스킨을 따로 제공하고 있다. 하지만 모바일 스킨은 주소가 다르다. https://suhak.tistory.com이 주소라면 모바일은 https://suhak.tistory.command/m으로 주소가 다르다. 같은 글이지만 주소가 둘이라면 검색 엔진에서 노출될 가능성이 그만큼 줄어든다. 때문에 같은 주소로 검색이 되도록 하는 것이 중요하다. 반응형 스킨이 아니라면 데스크 탑이나 모바일 둘 가운데 어느 하나에 최적화된 모습으로 보여지기 때문에 아무래도 보기 불편할 수도 있다. 처음에는 1단으로 스킨을 만들어서 약점을 보완했는데 한계가 있었다. 이를 극복하기 위해 모바일과 데스크탑에 따라 서로 다르게 보여주는 반응형 스킨을 ..

블로그 살결을 다듬을 때 아이콘이 필요하다. 개인적으로 이미지가 없는 가벼운 살결을 좋아하지만 모두를 텍스트로 만들면 아무래도 볼품이 조금 아쉽다. 내 블로그 살결에 있는 몇몇 아이콘은 손으로 그려서 스캔한 것이다. 아무래도 정교함이 떨어진다. 이런 저런 검색으로 아이콘을 아주 쉽게 만들 수 있는 방법을 찾았기에 소개한다. http://fontawesome.io/icons/ 연결고리를 따라 들어가면 아래와 같은 아이콘을 만난다. Fontawesome에서는 오로지 CSS만으로 위에 있는 벡터 아이콘을 만들고 크기와 빛깔을 바꿀 수 있다. 그림자까지 넣을 수 있다. 보고 있는 블로그 사이드바에 있는 목록 앞에 달린 그림이 이렇게 만든 것이다. 쓰는 방법도 아주 간단하다. 먼저 이 사이트에 이메일로 인증을 받..

개인적으로 블로그 스킨을 우리말 '살결'로 부르고 있다. 영향력 없는 나 혼자 그렇게 부른다고 뭐가 달라지랴마는 스킨보다 정이 가는 말이다. 내 식대로 제목을 달자면 '티스토리 살결 꾸미기'에서 글갈래 꾸미기가 되겠다. 티스토리 카테고리를 불러 들이는 치환자는 둘이 있다. 하나는 이고 다른 하나는 이다. 첫째는 큰 갈래만 보여주고 아래 작은 갈래는 감추어지는 것이고 둘째는 작은 갈래까지 모두 펼쳐서 보여주는 것이다. 차이는 목록을 table로 만드는가 아니면 ul li로 만드는가다. 으로 만들어야 카테고리 꾸미기가 쉬워진다. 치환자는 아래와 같은 HTML로 치환되게 된다. 글갈래 글갈래 전체 메뉴1 메뉴2 메뉴3 메뉴3-1 메뉴3-2 메뉴4 메뉴4-1 메뉴4-2 이제 CSS 파일에 적어야 할 것을 알아보..

블로그 스킨을 만지작거리다 보면 아이콘이 필요하다. 아주 잘 만든 무료 아이콘도 많지만 직접 손으로 그려서 써 보니 맘에 들고 살짝 뿌듯하여 조금 더 만들어 보기로 했다. 이런 저런 무료 아이콘을 참고하여 손으로 그렸다. A4에 한 변이 2cm인 정사각형 칸을 그리고 안에 연필로 그림을 그리고 플러스펜으로 덧칠했다. 하나는 내가 그리고 다른 하나는 우리 딸 아이가 그렸다. 밑에 있던 연필 선이 제대로 지워지지 않은 부분이 있어 아쉽다. 크게 볼 때는 지저분한 부분도 파일을 작게 줄이면 생각보다 아주 깔끔해진다. 포토스케이프로 열고 필요한 부분만 잘라서 아이콘을 만들었다. 아무래도 높이가 같아야 보기 좋을 것 같아서 높이를 25px로 통일하여 파일을 만들었다. 다 만든 것은 아니고 블로그 스킨에 쓸 것만 ..