티스토리8 티스토리 블로그에 드롭다운 메뉴 만드는 방법 깃허브(GitHub)에 올라온 James Johnson의 짧은 코드를 사용해 간단하게 티스토리 블로그에 드롭다운 메뉴를 넣을 수 있다. 1. HTML 코드 수정 티스토리 블로그 관리에서 스킨 편집 > html 편집 > html로 들어가서 블로그메뉴() 부분 코드를 다음 코드로 변경한다. 블로그메뉴가 없는 스킨이라면 적당한 자리( 앞에 추가하면 된다. 끝. 수동 방식으로 드롭다운 메뉴가 완성된다. 열린노트/IT·SW·디자인 티스토리 블로그 북클럽 스킨 상단메뉴 부분 고정하기(CSS) 티스토리 블로그 북클럽 스킨에서 상단 메뉴(로고, gnb 메뉴 부분) 고정 방법에 대해 포스팅한 많은 글이 있는데, 간단하게 구현하는 방법을 공유한다. CSS에서 #header, #aside, #dimed 세 부분만 수정하면 된다. 1. 헤더 부분 수정 : #header 먼저 스킨 편집의 CSS 탭으로 들어가서 118~120번째 줄에 가 보면 #header 부분이 원래는 아래와 같이 되어 있는데 #header { border-bottom: 1px solid #eee; } 이걸 아래 코드로 바꾼다. 하단 테두리를 없애고, 스크롤을 내려도 메뉴바가 항상 위에 떠 있을 수 있게 Z축 상의 위치를 최상위로 올리고(1010), 배경을 흰색으로 지정해서 스크롤 시 컨텐츠가 비쳐보이지 않게 하고, 상단메뉴 위치를 고.. 열린노트/IT·SW·디자인 티스토리 북클럽 스킨 슬라이더 자동으로 넘어가게 하기 티스토리 북클럽 스킨에서 메인 프로모션 배너, 커버 슬라이더(갤러리 1, 갤러리 2)는 기본 옵션이 멈춤이고, 좌우 등 버튼을 눌러야만 다음 배너나 썸네일로 넘어간다. 스킨 HTML에서 간단한 스크립트 코드를 추가하면 이 슬라이더들이 일정 시간마다 자동으로 넘어가게 할 수 있다. 지정한 시간마다 '다음' 버튼을 누른 것처럼 구현하는 방법이다. 마지막 배너나 썸네일까지 가면 자동으로 멈춘다. 아래 코드 중 원하는 것을 스킨 HTML 코드의 앞에 삽입하면 된다. 숫자는 넘어가는 시간 간격이다. 예컨대 '2500'이면 2.5초마다, '5000'이면 5초마다, '3000'이면 3초마다 넘어간다. 메인 프로모션 배너 슬라이더 자동으로 넘기는 코드 커버 - 갤러리1 슬라이더 자동으로 넘기는 코드 커버 - 갤러리.. 열린노트/IT·SW·디자인 티스토리 코드문법강조(코드입력기) 플러그인 글씨크기 조절하는 법 티스토리 블로그는 Syntax Highlight를 지원하기 때문에, 플러그인 중 '코드 문법 강조'를 사용하도록 설정하면 아래와 같이, 본문 입력 시 '코드블럭'을 선택해 html, css, java 등 다양한 코드를 쉽게 입력할 수 있다. 예전엔 prism 같은 별도의 코드입력기를 따로 썼어야 했는데, 오 뭔가 좋아졌다. 그런데 글씨가 너무 작고, 여백도 마음에 안 든다ㅠㅠ... 이럴 땐 간단하게 '스킨 편집'의 'CSS'에 코드를 추가해서 글씨 크기나 테두리, 여백 등을 조절할 수 있다. 아래와 같이 .hljs 클래스를 만들어 옵션을 설정하면 된다. .hljs { font-size:1.15em !important; line-height:1.4em !important; padding:10px 12px .. 열린노트/IT·SW·디자인 재미로 해 본 2017년 블로그 결산 티스토리에서 전례 없던 블로그 결산 서비스를 제공한다기에 한 번 해 봤다. 먼저 2017년에 가장 많이 '언급'했다는 이야기는 역시 로마. 2016년 다녀온 이탈리아 여행 자료들을 천천히 올리다 보니 그런 걸까. 보니 태그 단어 순은 아닌 것 같고, 본문 포스팅한 텍스트를 분석한 결과 같다. 그런데 도대체 '기둥'은 왜 있는 거지?.... 글은 고작 30개 썼네. 전년보다 171개나 적다. 2017년은 개인적으로 너무 바빴고, 불필요한 맛집 포스팅 같은 것도 거의 안 해서 그런 듯하다. 그럼에도 방문자는 100% 가까이 늘었다. 포스팅 퀄리티가 좋아졌다는 건가? 아니면 꾸준한 운영의 결과인가? 그것도 아니면 그냥 우연...? 가장 많이 조회된 글은 의외(?)로 속초 여행지도와 여행코스였다. 당연히 스페인.. 일상기록부 [마감] 티스토리 초대장 10장 배포합니다. 티스토리 블로그를 시작하고 싶으신 분 중 10분께 초대장을 보내 드립니다. 신청 자격 같은 제한 조건은 없습니다. 다만, 꼭 필요하신 분만 신청해 주셨으면 합니다. 초대장 발송 후 3일 이내에 블로그 미개설 시 초대장을 회수합니다. 신청 방법 초대장을 받으실 이메일(Email) 주소를 댓글에 적어 주세요. 개인 정보 노출 방지를 위해 비밀글로 작성 부탁드리며, 비밀글로 작성하지 않으신 분의 이메일 주소 유출에 대해서는 책임지지 않습니다. 13:30 현재 초대장이 모두 소진되었습니다. 다음에 다시 배포하겠습니다. 열린노트/IT·SW·디자인 스크롤을 내리면 나타나는 '맨 위로 가기' 버튼 적용하기 PC나 태블릿 환경에서 가로로 나열돼 있는 구성요소들이, 모바일 환경에서는 세로로 쭉 이어지기 때문에 스크롤이 길어지기 일쑤이다. 그래서 '맨 위로 가기' 버튼을 만들어 넣기도 하고, 스크롤을 내려도 상단에 고정되는 기본 메뉴바를 마련하기도 한다. 여기서는 우선 티스토리 블로그를 기준으로, 가장 간단한 방법의 '맨 위로 가기' 버튼 적용 방법을 소개한다. 적용 소스 HTML(skin) 마크업 티스토리 블로그 관리자 모드로 접속해 skin.html에 다음 두 가지 소스를 넣어주어야 한다. 먼저 아래 코드를 와 사이에 삽입한다. 바로 앞에 넣는 것도 괜찮다. 이 코드는 'images/up-arrow-icon.png'라는 가로 55픽셀, 세로 55픽셀의 이미지를 '맨위로' 버튼으로 사용하겠다는 뜻이다. 그 다.. 열린노트/IT·SW·디자인 티스토리에서 div 태그만으로 첨부파일 다운로드 버튼 꾸미기(CSS) 굳이 티스토리 블로그를 이용하는 이유는 모두 같다. 사용자가 마음껏 html를 수정하며 꾸미는 재미가 있기 때문이다. 그런데 티스토리의 에디터에서 ‘파일 첨부’ 기능을 이용하면 첨부파일 화면의 디자인이 예쁘지가 않다. 무슨 말이냐 하면, 아래와 같이 ‘파일 첨부’를 이용해서 방문자가 다운로드할 수 있도록 파일을 업로드하면 이렇게 파일 아이콘과 파일명이 통째로 생성된다. 코드를 들어가 보면 이런 구조로 돼 있다. 물론 이 코드를 분석해서 파일의 URL을 추출하고 CSS를 이용해 a 태그에 예쁜 효과를 준 다음, 각 글을 쓸 때마다 버튼 속성을 달리 줄 수도 있다. 그런데 이 경우 매번 긴 태그를 입력해야 한다는 번거로움이 있다. CSS를 꾸몄다 하더라도, 첨부파일을 올릴 때마다 글에 다음과 같은 태그를 첨.. 열린노트/IT·SW·디자인 이전 1 다음
