티스토리는 인용문(blockquote)에 따옴표, 좌측선, 박스의 3가지 스타일을 제공하고 있습니다. 인용문 스타일을 각각 혹은 일괄로 수정하는 방법을 정리했습니다.기본적으로 티스토리 인용문 스타일은 다음처럼 특성 선택자(attribute selector)로 작동합니다
티스토리 테마 제작시, 치환자를 사용해 사이드바 및 사이드바 엘리먼트(모듈)을 원하는대로 추가, 설정할 수 있습니다. 각 엘리먼트 이름은 해당 치환자의 주석(comment)으로 설정할 수 있습니다. 잊기 쉬운 부분이라 간단히 정리해 봤습니다.
전에 본 flex가 직선의 1차원 배열이라면, grid는 평면의 2차원 배열입니다. 평면 배열이라 하면 HTML 테이블을 떠올리기 쉬운데, 그보다 더 유연하게 작동하고 사용법도 간단합니다. 이 글에서는 grid(이하 그리드)의 기본적인 개념과 사용법을 알아보겠습니다.
Flexible Box Layout은 CSS의 박스 모델 중 하나로, 수평 혹은 수직으로 유연한 박스 레이아웃을 구성할 수 있습니다. 크기와 여백, 배치 등이 컨텐츠와 환경에 맞춰 자동으로 조정되기 때문에, 간단한 코드로 깔끔한 화면을 만들 수 있습니다.
UL(unordered list) 태그는 순서가 없는 목록입니다. 글 내의 목록부터 시작해 카테고리나 메뉴, 태그 클라우드 등 무언가를 나열할 때 많이 사용됩니다.이 글에서는 리스트의 외형 설정을 중심으로 몇 가지 예를 알아보겠습니다.
티스토리 스킨에서 다음 두 가지가 표시되지 않도록 해보겠습니다. 각각 본문, 카테고리 치환자에서 자동으로 출력하는 부분이라, CSS에서 표시 설정을 바꿔야 합니다.
네이버의 '한글한글아름답게'에서는 여러가지 한글 폰트를 제공하고 있습니다. OTF와 TTF는 물론, 웹 폰트도 갖춰져 있어 웹페이지를 만들 때도 쉽게 활용할 수 있습니다. 이 중 나눔스퀘어 네오를 블로그에 적용하는 예제를 따라가며 사용법을 간략히 정리해 보겠습니다.
웹킷(WebKit)을 이용해 간단히 글자에 외곽선을 넣을 수 있습니다. 단, 실제로는 글자 안쪽으로 선이 들어가기 때문에 글자 크기가 작은 경우 제대로 효과를 보지 못할 수 있습니다. 바깥쪽으로 외곽선을 두르고 싶은 경우에는 글자에 그림자를 추가하는...
티스토리 스킨에서 날짜와 시간에 관한 치환자를 정리해봤습니다. 빠른 검색용으로 작성하는 글인지라, 티스토리 스킨의 구조나 기본 사항에 대해서는 다루지 않습니다.
HTML 문서에서 각 구성 항목은 기본적으로 문서의 흐름에 따라 순서대로 배치됩니다. 하지만, 속성 position을 설정하면 기본 배치를 벗어나 위치를 조정하거나, 문서의 흐름과 무관한 특정 위치에 항목을 배치할 수 있습니다.
여기서는 웹킷을 이용해 스크롤바의 외형을 바꾸는 방법을 알아보겠습니다. 파이어폭스 등에서는 지원하지 않고, 브라우저에 따라 표시 방식이 조금씩 다른 부분이 있다는 점 주의해 주세요.