태그 티스토리 구분선 스타일링 CSS 점선구분선 그라데이션 구분선

 

블로그 글을 작성할때 구분선 많이 사용하는데 구분선 스타일링 하는법을 공유 해요. 저도 독학으로 여러 블로그 돌아다니면서 찾아보고, 물어도 보고 해서 테스트도 해보고 쉽게 사용 가능 하려면 어떻게 해야되는지 차근 차근 알아가는중이니 미흡하더라도 한번 따라하시고 잘 사용하길 바랍니다.

CCS를 통해서 하는 방법 공유 할께요

---

 

hr 태그 티스토리 구분선 스타일링 CSS

 

 

차근차근 따라오시면 됩니다 관리를 눌러서 스킨편집에 들어갑니다

HTML편집 버튼을 누르고 CSS에 들어갑니다.

 

컨트롤 +F 키를 눌러서 hr 를 검색합니다. 그럼 Style1~Style7번까지 있습니다. hr문구가 구분선입니다.

저는 5번과 6번을 주로 사용하기 때문에 5번 6번을 변경합니다.

 

기존에 있던 태그와 아래에 있는 태그를 복사하여 바꿔줍니다. 주석처리도 해놨으니 두계 조절 하면 됩니다. 아주 간단한 방법으로 구분선도 꾸밀수 있습니다. 

구분선 코드

/* 티스토리 hr 구분선 태그 스타일5 */

hr[data-ke-style='style5'],

#article-view hr[data-ke-style='style5'] {

  border: none; /* 기본 테두리 제거 */

  border-top: 6px dotted pink; /* 핑크색 굵은 점선 */

  height: 0; /* 높이 0으로 설정 */

  padding: 0; /* 패딩 제거 */

}

/* 티스토리 hr 태그 스타일6 */

hr[data-ke-style='style6'],

#article-view hr[data-ke-style='style6'] {

  border: none; /* 기본 테두리 제거 */

  height: 5px; /* 선 높이 */

  background: linear-gradient(to right, #f59d87e5, #87d1f3); /* 빨강에서 파랑으로 그라데이션 */

  border: 0; /* 테두리 제거 */

  padding: 0; /* 패딩 제거 */

}