블로그에서 사용할 수 있는 HTML 소스 (글꼴 및 스타일링,이미지 삽입 및 설명, 표 (Table), 유튜브 비디오 삽입, 버튼 삽입)

블로그에서 사용할 수 있는 HTML 소스 예시는 여러 가지가 있는데, 주로 블로그 레이아웃을 구성하거나 콘텐츠를 꾸밀 때 많이 사용됩니다. 여기에서는 몇 가지 유용한 HTML 예시를 소개합니다.

1. 기본적인 글꼴 및 스타일링

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>블로그 제목</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
        }
        p {
            color: #555;
        }
        a {
            color: #0066cc;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>블로그 제목</h1>
        <p>여기는 기본적인 블로그 게시글 내용이 들어갈 부분입니다. 글을 읽는 사람이 가독성 좋게 볼 수 있도록 스타일링을 적용할 수 있습니다.</p>
        <a href="#">자세히 보기</a>
    </div>
</body>
</html>

2. 이미지 삽입 및 설명 추가

<div class="image-container" style="text-align:center;">
    <img src="이미지경로.jpg" alt="이미지 설명" style="max-width:100%; height:auto;">
    <p style="color: #555;">이미지에 대한 설명을 여기에 입력하세요.</p>
</div>

3. 표 (Table) 사용

<table border="1" style="width:100%; border-collapse:collapse;">
    <thead>
        <tr>
            <th>항목</th>
            <th>설명</th>
            <th>가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>제품 1</td>
            <td>좋은 품질</td>
            <td>₩10,000</td>
        </tr>
        <tr>
            <td>제품 2</td>
            <td>합리적인 가격</td>
            <td>₩15,000</td>
        </tr>
    </tbody>
</table>

4. 유튜브 비디오 삽입

<div style="text-align:center;">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/영상ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

5. 버튼 삽입

<div style="text-align:center; margin-top:20px;">
    <a href="#" style="background-color:#28a745; color:white; padding:10px 20px; text-decoration:none; border-radius:5px;">더 알아보기</a>
</div>

이 소스들은 블로그 콘텐츠를 깔끔하고 보기 좋게 구성하는 데 도움이 됩니다. 원하는 스타일에 맞게 CSS와 레이아웃을 수정하여 사용하시면 됩니다.

저작자표시

'자유게시판' 카테고리의 다른 글

2025년 신작 게임 소개: 기대작들을 한눈에 (1)	2024.09.16
블로그에 간단한 게임 추가할수 있는 html 소스 (1)	2024.09.06
재미삼아 가볍게 해보는 인기투표 (블로그에서 사용할수 있는 간단한 인기 투표 html 소스) (6)	2024.09.06
2024년 최신 기술 분야 정리 (인공지능 (AI) 및 기계 학습,양자 컴퓨팅,메타버스,블록체인 및 Web3,에너지 기술,생명공학,로봇공학,5G/ 6G 및 통신 기술) (8)	2024.08.31
2024년 무료로 사용하는 웹호스팅, 도메인, 가상전화번호 사이트 모음 (4)	2024.08.22