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

티스토리 블로그 글 작성 시 소제목 태그 필요하실 때 따라 하기 쉬운 태그입니다.

복사해서 사용하시면 됩니다. :D

 

잇태리의 태리텔링

•검은색 테두리에 글씨도 검은색인 제목

 

<h3 style="border: 1px solid black; display: inline-block; padding: 10px;">잇태리의 태리텔링</h3>

 

잇태리의 태리텔링

•연보라색 테두리에 글씨는 검은색인 제목

 

<h3 style="border: 1px solid #CC99FF; display: inline-block; padding: 10px;" data-ke-size="size23">잇태리의 태리텔링</h3> 

 

⁕태그 보면 색깔 부분 코드가 바뀌었어요.

 

잇태리의 태리텔링

•연보라색 테두리에 글씨도 연보라색인 제목

 

<h3 style="border: 1px solid #CC99FF; display: inline-block; padding: 10px; color: #cc99ff;" data-ke-size="size23">잇태리의 태리텔링</h3>

 

⁕color속성을 추가해서 글씨에도 색을 넣어주었어요.

 

잇태리의 태리텔링

•두꺼운 연보라색 모서리가 둥근 테두리에 기본 두께 연보라색 글씨 인 제목

 

<h3 style="border: 5px solid #CC99FF; display: inline-block; padding: 10px; color: #cc99ff; border-radius: 10px;" data-ke-size="size23">잇태리의 태리텔링</h3>

 

⁕border 수치를 올려줘서 테두리를 두껍게 해 주고, 모서리 부분을 둥글게 하기 위해서 border-radius를 추가했고, 둥근 정도를 조절하고 싶다면 숫자를 변경하면 됩니다.

 

잇태리의 태리텔링

•두꺼운 연보라색 모서리가 둥근 테두리에 두꺼운 연보라색 글씨 인 제목

 

<h3 style="border: 5px solid #CC99FF; display: inline-block; padding: 10px; color: #cc99ff; border-radius: 10px; font-weight: bold;" data-ke-size="size23">잇태리의 태리텔링</h3>

 

⁕글씨까지도 두껍게 바꿔봤어요. 

 

 

참 쉽죵? 😂

궁금한 거 있으시면 댓글 달아주시고, 다른 버전도 곧 업로드하도록 하겠습니다. :)

 

 

※저는 소제목이 h3태그로 사용하고 있어서 다 h3인데요. h1, h2 등등 다른 걸로 사용하시면 그것도 변경해주셔야 됩니다. :D