간혹 같은 페이지인데도 오페라, 크롬, 사파리, 엣지에서 보이는 모습이 다른 경우가 있습니다. 특히나 모바일에서는 생각과 다른 모습으로 보이는 경우가 있는데요. 이것은 별도의 스타일을 지정하지 않으면 브라우저에서 제공하는 스타일 기본값을 사용하기 때문입니다. 이런 문제를 해결하는 방법으로는 크게 두가지가 있습니다. reset.css: 브라우저가 지정한 모든 스타일을 지운다 normalize.css: 기본 지정 스타일을 통일한다. reset.css reset.css는 현재 이 스킨이 사용하는 스타일 초기화입니다. 모든 속성을 지우고 스킨이 지정한 스타일만 보여줍니다. 파일의 크기가 작다는 장점이 있지만 당연하다 싶은 스타일마저 다시 설정해야 합니다. normalize.css normalize.css는 모든..
브라우저 기본 스타일 초기화: reset.css와 normalize.css
티스토리 스킨을 세번째 갈아엎었습니다. 이번에는 저번보다 더 포스트를 중심으로 하는 블로그를 지향하도록 스킨을 제작했습니다. 첫 페이지 3단계 반응형으로 제작하였습니다. 개별 글 개별 글에는 아래의 기능을 추가했습니다. 각각의 기능은 스킨 편집 메뉴의 속성 컨트롤로 제어할 수 있습니다. 코드블럭 도구: 코드블럭이 길어지면 해당 코드블럭을 스크롤 박스로 만듭니다. 코드블럭 상단 도구상자에는 원래 길이로 보는 버튼과 복사 버튼을 추가했습니다. 목차 생성기: 포스트 내의 h1, h2, h3 태그를 읽어 목차를 만들고 내부링크를 추가합니다. KaTeX: LaTeX 문법의 수식 표현을 지원합니다. ($$ $$: 디스플레이, \\( \\): 인라인) hljs: highlight.js를 이용한 소스코드 구문강조를 지..
티스토리 반응형 스킨: Minimal-Somad v0.3.0
스킨 개발을 위한 본문 스타일 정리입니다. 티스토리 스킨에서 포스트 본문은 로 불러오는데요. HTML편집으로 작성하지 않은 이상 클래스나 아이디등 속성이 비어있는 상태입니다. 저는 티스토리의 마크다운 편집기를 주로 이용하기 때문에 스킨에서 본문 스타일을 하나하나 찾아서 지정하느라 애먹었습니다. 지금 스킨도 마음에 안들어 갈아엎는 참에 마크다운을 기준 하는 본문 스타일 정리를 한번 해야겠다고 마음먹었습니다. 포스트 본문 내용의 구조 클래스 tt_article_useless_p_margin는 테마 스타일시트에서 padding이나 margin으로 준 문단의 위아래 여백을 !important까지 써가며 지워버리는 클래스로 마크다운 에디터로 쓰는 경우 자동으로 붙는 모양입니다. 스킨을 만들면서 스타일을 작성할 때..
[SASS/SCSS] 티스토리 본문 스타일
요즘 만들어둔 스킨이 맘에 안들 때 문제있는 부분을 찾아서 만들기가 너무 어려워 아예 처음부터 다시 만드는 경우가 많습니다. 때문에 유지 관리하기 편한 개발환경을 만들기 위한 고민을 시작했습니다. 개발 언어와 기능 기본적으로 티스토리 스킨에는 HTML, CSS, javascript를 사용할 수 있습니다. 이들을 그대로 사용하다보니 수정할거리가 생기면 찾기가 너무 힘들었는데요. 컴파일 과정을 거쳐야 하지만 유지관리에는 훨씬 유리한 SASS(SCSS), Typescript를 사용하기로 했습니다. 추가로 HTML파일에는 import태그를 추가해서 테마를 조각단위로 작성한 후, 컴파일을 통해서 하나의 skin.html로 만드는 기능을 추가하기로 했습니다. Python 패키지 자주 사용하는 언어가 파이썬(pyth..
[VSCODE] 티스토리 스킨 개발 세팅: 컴파일러 제작
네이버 블로그나 브런치 등 제한적인 블로그에 수식을 쓰는 경우 이미지를 붙여넣는 방법을 자주 사용합니다. 하지만 이 방법은 매번 수식 이미지를 만들고 붙여넣는 불편함과 문자열 단락 안에 수식을 삽입하기 곤란하다는 단점이 있습니다. 티스토리나 구글 블로거 등 스크립트까지 편집 가능한 스킨을 쓰는 경우, \(\LaTeX\)로 잘 알려진 \(\TeX\)문법을 사용해서 수식 표현을 할 수 있습니다. \(\KaTeX\) KaTeX는 TeX 문법으로 작성한 수식을 가장 빠르게 변환하는 것으로 알려진 조판엔진입니다. 내장 함수를 이용해서 직접 변환할 수도 있고, 자동 랜더링 함수를 불러와서 자동으로 랜더링을 수행할 수 있습니다. CDN을 이용한 KaTeX 사용 널리 사용하고 있는 CDN 제공자를 통해 KaTeX를 사..
가장 빠른 TeX 수식 변환기, KaTeX 사용하기
블로그 스킨을 손본다고 한참 업로드를 하지 못했습니다. 앞으로 몇 개의 글은 이번 스킨에서 추가한 기능들을 다룹니다. 티스토리에서 소스코드 입력 티스토리의 마크다운 에디터를 사용하면 손쉽게 소스코드 블록을 만들 수 있습니다. 마크다운 에디터에서는 주로 아래와 같은 방식으로 작성합니다. ```js var a; function func(arg) { let c = arg + 3; return c; } ```\ 마크다운에서는 이것을 코드 블럭이라고 하며, 변환 결과는 다음과 같습니다. var a; function func(arg) { let c = arg + 3; return c; } highlight.js highlight.js는 마크다운으로 작성한 코드 블럭의 언어에 맞는 방식으로 내용물을 해석하여 색상을 ..
블로그에 소스코드 하이라이팅 기능 넣기
목표 티스토리가 마크다운을 공식적으로 지원함에 따라 티스토리 블로거들은 마크다운을 사용하기 위해 스킨을 만져 showdown.js를 불러오는 등의 고생을 할 필요가 없어졌습니다. 다만 공식적으로 지원하는 기능에 뭔가 부족함을 느낀다면 직접 만들어야죠. 제 경우에는 목차가 필요하다 느꼈습니다. # h1 제목 ## h2 제목 ### h3 제목 이렇게 소제목을 쓰면 포스트 최상단에, * 1 h1 제목 * 1.1 h2 제목 * 1.1.1 h3 제목 이런 방식으로 나오도록 만들어 보고자 했습니다. 내부 링크를 만들 때는 URL에서부터 어디를 가리키는지 명확하게 알 수 있도록 만들었습니다. 스크립트 작동 방식은 주석을 참고하시기 바랍니다. var HSelector = "h1"; // 소제목 선택자 // var HS..
jQuery: 티스토리 마크다운을 지원하는 목차 생성 스크립트
HTML문서에 페이지의 구조와 컨텐츠를 담는 과정을 간략하게 살펴봤습니다. 이제부터는 스타일과 배치를 고려하면서 HTML 문서를 편집합니다. 종속형 스타일시트(Cascading Style Sheets) 짧게 스타일 시트(CSS)라고 부르는 문서는 HTML로 작성한 구조를 보기좋게 꾸미고 배치하기 위한 것입니다. STYLE태그를 이용해서 HTML문서 안에 포함시킬 수도 있지만 CSS파일을 별개로 두어 스타일을 따로 관리하는 것이 유지관리하기 더 편합니다. 기본 사용법 상자 위와 같은 HTML코드가 있으면, 웹브라우저에서는 다음과 같은 모양으로 보이게 됩니다. 상자 아래와 같이 `box`클래스를 가지는 `div`요소에 스타일을 추가합니다. 별개의 문서로 만들거나 `style`태그를 사용할 수 있습니다. 여기..
티스토리 스킨 만들기 (4) - CSS 개요
티스토리에서 블로그로 기능하기 위한 최소한의 구조부터 만들어 봅니다. 홈페이지의 최근 글 목록과 포스트를 보기 위한 구조입니다. 여기서부터 티스토리를 위한 그룹치환자와 값치환자를 사용합니다. 테스트가 필요하다면 티스토리에 스킨테스트를 위한 블로그를 하나 개설해서 블로그관리 > 스킨 편집 > HTML 편집을 활용하시기 바랍니다. 기본 구조 BODY 태그 안의 내용을 변경합니다. 글 목록 개별 포스트 카테코리 리스트(사이드바) s_t3 태그는 티스토리 공통 스크립트를 추가하는 그룹 치환자입니다. BODY태그가 시작하는 직후와 끝나기 직전에 배치합니다. 만든 구조는 컨텐츠 영역과 사이드바 영역으로 구분되어 있으며, 컨텐츠 영역은 홈페이지에서 글 목록 보여주는 영역과 개별 글의 본문을 보여주는 영역으로 나뉩니다..
티스토리 스킨 만들기 (3) - 기본 홈, 포스트, 사이드바
End of content
No more pages to load