html 5

드롭다운 자동 생성 (by 티스토리 치환자)

장소를 찾기 가장 쉬운 방법인 지도를 보는 것 입니다. 드롭다운은 블로그 지리를 소개할 수 있는 지도같은 역할을 합니다. 하지만 웹 코딩을 처음 접하신 분들은 드롭다운을 만들기 어렵고, 카테고리에 변동사항이 있을 때마다 HTML를 변경하는 일은 번거로운 일이 아닐수 없습니다.따라서, 티스토리 치환자을 기반으로 수정을 최소화하는 자동생성 드롭다운을 단, 두 번의 복사붙여넣기로 구현해 보겠습니다. 1. 드롭다운 자동 생성 - HTML 수정 를 찾아 바로 다음 줄에 아래의 코드를 붙여넣습니다. 1cs 2. 드롭다운 자동 생성 - CSS 수정.area_menu 를 찾아 바로 윗 줄에 아래의 코드를 붙여넣습니다.12345678910111213.head_dropdown{display:block;position:ab..

로그인, 로그아웃 버튼 만들기 [티스토리]

기존에 있는 티스토리 관리 링크는 관리페이지로 이동합니다. 이 소스는 페이지 이동 없고 로그인/로그아웃이 가능하며 현재의 로그인상태를 판별 후 버튼내용을 바꿔줍니다. 단, 두 번의 복사, 붙여넣기로 버튼을 만들 수 있습니다. 1. 로그인 버튼 위치 정하기 HTML HTML의 와 사이에 사용할 위치에 넣습니다. 1 2. 로그인 스크립트 넣기 HTML 태그 바로 앞에 스크립트를 붙여넣습니다. HTML 삽입 미리보기할 수 없는 소스 더보기 ​ // 로그인, 로그아웃 버튼 처리 if (window.T.config.USER.name) { $('.btn-for-user').show(); } else { $('.btn-for-guest').show(); } $('.btn-for-guest [data-action="l..

[티스토리] 반응형 #1 본문 아래 - 썸네일 카테고리

1. 썸네일 카테고리 - HTML 수정 아래의 초록 블록 사이에 넣어주세요. 공유하기 링크 2. 썸네일 카테고리 - CSS 수정 아래의 초록 블록의 위 아래를 코드를 넣으세요. /* 썸네일 관련기사 */ @mediaonly screen and (max-width:820px) and (-webkit-min-device-pixel-ratio: 1.5),only screen and (max-width:820px) and (min-device-pixel-ratio: 1.5),only screen and (max-width:820px) and (min-resolution: 1.5dppx) /*썸네일 카테고리 리사이징*/ ※ 기존 스킨 백업 후 진행하세요.

[티스토리] 치환자 내부 소스 모음

티스토리에서 치환자를 사용하는 것은 간편합니다. 하지만 내부 소스를 모르면 커스터마이징이 어렵습니다. 그래서 내부의 어떤 클래스가 있는지 알아봅시다. 1. 티스토리 치환자 달력 모듈 티스토리 달력 치환자 의 내부 소스 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 « 2017/08 » 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Colored by Color Scriptercs 2. 티스토리 ..

반응형 이미지 목록 만들기

간략한 반응형 이미지 목록을 만들어 보겠습니다.반응형 목록의 레이아웃 전환 기준은 가로 820px를 기준입니다. 적용된 스타일은 다음과 같습니다.1. 목록의 제목 좌우에 가로줄을 넣어 꾸미기2. 이미지 위 글씨 넣기3. 이미지 위 검은색 투명 배경 넣기4. 가로 820px를 기준으로 이미지 배열이 2열, 1열로 변화 1. 반응형 이미지 목록 - HTML 123456789101112131415161718192021222324252627282930313233343536 Category Info Daily Review Com Colored by Color Scriptercs 2. 반응형 이미지 목록 820px 이상일 때 - CSS 1234567.tit_intro{position: relative;margin-..