hi098123 Tistory Tip

티스토리 스킨 ##_rp_rep_class_##

티스토리 공식 스킨 페이지에 보면 설명이 좀 이상합니다. 댓글의 글의 목록에 반복되는 스타일 + admin 아이디 앞에 아이콘 어떤 의미인가와 활용방법을 알아보고자 글을 작성합니다. 분류 값 일반 댓글 rp_general 비밀 댓글 rp_secret 본인의 댓글 rp_admin 숨겨진 댓글 hiddenComment 이렇게 반환됩니다. 결과 예시 만약 코드가 다음과 같았다면 일반 댓글 비밀 댓글 (내용을 볼 수 있는 경우) 블로그 주인의 댓글, 블로그 주인의 댓글이면서 비밀댓글 비밀 댓글 (내용을 볼 수 없는 경우) 이렇게 4개로 나눠집니다. 활용 예시는? .rp_admin{font-weight:bold} CSS설명 : 블로그 주인의 댓글의 글자를 굵게 설정합니다. 단순 예시로 CSS를 다룰줄 안다면 아래..
썸네일 이미지

티스토리 글 좋아요/싫어요

아마도 티스토리를 사용하면서 글 싫어요 기능은 들어본적 없을텐데요 이에 대해 외부로 잘 드러나지않는 데이터로 싫어요 기능이 추가되어있는것을 확인하였습니다. (앞으로 업데이트가 될지 안될지는 알수없습니다.) 티스토리 좋아요 기능 티스토리 좋아요 기능은 5개가 채워지면 스토리에 글이 등록됩니다. 그런데 확인해보니 티스토리에서도 싫어요 기능이 있는것으로 보입니다. 아래는 글 로딩시 전달받는 좋아요, 싫어요 데이터 일부 reactionCounter: {sum: 5, like: 5, sad: 0} 구조가 이렇게 바뀐건 공감기능 업데이트 이후입니다. (관련공지 : https://notice.tistory.com/2532) 이때 좋아요 시스템 외부 구조가 바뀌면서 앞으로 업데이트 할 내용 일부 추가된것 같습니다. 비..
썸네일 이미지

드래그 색상 바꾸기

웹 사이트를 둘러보면 드래그 했을때 파란배경 흰색상 이 아닌 지정 색상을 이용하기도 합니다. 어떻게 설정할 수 있는지 알아보고 설정하는데 도움이 되도록 글을 작성합니다. 아래 예시코드는 배경색 : 검정, 글자색 : 흰색으로 이렇게 나타납니다. ::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..