hi098123 Tistory Tip

HTML기초 : DIV 와 display

div태그와 css display를 다뤄보고자 한다. div태그는 쉽게 무언가를 담을 수 있는 상자라고 보면 좋을것 같다. 구분하기 쉽게 background-color:#eee; (회색)으로 배경색상을 채웠다. 내용 내용 내용 내용 내용 DIV 결과 내용 내용 내용 내용 내용 DIV는 display값이 기본적으로는 block이다. display:block은 꽉 채운다. 조금 자세히 말하자면 부모의 크기를 꽉 채운다. 그래도 width:100%와는 조금 다르다. display:block; display:inline-block; display:inline; 만약 inline-block을 사용한다면? 내용 내용 내용 내용 내용 DIV 결과 내용 내용 내용 내용 내용 inline-block은 이렇게 순서대로 나..
썸네일 이미지

티스토리 보호글 제목제거

제가 제작하는 스킨의 기본 값은 "보호글 제목표시안함" 입니다. 따라서 이 스킨 이용자는 별도로 설정할 필요없습니다. 티스토리에는 검색하면 보호글이 검색이 되는 버그가 있습니다. 검색시 나타나는 티스토리 버그가 있어 스킨 자체에서 제목을 지워줍니다. 그런데 매우 많은 스킨에서 보호글의 제목을 표시하여 보호글임에도 제목이 표시됩니다. + 검색시 보호글 노출은 덤 티스토리 스킨 문서에서 나와있는 코드, 보호글의 제목을 표시합니다. 보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요. 비밀번호 :: 여기에서 제목은 불필요하므로 제거합니다. ""을 "보호 글"로 변경했습니다. 보호 글 보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요. 비밀번호 :: 아주 강력한 방법으로 목록에서 아예 지..
썸네일 이미지

RSS 50개 설정하기

RSS는 Sitemap과 비슷하게 검색엔진에 도움이 될수있습니다. 관리 -> 블로그 -> 기타 설정 -> RSS 50개 -> 저장을 하면 된다. 글로는 복잡한데 아래의 사진으로보면 한눈에 보인다. RSS설정시 크롤러가 쉽게 사이트에 접근이 가능합니다. RSS가 어떤 역할을 하나요? 사이트의 여러 페이지 주소와 글(제목, 내용, 작성일, 작성자, 카테고리 등)을 포함하고 있습니다. 크롤러가 웹 사이트를 알기 쉽게 도와주는데요 더 쉽게 비유를 한번해보자면, 크롤러는 시험을 보는 학생이라 한다면? RSS는 시험 족보라고 보시면 좋을것 같습니다. 웹 사이트를 파악하는데 많은 도움이 됩니다.
썸네일 이미지

모바일 페이지 제거하기

티스토리 관지자 페이지에 접속합니다. 꾸미기 박스에 있는 모바일에 들어갑니다. 사용하지 않습니다. 설정 후 저장 왜 모바일 전용페이지를 안쓰나요? 여러 이유가 있을 수 있습니다. 대표적인 이유는 아래에 나열해보겠습니다. 꾸며진 모바일 스킨을 사용하기 위해 반응형 스킨인 경우 꾸며진 모바일 스킨을 사용하기 위함이 있습니다. 반응형으로 만들었는데 기본 티스토리 모바일버전을 사용하긴 좀 그렇죠.. (당연히 원하는 디자인으로 꾸며진 페이지를 쓰면 좋습니다.) 검색 순위 향상을 위해 검색엔진에 다른 페이지로 두개가 등록되기 때문에 검색이 분산되어 순위오르기 어려울 수 있습니다. 같은 내용으로 /주소 /m/주소 이렇게 두개가 경쟁을 하기 때문에 사용자가 분산되어 검색엔진에서 순위는 오르기 어려울 가능성이 큽니다. ..
썸네일 이미지

카테고리 새 글 표시 지우기

주의 : 티스토리 최초설정값은 주황색 N 이나 한번 설정을 바꾸면 회색 N 으로 변합니다.. 이 표시는 제거할 수 있습니다. 카테고리 관리 -> 새 글 발행 표시 안함 -> 저장 한마디 한번 표시하지 않습니다를 설정하면 다음부터 색상이 무조건 회색으로 변하기 때문에 주의가 필요합니다. ("3일 이내 발행이내에 발행된 글이 있으면 새 글 여부를 표시합니다."를 변경해도 회색으로 변합니다.) 다시 바꾸기 이건 임시 조치로 완벽한 방법은 아닙니다. HTML에 아래의 코드를 넣어줍니다. (head, body 상관없음) 이미지 바꾸기 c=1, c=2 등 1~5번을 입력하시면 원하는 이미지로 바뀝니다. 기본값은 c=5로 설정되어있습니다. 지원 브라우저 IE7 이상
썸네일 이미지

티스토리 스킨 배포 팁

티스토리 스킨에는 skin.html, index.xml, style.css : 필수 파일과, 추가 파일으로 구성되어있다. 아래는 예시 파일 구조 SKIN ─┬─ index.xml ├─ skin.html ├─ style.css ├─ preview.gif ├─ preview256.jpg ├─ preview560.jpg ├─ preview1600.jpg └─ images ─┬─ script.js ├─ background.jpg ├─ background.jpg └─ background.jpg 티스토리 스킨 등록시 한 화면에 올리고, 필수파일(skin.html, index.xml, style.css)이 아닌경우 자동으로 images 폴더 아래로 위치하게 된다. images폴더 없이 한 폴더에 배포하라 그래서 배포..

CSS 색상 변경하기

CSS에서 색상은 color로 설정한다. 색상을 나타내는 방법은 크게 3가지가 있다. HEX color rgb rgba 투명도를 나타내는 Alpha값은 IE9 이상부터 지원합니다. 지원 브라우저 확인 방법 코드 예시 CSS에서 설정 html{color:#333}/*검은계열색*/ html의 글자 색상을 선택 만약 옵션이 겹친다면, CSS의 우선순위에 따라 옵션이 설정된다. html내에서 설정 aaa 123 p태그 글자 색상을 하늘색 계열로 설정한다. 배경색을 수정하고 싶다면 background-color에 값을 변경해주면 된다. Alpha 값 안내 HEX에서 #1234 4번이 Alpha값이다. 이렇게 설정시 #11223344 와 동일한 값을 가진다. #12345678 78이 Alpha값이다. Alpha값이..
썸네일 이미지

티스토리 댓글에 링크달기

이전에 작성한 글이 있어서 링크를 겁니다. hi098123.tistory.com/215 티스토리) 댓글에 링크 달기 댓글에 링크를 달 수 없을까? 아래와 같이 간단한 소스로 만들수있다. newTab (새탭으로 열기 true,false) comm 값 (CSS selector와 같은 방식으로) whitelist 값 (자바스크립트 배열 [] 로) 변형해줘야됩니다. 3 hi098123.tistory.com 페이지 하단에 아래의 script를 넣으면 댓글에 링크가 걸립니다. 아래의 whitelist설정에 따라 자신의 블로그 링크만 링크가 걸립니다. (function() { var newTab=true; // 새 탭으로열기 true, false var comm=document.querySelectorAll(".co..