티스토리 그라데이션 글상자 만들기

안녕하세요 이생정입니다!
오늘은 티스토리 그라데이션 글상자 만드는 방법을 알려드리겠습니다!

 

저는 H3 태그를 응용하여 적용하였는데요, 꼭 H3만 해당되는 것은 아니고 코드만 바꾸면 자유롭게 변형하여 사용할 수 있으니 한번 써먹어보세요!!

제가 알려드릴 그라데이션 글상자 만드는 방법은 이것입니다!

 

이렇게 그라데이션 글상자를 만들 수 있습니다.

어때요, 괜찮나요? 만약 이렇게 하고싶다면 하는 방법은 간단합니다!

티스토리 글 작성할 때 보통은 기본모드로 작성하게 되는데요, 발행 전 HTML 모드로 변경 후, 원하는 부분을 <h3 class="gradient"> </h3> 태그로 가둬주시면 됩니다.

 

참 쉽죠?

만약 HTML 모드로 작성 후 다시 기본모드로 바꾼다면 적용한 H3 태그가 사라지니 꼭 발행 전에 적용하고 발행해주세요~!

그라데이션 글상자 코드

<style>
    h3.gradient {
    margin: 30px 0px 20px 0px;
    padding: 15px 10px 15px 20px;
    background: linear-gradient( to right, #0261a0, #2d7aae, #0261a0);
    font-size: 20px;
    color: #fff;
    font-weight: 400;
    overflow-x: auto;
    border-radius: 0px 10px 0px 10px;
</style>

<h3 class="gradient">
ㅎㅎㅎ</h3>

위 코드를 사용하시면 됩니다!

h3라고 되어있는 부분을 h1, h2로 바꾸면 해당 태그로 적용됩니다~!!

티스토리를 예쁘게 꾸며보세요!! :)