티스토리 소제목 꾸미기 HTML 태그 2탄

지난번 "티스토리 소제목 꾸미기 HTML 태그 1탄"에서는 소제목에 테두리를 만드는 방법에 대해서 알려드렸었는데, 오늘은 밑줄을 만들어 볼게요. :D

 

지난번 소제목 테두리가 궁금하시면 👇👇👇

[알아두면 좋은 정보] - 티스토리 소제목 꾸미기 HTML 태그 1탄

티스토리 소제목 꾸미기 HTML 태그 1탄

 

 

티스토리 소제목 꾸미기 HTML 태그

 

1. 태리텔링

⁕기본 제목입니다.

<h3 data-ke-size="size23">1.태리텔링</h3>

 

2. 태리텔링

⁕제목에 밑줄을 만들어줬어요.

<h3 style="border-bottom: 2px solid; padding-bottom: 3px;" data-ke-size="size23">2.태리텔링</h3>

 

border-bottom 속성을 사용해서 밑줄을 만들어 주었고 여기서 2px은 밑줄 두께입니다. 원하는 두께로 조절할 수 있어요.

그리고 padding-bottom 속성을 사용해 밑줄과 텍스트 사이의 거리를 조절할 수 있습니다. 

 

3. 태리텔링

⁕밑줄을 분홍색, 제목을 주황색으로 색상 변경하는 태그를 넣었어요.

<h3 style="border-bottom: 2px solid pink; padding-bottom: 3px; color: orange;" data-ke-size="size23">3.태리텔링</h3>

 

밑줄색을 변경하고 싶으면 pink 자리에 원하는 색상 코드를 넣어주시면 되고,

글씨색을 변경하고 싶다면 orange 자리에 원하는 색상 코드를 넣으면 되겠습니다.

 

4. 태리텔링

⁕글씨크기 변경하는 태그입니다.

<h3 style="border-bottom: 2px solid #00ee00; padding-bottom: 10px; font-size: 30px; color: #cc0000;" data-ke-size="size23">태리텔링</h3>

 

font-size태그를 넣어서 글씨크기 조절을 하면 되고 숫자를 변경하면 크기가 변경되겠죠? 

 

 

5. 태리텔링

⁕글씨 왼쪽에도 보더를 만들어줬어요.

<h3 style="border-left: 2px solid #0000ff; padding-left: 3px; border-bottom: 2px solid #00ee00; padding-bottom: 3px; font-size: 30px; color: #cc0000;" data-ke-size="size23">5.태리텔링</h3>

 

위에 2번에서와 마찬가지로 왼쪽보더의 두께조절과 왼쪽보더와 글씨 사이의 간격 조절도 같은 방식으로 하시면 됩니다.