hi098123 Tistory Tip
썸네일 이미지

드래그 색상 바꾸기

웹 사이트를 둘러보면 드래그 했을때 파란배경 흰색상 이 아닌 지정 색상을 이용하기도 합니다. 어떻게 설정할 수 있는지 알아보고 설정하는데 도움이 되도록 글을 작성합니다. 아래 예시코드는 배경색 : 검정, 글자색 : 흰색으로 이렇게 나타납니다. ::selection {/*예시코드*/ background-color: #000; color: #fff; } 원하는 색상으로 조합해서 코드를 만들어 볼 수 있을것입니다. 꾸며진 페이지에 맞게 깔끔해 보이는 색상으로 선택하면 될것입니다. 예시 색상 깔끔히 배경만 하늘색으로 설정 배경 #b3d4fc ::selection { background-color: #b3d4fc; } 코드는 이와 같습니다. 강조가 필요할 때! 배경 orange, 글자색은 검정 ::selectio..
썸네일 이미지

티스토리 "분류 전체보기" 지우기

카테고리에서 "분류 전체보기"가 별로 쓸모 없을것 같고 없애고 싶을때! HTML, CSS를 몰라도 적용 가능하게 설명해보고자한다. 적용 방법 관리 페이지에서 "꾸미기" - "스킨 편집"에 들어갑니다. HTML 편집에 들어갑니다. CSS에 들어가서 다음의 코드를 입력하시고 적용을 눌러 설정을 저장합니다. 코드는 아래와 같으며 복사가능합니다. ul.tt_category > li > a { display: none; } 코드의 동작은 티스토리 카테고리구조에서 "분류 전체보기"를 특정해서 display를 none. 즉. 보이기 안함으로 설정하는 방식으로 작동되는 코드입니다. 적용 결과 더 이상 카테고리에 "분류 전체보기" 메뉴가 표시되지 않습니다.
썸네일 이미지

티스토리 2차도메인 댓글 문제 임시 해결하기

간단 해결 방법 다음의 코드를 스킨편집 - HTML편집에서 넣어줍니다. head, body 어디든 상관없습니다. HTML 삽입 미리보기할 수 없는 소스 2020-08-07 업데이트 : 어디에 위치하던 동작하나 body의 맨끝에 위치시 조금더 실행속도가 빨라집니다. 적용을 한 후 2차도메인 티스토리에 접속하면, 댓글달기를 알아서 찾아 다음 문구를 보여줍니다. 티스토리 로그인이 해제 되었나요? 로그인하여 댓글 남기러가기 로그인 버튼을 클릭하면 "000.tistory.com/주소"로 연결됩니다. (로그인이 안되어있다면, 티스토리 로그인 페이지로 이동합니다. 직접유입으로 표기될 수 있습니다.) 연결 후 바로 댓글달기 위치로 자동으로 스크롤 됩니다. 디자인을 변경하시려면 해당 질문 상자는 아래의 구조를 가집니다...
썸네일 이미지

티스토리 스킨 제작시 브라우저 테스트

요즘에 대부분 윈도우10을 쓰니 최대로 테스트할 수 있는 브라우저가 IE11입니다. 보통 코드가 작동안되는경우가 대부분 IE에서의 오류인데 IE를 지원 안하자니 애매하고, 지원하자니 짜증나는 그런 브라우저입니다. 제가 사용중인 브라우저 IE11에서 이전버전을 테스트 할 수 있습니다. IE11에서 F12를 눌러 개발자도구를 엽니다. 이후 애뮬레이터에 들어갑니다. 문서 모드에서 테스트원하는 브라우저 버전으로 접속할 수 있습니다. 제가 보통 제작하는 스킨은 IE9이상에서 작동하는데 많은 스킨이 IE10에서 걸릴 가능성이 큽니다. 지원 브라우저가 많은것은 그 만큼 볼수있는 사람이 많은것이며, 낮은버전 브라우저에서 검색시 검색엔진이 접속이 가능한 페이지만 보여줄 수 있으므로 지원브라우저가 넓은것은 블로그나 웹문서..
썸네일 이미지

width:100%와 display:block의 차이

width:100%, display:block CSS를 조금 배운 초보라면 둘의 차이를 알기 어렵다. 그러나 이 둘은 확연히 다릅니다. display:block으로 설정해야될 곳에 width:100%를 사용하면 사이즈가 초과되곤 한다. 어떤 차이일까? 설명을 위해 그림을 그려봤다. width:100%는 내용에 초점을 맞춰 크기를 조절하는데 padding, border등 주위의 값은 계산하지 않는다. display:block은 부모에 맞추게 되는데 padding, border에 영향을 받아 내용의 크기가 조절된다. 그림에서 회색은 border, 연두색은 padding을 의미합니다. 검은 상자는 부모 div를 의미한다고 보면 좋을것 같습니다.

HTML기초 : a태그 (링크)

HTML에서 하이퍼링크(이하 링크)를 작성하는 방법은 a태그를 이용하면 됩니다. a태그에는 다양한 값을 이용할 수 있습니다. href target rel download href는 필수로 사용하며 target으로 어떻게 링크를 열지 선택할 수 있습니다. href href는 이동할 페이지의 url을 의미한다. hi098123-skin 이렇게 작성하면 hi098123-skin 이렇게 링크가 생깁니다. target _blank hi098123-skin 링크를 새창으로 엽니다. 많이 사용되는 속성중 하나입니다. 예시 : hi098123-skin _self hi098123-skin 현재창에서 링크를 엽니다. 기본값입니다. (target을 설정하지 않으면 자동으로 _self로 설정됨) _parent hi098123..
썸네일 이미지

HTML기초 : h1 ~ h6 태그

h1 ~ h6 태그는 head라는 의미를 가지고 있습니다. 글머리, 제목을 의미하며 검색엔진에서는 주제를 의미한다고 볼 수 있습니다. 검색엔진이 좋아하는 글 쓰기 큰 주제를 단락별로 h1 ~ h6를 써서 나열하는게 좋습니다. 글 제목 (h1) 주제 1 (h2) 소 주제 1 (h3) 소 주제 2 (h3) 주제 2 (h2) 소 주제 1 (h3) 소 주제 2 (h3) 글을 이런식으로 작성하는것이 검색엔진에서 파악하기 중요하고 사용자가 읽기에도 편합니다. 이런 구성으로 작성하기에 toc(Table of contents, 목차)를 나타내는 기능이 있다면, 의식해서라도 이런 규칙을 적용해서 읽기 좋은 글을 작성할 수 있기 때문에 글을 좀 더 가치있고 와닿게 작성하려면 toc기능을 사용하는것을 권장합니다. 티스토리 ..
썸네일 이미지

HTML기초 : <title>

HTML head에 있는 title태그로 브라우저에서 제목을 표시할 수 있습니다. 이 글은 티스토리 스킨에서의 HTML을 대상으로 설명 합니다. TITLE 태그 이 스킨에서 제목을 표시하는 방법은 이렇습니다. 제목 ... 티스토리 스킨에서 은 페이지 제목을, 은 블로그명을 의미하는데 치환(변환)되어 결과로는 으로 페이지 제목이 표기 될겁니다. 중간에 :: 로 바꾸면 이렇게 표기될것이고요 ... 부분을 제거한다면, 으로 표기될겁니다. ... 주의사항 티스토리에서 제목 표기시 을 제거하시면 안됩니다. 제거시 검색에 큰 불이익을 줄 수 있습니다. 이유는 검색엔진이 모든 글을 같은 내용으로 인식할 수 있기 때문입니다. 티스토리에서 제거시 발생할수 있는 문제로는 검색엔진에서 " - 티스토리" 표시가 될 수 있습니..