'티스토리/CSS' 카테고리의 글 목록 - hi098123 Tistory Tip

티스토리 이미지 유튜브 링크 꾸미기

흔히 유튜브를 공유할때 퍼가기 기능을 이용해서 공유를 합니다. 그러나, 이렇게 공유시 유튜브 리소스를 로딩하여 사이트 속도가 약간 저하될 수 있는데 사이트 내에서 영상을 재생해야하는 경우 위 방법을 어쩔수 없지만 사용해야됩니다. 유튜브로 이동하여 시청하게 할 때 이 글은 사이트(또는 티스토리 블로그) 외부로 나가 유튜브에서 시청하도록 하는 경우에만 해당됩니다. HTML구조가 아래와 같을때 (일반적인 티스토리 이미지 구조) figure a img CSS를 아래와 같이 설정합니다. figure>a[href*="//www.youtube.com"]:before, figure>a[href*="//youtube.com"]:before, figure>a[href*="//youtu.be"]:before{ positio..

티스토리 접은글 꾸미기

접은글 티스토리의 접은글 문구를 바꾸고 싶은데 못바꾸시는 분들 많을것으로 생각됩니다. CSS 코드만으로 접은글에 들어갈 문구를 바꿀 수 있습니다. 원리를 보면 기존 글자는 배경색으로 만들어서 안보이게 만들고(또는 font-size:0과 같이 만들고 :before 기능을 이용해서 글자를 넣는 방법입니다.) div[data-ke-type='moreLess'] a.btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] a.btn-toggle-moreless{ color:transparent; /*또는 font-size:0*/ } div[data-ke-type="moreLess"].open>a.btn-toggle-moreless:before { cont..

간단하고 깔끔한 제목 CSS로 꾸미기

제목을 간단하고 깔끔하게 꾸며보고자 합니다. 여러 디자인이 있겠지만 아래와 비슷한 느낌으로 꾸며보고자 합니다. 제목 CSS 코드 border-left 값으로 왼쪽 엣지를 꾸밀것이고 background-color로 배경색상을 줄것이고 padding으로 내부 여백을 줄것입니다. border-left 저는 PC, Mobile 모두 5px이 깔끔해보여서 5px으로 설정해보았습니다. border-left: 5px solid #FF9800; background-color 원하는 색상을 입력하시면 됩니다. background-color: #FFF3E0; padding 내부 여백입니다. 저는 10px이 깔끔한것 같아 10px으로 설정하였습니다. padding: 10px; 미리보기 제목 미리보기 h2{ padding: ..

티스토리 링크 미리보기, 투명이미지 버그 고치기

티스토리 링크 미리보기 티스토리에 링크를 걸고 링크 문장에서 엔터를 치면 아래와 같은 미리보기가 뜹니다. 위의 두 사진에서 차이가 보이시나요? 1번 이미지는 기본형태고, 2번 이미지는 이 글에서 소개할 내용을 적용한 이후의 이미지 입니다. 네 그렇습니다. 기본형태에서 티스토리 아이콘이 겹쳐보이네요. 이는 썸네일 이미지가 투명배경일때 발생하는 버그입니다. 투명 이미지 버그 고치기 투명색상 썸네일인경우 미리보기 이미지가 겹쳐보이는 문제가 발생하는데 위의 상황을 말끔히 없애줄 단 한줄의 코드가 있습니다. 관리 페이지에서 "꾸미기" - "스킨 편집"에 들어갑니다. HTML 편집에 들어갑니다. CSS에 들어가서 다음의 코드를 입력하시고 적용을 눌러 설정을 저장합니다. 코드는 아래와 같으며 복사가능합니다. figu..

CSS Selector로 외부링크 선택하기

CSS를 보통은 초보자가 배우고 쓰기 때문에 CSS Selector OOO 선택하기 시리즈로 글을 써볼까합니다. 이 글은 링크()중 외부링크만 선택하는 방법입니다. 선택에 앞서 기초내용부터 한번에 다룹니다. 때문에 잘 몰랏어도 한번 정독하면 사용할 수 있을것입니다. CSS의 외부링크 선택법 사실 저는 초보자를 위한 글을 잘 쓰지 못합니다. 그냥 방법을 순차적으로 쓸것인데요. 공부에는 도움이 되지는 않아도 실제 쓸때는 도움은 될겁니다(?) 먼저, 태그 선택법 a{text-decoration: none;} Selector 자리에 태그명을 입력한다면 입력한 태그가 선택된다. 위의 코드는 a태그를 선택하여 스타일로는 글자 꾸미기 = none 를 줬다. 둘째, Attribute 선택방법 (속성 선택자) a[hre..

드래그 색상 바꾸기

웹 사이트를 둘러보면 드래그 했을때 파란배경 흰색상 이 아닌 지정 색상을 이용하기도 합니다. 어떻게 설정할 수 있는지 알아보고 설정하는데 도움이 되도록 글을 작성합니다. 아래 예시코드는 배경색 : 검정, 글자색 : 흰색으로 이렇게 나타납니다. ::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. 즉. 보이기 안함으로 설정하는 방식으로 작동되는 코드입니다. 적용 결과 더 이상 카테고리에 "분류 전체보기" 메뉴가 표시되지 않습니다.

width:100%와 display:block의 차이

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

< 이전 1 2 다음 >

인기 글

최신 글

링크
hi098123 Tistory Tip 소개
hi098123 Tools
hi098123 블로그

Design by hi098123 이 사이트의 게시글을 복제하지 마십시오. 링크공유만 허용됩니다.

티스토리툴바