CREATIVE

'Tistory/Tistory SKIN' 카테고리의 글 목록

이매지네이션 라이브러리 티스토리 스킨 검색창(Search) 만드는 방법 티스토리 스킨 검색창 만드는 방법은 티스토리에서 사용할 수 있는 치환자를 통해 구현할 수 있다. 간편하게 아래와 같이 s_search를 통해 구현이 가능하며, input태그를 활용하여 적용할 수 있다. 검색창(Search) 적절한 위치에 적용하면 되는데, 당연히 스타일시트도 지정해줘야 하므로 적당한 위치에 적용시키고 스타일을 지정해주면 된다.
이매지네이션 라이브러리 티스토리 스킨 가이드 티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토리의 디자인이 완성됩니다. 이 문서는 스킨에서 사용하는 치환자에 대해 설명합니다. 파일구조 SKIN ─┬─ index.xml ├─ skin.html ├─ style.css ├─ preview.gif ├─ preview256.jpg ├─ preview560.jpg ├─ preview1600.jpg └─ images ─┬─ script.js ├─ background.jpg ├─ background.jpg └─ background.jpg index.xml 스킨 정보 파일로 자세한 내용은 '스킨 정보 파일' 장에서 다룹니다. skin.html 스킨의 메인 템..
이매지네이션 라이브러리 티스토리 HTML 스킨편집 단축키 티스토리 스킨 편집을 하다가 단축키가 생각이 안나서 단축키 정보를 보려고 했는데, 생각보다 내가 몰랐던 기능들이 있었다. 줄 이동 기능이나, 모두 변경 기능 외에 변경, 검색 기능은 당연히 자주 쓰는 기능인데, 미리보기 새로고침이나 저장 기능은 아직 손에 익숙하지 않다. 그리고 더 충격적인 것은 드래그 기능도 가능했는데, 일반적인 마우스 드래그가 아니라 Alt(알트키)를 누른 상태로 왼쪽 클릭으로 드래그를 하면 줄을 모두 드래그 해서 선택할 수 있다. 이외에 자동 들여쓰기 기능 등을 사용하는 것도 좋은데, 어차피 개발자도구로 CSS 등을 수정할 것이라면, Format 기능으로 코드를 깔끔하게 정리할 수 있다. 이외에 줄 삭제하는 기능도 익숙해지면 매우 유용할 것 같고, 전반적으로 꼭 필요한 기능들이 잘 ..
이매지네이션 라이브러리 티스토리 Fontawesome 최적화 적용 및 사용방법 먼저 CDN을 통해 외부로 불러와서 적용하는 방식은 다소 느릴 수 있기 때문에 티스토리 서버에 직접 업로드하여 사용하는 것이 가장 빠르고 편합니다. 만약 직접 설정하는 것도 귀찮다 하시는 분들은 CDN 주소를 통해 외부 파일을 불러와서 웹사이트에서 아이콘폰트를 적용시키면 되겠습니다. (1) 외부 CDN을 이용하여 적용하는 방법 CDN Fontawesome (The iconic SVG, font, and CSS toolkit) font-awesome - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites! font-awesome - The iconic SVG, font, and CSS toolkit - cdnjs..
이매지네이션 라이브러리 티스토리 스킨 슬라이드 자동 넘김 스크립트(Script) 간단한 스크립트 코드를 작성하여 메인 슬라이드 커버 요소를 자동 넘김으로 구현할 수 있습니다. 바로 위와 같이 커버 슬라이드 부분을 자동으로 넘김다는 명령어입니다. 4000는 4초를 의미합니다. 시간 간격을 조절하고자 할 때는 1/1000 기준으로 시간을 변경해주세요. .cover-slider가 기존 슬라이드 리스트의 클래스값이고, .next는 다음 버튼을 의미합니다. .trigger는 이를 클릭("click")하여 해당 동작을 작동시키는 것을 의미합니다. 최근에 제작한 사이트의 예시를 아래의 이미지에서 확인해보세요. 저는 4초로 설정하여 자연스럽게 넘어가는 것을 확인할 수 있었습니다. 사이트를 훨씬 세련되고 다채롭게 만들어주는 메인 슬라이드 기능은 사이트를 만드는 사람들에게는 가장 핵심적인 기능입니다...
이매지네이션 라이브러리 티스토리 더보기 버튼 디자인(CSS) 일반적으로 별도의 스킨을 사용하지 않거나 티스토리 내에서 스킨수정을 하지 않았다면 더보기 버튼이 매우 밋밋해보일 수 있다. 더보기 기능은 많이 쓰는 편은 아니지만, 쓰는 사람에 따라서 유용하게 사용할 수 있는 기능 중 하나로, 중요하진 않지만 매우 긴 내용을 감추거나 부가적인 설명을 할 때 더보기버튼을 적절하게 활용할 수 있다. ↓ ↓ 별도의 CSS를 추가하지 않았다면 아마도 위와 같이 밋밋한 텍스트만 남아있을 것이다. 이러면 아무리 좋은 글을 써도 감춰진 정보를 방문자가 그냥 놓쳐버릴 수가 있다. 그래서 간단한 안쪽 여백과 외곽선을 추가해줘서 버튼처럼 보이게 할 수 있을 것이다. ↓ ↓ 이렇게 하면 다소 밋밋한 더보기버튼이 위와 같이 조금 색다르게 보일 수 있다. 배경색을 넣고 더보기 글자 색을 흰색으..