간단한 블로그 형식의 HTML 코드를 제공합니다. 이 코드는 블로그 게시물을 보여주고, 제목과 내용을 포함합니다.
<!DOCTYPE html>
<html>
<head>
<title>간단한 블로그 형식</title>
<style>
/* 블로그 스타일 */
.blog-post {
margin: 20px;
padding: 10px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
.blog-title {
font-size: 24px;
font-weight: bold;
}
.blog-content {
font-size: 16px;
}
</style>
</head>
<body>
<h1>블로그 포스트</h1>
<!-- 블로그 포스트 1 -->
<div class="blog-post">
<h2 class="blog-title">첫 번째 포스트 제목</h2>
<p class="blog-content">
이곳에 첫 번째 포스트의 내용을 작성합니다.
</p>
</div>
<!-- 블로그 포스트 2 -->
<div class="blog-post">
<h2 class="blog-title">두 번째 포스트 제목</h2>
<p class="blog-content">
이곳에 두 번째 포스트의 내용을 작성합니다.
</p>
</div>
<!-- 추가 포스트 추가 가능 -->
</body>
</html>
위 코드에서는 각 블로그 게시물을 .blog-post 클래스로 스타일링하고, 제목과 내용을 각각 .blog-title 및 .blog-content 클래스로 스타일링합니다.
결과보기
'HTML 예제' 카테고리의 다른 글
| 파이 차트 만들기 (1) | 2023.12.08 |
|---|---|
| 화면에 움직이는 객체 추가 (1) | 2023.12.08 |
| 동적으로 이미지 변경 (1) | 2023.12.08 |
| 사용자 정보 입력 받기 (0) | 2023.12.07 |
| 텍스트 스타일링 연습 (0) | 2023.12.07 |
