트위터 피드 스타일링을 위한 HTML, CSS, 및 JavaScript 예제를 만들어보겠습니다. 이 예제에서는 간단한 트위터 피드 스타일을 구현할 것입니다. 여기에서는 몇 가지 포스트가 표시되며, 사용자가 포스트를 추가할 수 있도록 할 것입니다.
1. HTML 코드 작성:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>트위터 피드 스타일링</title>
</head>
<body>
<div id="twitter-feed">
<div class="post">
<div class="user-info">
<img src="user1.jpg" alt="User 1">
<span class="username">User 1</span>
</div>
<p class="post-content">첫 번째 포스트입니다. #트위터</p>
</div>
<div class="post">
<div class="user-info">
<img src="user2.jpg" alt="User 2">
<span class="username">User 2</span>
</div>
<p class="post-content">두 번째 포스트입니다. #스타일링</p>
</div>
</div>
<div id="new-post">
<textarea id="post-content" placeholder="새로운 포스트 작성..."></textarea>
<button id="add-post">게시</button>
</div>
<script src="script.js" defer></script>
</body>
</html>
위 코드에서는 트위터 피드와 새로운 포스트를 작성하는 양식을 만듭니다.
2. CSS 코드 작성:
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
#twitter-feed {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.post {
margin-bottom: 20px;
padding: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.user-info img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.username {
font-weight: bold;
}
#new-post {
max-width: 600px;
margin: 20px auto;
padding: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
#post-content {
width: 100%;
padding: 10px;
border: none;
border-bottom: 1px solid #ddd;
margin-bottom: 10px;
resize: none;
}
#add-post {
background-color: #1da1f2;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
위 코드에서는 피드 스타일을 정의하고, 새로운 포스트 작성 양식을 스타일링합니다.
3. JavaScript 코드 작성:
// script.js
const addPostButton = document.getElementById("add-post");
const postContentTextarea = document.getElementById("post-content");
const twitterFeed = document.getElementById("twitter-feed");
addPostButton.addEventListener("click", () => {
const content = postContentTextarea.value.trim();
if (content) {
const postDiv = document.createElement("div");
postDiv.className = "post";
postDiv.innerHTML = `
<div class="user-info">
<img src="user3.jpg" alt="User 3">
<span class="username">User 3</span>
</div>
<p class="post-content">${content}</p>
`;
twitterFeed.appendChild(postDiv);
postContentTextarea.value = "";
}
});
JavaScript 코드는 새로운 포스트를 추가하는 기능을 구현합니다. 사용자가 "게시" 버튼을 클릭하면 새로운 포스트가 피드에 추가됩니다.
이제 코드를 작성하고 HTML 파일을 열어보면 간단한 트위터 피드 스타일링 예제를 확인할 수 있습니다.
'HTML 예제' 카테고리의 다른 글
| 나만의 스티커 만들기: HTML5 <canvas>로 나만의 스티커 생성 (0) | 2023.12.06 |
|---|---|
| 3D 회전 메뉴: CSS 3D 변환으로 메뉴 항목 회전 효과 (0) | 2023.12.06 |
| 동적 테이블 정렬: JavaScript를 사용하여 동적으로 테이블 열 정렬 (0) | 2023.12.06 |
| 깜빡이는 눈동자: CSS 애니메이션으로 눈동자 깜빡임 효과 (0) | 2023.12.06 |
| 텍스트 애니메이션: CSS로 텍스트가 글자 하나씩 나타나는 애니메이션 (0) | 2023.12.05 |
