티스토리스킨 (5) 썸네일형 리스트형 티스토리 스킨 만들기 #6 - 잡다한 수정들 ol, ul 리스트 간격 조절 티스토리 기본 스킨인 Poster를 사용하면 또는 리스트 태그를 뎁스를 구분해서 사용하면 아래와 같이 리스트 간격이 벌어지는 현상이 발생한다(물론 다른 스킨에서도 발생 할 수도 있다). 원인은 css와 에디터의 환장의 콜라보 때문이다. 아래 코드 처럼 css 에서는 ul, ol 태그 아래에 50px의 마진을 주라고 되어 있고, 실제 계층형 리스트를 사용하면 태그 안에 또 다른 태그를 선언 해버려 내부에 있는 의 50px 마진이 먹혀 버린다. .entry-content ul, .entry-content ol { margin-bottom: 50px; } 리스트 상단 문구 가나다라마바사 가나다라마바사 가나다라마바사 이 밑이 간격이 엄청남 가나다라마바사 리스트 하단 문구 가나다라마.. 티스토리 스킨 만들기 #4 - ToC(Table of Contents) 이전 글 보기 : 티스토리 스킨 만들기 #3 - 코드 블록 교체 글의 내용이 길어지다 보면 내게 필요한 내용을 찾기 위해 끊이 없이 화면을 스크롤 해야 하는 경우가 있다. 이럴 때 목차를 자동으로 만들어 주면 좋지 않을까 항상 생각해 왔는데 이미 그런 것이 존재 했다. ToC라고 매번 저게 뭘까 궁금했었는데 Table of Contents라고 글 제목들을 추려 자동으로 목차를 만들어 주는 기능라고 한다. 여기저기 기웃 거리며 쉽게 가져다 쓸만한 것이 없나 살펴 보았지만 이것들 역시 블로그 스킨 처럼 뭔가 나에게 2% 부족했다. 그래서 나름 나도 개발자라는 호승심에 간단하게 만들었다. ToC 기능 문서의 Heading 태그 기준으로 목차 생성 목차의 길이가 길때 문서의 스크롤에 따라 ToC도 같이 스크롤 .. 티스토리 스킨 만들기 #3 - 코드 블록 교체 이전 글 보기 : 티스토리 스킨 만들기 #2 - 베이스 스킨 지난 티스토리 스킨 만들기 #2에서는 기본틀로 사용 할 스킨을 선택 했다. 이번에는 오리지널 알력2님의 블로그(https://alikong.tistory.com/46)에서 찾은 보물 같은 코드 블록을 블로그에 달아 보도록 하겠다. 오리지널 알력2님 코드 블록의 기능 줄 번호 표시 및 시작 번호 지정 기능 줄 하이라이트 기능 코드 블록을 생성하고 HTML모드에서 또는 와 같이 입력하면 특정 라인에 하이라이트를 넣을 수 있다(개인적으로 가장 고맙고 마음에 드는 기능이다) 자동 줄바꿈 적용시에도 바뀐 줄에 들여 쓰기 유지 코드 색상 값을 코드에서 사용하는 경우 색 미리 보여주기 괄호 및 태그예 마우스 오버시 짝 표시 코드 복사 시 텍스트 변환 및 들.. 티스토리 스킨 만들기 #2 - 기본 스킨 비교 이전 글 보기 : 티스토리 스킨 만들기 #1 - 요구 사항 정리 나에게 꼭 맞는 티스토리 스킨을 만들기로 결심하고 이것 저것 공부를 하면서 내려진 결론은 '처음 부터 모든 것을 만드는 것은 무리다'. 자바스크립트와 CSS를 이제 갖배워서 내 맘에 쏙 들도록 만들기도 쉽지 않거니와 직장과 가정에 충실하면서 처음 부터 쌓아 올리는 것은 힘에 부치다. 티스토리에서 제공하는 오픈 소스 스킨들 중 맘에 드는 녀석을 하나 골라 나에게 아쉬운 기능들만 추가하자. 쉬운 길이 있는데 멀리 돌아가는 것은 내 스타일이 아니다. 티스토리 기본 스킨 비교 몇가지 조건으로 비교를 해보니 모든 기준에 부합하는게 Poster 스킨 하나 뿐이다. 리스트 사용시 뎁스도 표현되고, 인덱스 페이지에서 이미지가 없다면 아예 이미지를 표시하지.. 티스토리 스킨 만들기 #1 - 요구 사항 정리 티스토리 블로그를 이용하면서 누군가가 만들어준 스킨들을 감사하게 써왔지만 모든 스킨들 마다 뭔가 2% 아쉬운점 있었다. 전체 레이아웃이 맘에 드는 스킨은 코드 적기가 힘들다던지, 폰트나 자간이 마음에 안든다던지, 리스트를 사용하는데 들여 쓰기가 안된다던지 등등...이것이 좋으면 이것이 맘에 살짝 걸리는 그런것들 말이다. 그래서 직접 티스토리 스킨을 만들어 볼까 한다. 어떻게 만들어야 할까? 그동안 블로그를 사용하면서 내가 느꼈던 불편한 점들을 적어 보았다. 요구 사항 리스트 사용 시 뎁스가 있을 것 에디터 페이지에서 링크를 걸고 엔터를 치면 링크 미리 보기가 나오지 않을 것 코드 블럭에 라인을 표시 해줄 것 코드 블럭에 하이라이트를 사용 가능 할 것 자동으로 ToC(Table of Contents)를 만.. 이전 1 다음
