티스토리 간편 유용 HTML 모음 + 소제목 꾸미기 추천 글

 

1. 유튜브 영상 삽입

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/동영상ID" frameborder="0" allowfullscreen></iframe>

사용법: 동영상ID 부분에 삽입하려는 유튜브 동영상의 ID를 입력하세요.

2. 구글 맵 삽입

 

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3162.813738195253!2d127.0354583!3d37.5642139!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca2e7b6c1a519%3A0x1f491f3ed0fa8eeb!2z66y46riw7ZmU6rWQ!5e0!3m2!1sko!2skr!4v1573129785537!5m2!1sko!2skr" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

사용법: 원하는 위치의 구글 맵 주소를 src에 입력하세요.

3. 폰트 적용

 

<style>
    body {
        font-family: '맑은 고딕', Arial, sans-serif;
    }
</style>

사용법: 원하는 폰트 패밀리를 font-family에 입력하세요.

4. 이미지에 링크 추가

 

<a href="http://www.example.com">
    <img src="http://www.example.com/image.jpg" alt="설명">
</a>

사용법: href에 링크, src에 이미지 경로, alt에 이미지 설명을 입력하세요.

5. 단락 스타일링

 

<p style="color:blue; font-size:18px; text-align:center;">
    원하는 내용을 입력하세요.
</p>

사용법: 원하는 내용을 단락에 입력하고, color와 font-size, text-align 등을 원하는 대로 수정하세요.

6. 테이블 만들기

 

<table border="1">
    <tr>
        <th>제목 1</th>
        <th>제목 2</th>
    </tr>
    <tr>
        <td>내용 1</td>
        <td>내용 2</td>
    </tr>
</table>

사용법: 원하는 내용을 <th> 및 <td>에 입력하세요.

7. 목록 만들기

 

<ul>
    <li>첫 번째 아이템</li>
    <li>두 번째 아이템</li>
</ul>

<ol>
    <li>첫 번째 아이템</li>
    <li>두 번째 아이템</li>
</ol>

사용법: <ul>은 불규칙 목록, <ol>은 순서가 있는 목록을 나타냅니다. <li> 사이에 목록 아이템을 추가하세요.

8. 공지사항 스타일

 

<div style="border:2px solid #000; padding:10px; background-color:#ffeb3b;">
    <strong>공지사항:</strong> 중요한 내용을 여기에 입력하세요.
</div>

사용법: background-color를 원하는 색상으로 변경하고, 공지사항 내용을 입력하세요.

9. 버튼 만들기

 

사용법: href에 링크, background-color에 배경색, color에 글자 색을 원하는 대로 수정하세요.

10. 회색 박스

 

<div style="background-color:#f2f2f2; padding:10px; border-radius:5px;">
    원하는 내용을 입력하세요.
</div>

사용법: background-color와 padding을 원하는 대로 수정하고 내용을 입력하세요.

---

티스토리 간편 유용 HTML 모음 추가 10개

TISTORY 폰트 관련 스타일을 적용할 수 있는 유용한 HTML 코드 5개

티스토리 소제목 꾸미기 |  서식(HTML) 스타일 모음 part 1

티스토리 소제목 꾸미기 | 서식(HTML) 스타일 모음 part 2

티스토리 소제목 꾸미기 | 두줄 소제목 서식(HTML) 스타일 모음

티스토리 소제목 꾸미기 | 서식(HTML) 모음, 그라데이션 스타일

티스토리 소제목 꾸미기 | 인용구 서식(HTML) 스타일 모음