본문 바로가기

HTML14

Tistory _ actionTrail Tistory _ actionTrail : 트랙백과 댓글 보이기 / 감추기 사용 치환자 , : 트랙백의 갯수를 출력하는 영역 , : 댓글의 갯수를 출력하는 영역 : 트랙백을 열고 닫는 온클릭 이벤트 : 도착한 트랙백 수 : 댓글을 열고 닫는 온클릭 이벤트 : 답글 수 사용 예시 트랙백 개 , 댓글 개가 달렸습니다. 원문 : http://www.tistory.com/guide/skin/step3#2-8-3 HTML 댓글 : 개 CSS /* # actionTrail */ .actionTrail { text-align:right; margin-bottom:1rem; padding:.1rem 1rem 0 0; } .actionTrail .wrapTrackback span, .actionTrail .wrapCom.. 배움터_일반/TIStory    2016. 1. 4.
Tistory _ tagTrail Tistory _ tagTrail : 글 관련 태그 사용 치환자 , : 글과 관련된 태그가 출력되는 영역입니다. : 태그 반복 출력 사용 예시 TAG 원문 : http://www.tistory.com/guide/skin/step3#2-8-3 HTML Tag : CSS /* # tagList */ .tagTrail { clear:both; margin:0; padding-left:1rem; font-size:14px; font-size:1.4rem; line-height:100%; border-bottom:1px dotted #556A80; word-break: break-word; vertical-align:middle; } .tagTrail a { display:inline-block; margin:0.. 배움터_일반/TIStory    2016. 1. 4.
Tistory _ 인용문 설정 Tistory_인용문_소스(css) /* # 인용문 _ blockquote */ #content .article blockquote { background:#fafafa; margin:0; padding:5px; border-left:5px solid #eee; } #content .article blockquote p { font-size:14px; color:#777; } #content .article blockquote cite { display: block; font-size: 14px; color:#777; } /* // 인용문 _ blockquote */ 샘플 새해 새 아침 / 이해인 새해의 시작도 새 하루부터 시작됩니다. 시작을 잘 해야만 빛나게 될 삶을 위해 겸손히 두 손을 모으고 기도하.. 배움터_일반/TIStory    2016. 1. 3.
CSS_ 'Browser' 초기화 css _ Browser 명칭 -moz- : 파이어폭스 -o- : 오페라 -ms- : IE 9 (MS) -webkit- : 크롬(구글), 사파리(애플) css _ Browser _ 초기화 /* ### 초기화 설정 ### */ html, body, div, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button { margin:0; padding:0; outline:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; /* 박스 크기 초기화.. 배움터_일반/TIStory    2015. 12. 30.
SyntaxHighlighter_설정과 사용법 SyntaxHighlighter 관련 주소 SyntaxHighlighter_Down : http://alexgorbatchev.com/SyntaxHighlighter/download/SyntaxHighlighter_테마 정보 : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/SyntaxHighlighter_브러시 종류 : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/SyntaxHighlighter_설치와 설정방법 : http://jb-story.tistory.com/13SyntaxHighlighter_상세설정 : http://chongmoa.com/webtool/3007SyntaxHigh.. 배움터_일반/TIStory    2015. 12. 30.
Tistory _ 더 보기 설정. 티스토리에서 본문의 '더 보기'_ 소스(css) /* # 본문_ more / less */ /* 더 보기_ more */ .moreless_fold span { font-size:1.4rem; color:#777; } .moreless_fold span:before { content:"\f067"; font-family:"FontAwesome"; font-size:1.3rem; padding-right:1rem; } .moreless_fold:hover { color:#90b633; } .moreless_fold span:hover { color:#90b633; } /* 그만보기 _ 위 */ .moreless_top span { font-size:1.4rem; color:#777; } .moreless_.. 배움터_일반/TIStory    2015. 12. 11.
background-size 속성 오늘 적용 했다. PC화면과 모바일 화면의 헤더 배경 이미지가 다르게 보여서 방법을 찾아 적용해 봤다. 사용 예문 background-size:200px 500px; 배경 이미지크기를 절대크기로 설정. (가로 200px, 세로 500px) background-size:20% 50%; 배경 이미지를 상대크기로 설정. (가로 20%, 세로 50%) background-size:contain; 배경 이미지의 가로, 세로 길이 모두 엘리먼트 안에 들어온다라는 조건하에 가능한한 배경 이미지를 가로/세로 비율을 유지한채로 크게 조정. 현재 헤더_header 부분의 이미지 부분... background-size:cover; 배경 이미지의 가로, 세로 길이 모두 엘리먼트보다 크다는 조건하에 가능한한 배경 이미지를 가로.. 배움터_일반/TIStory    2015. 12. 10.

티스토리툴바