안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 기사 카드 웹 구성 요소를 소개하게 되어 기쁩니다. 이 프로젝트는 기사, 블로그 게시물 또는 뉴스 업데이트를 표시하는 시각적으로 매력적인 방법을 제공하여 모든 웹사이트에 훌륭한 추가 기능을 제공합니다. 실용적이고 재사용 가능한 구성 요소를 만들면서 HTML, CSS 및 JavaScript를 사용하여 프런트엔드 개발 기술을 연마할 수 있는 좋은 기회입니다.
기사 카드 구성 요소는 이미지, 제목, 설명, 작성자 정보와 함께 기사를 표시하도록 설계되었습니다. 깔끔하고 현대적인 레이아웃으로 콘텐츠를 시각적으로 더욱 매력적이고 접근 가능하게 만들어 사용자 참여를 향상시킵니다. 이 프로젝트는 다양한 웹 애플리케이션에 쉽게 통합할 수 있는 멋진 기사 카드를 만드는 방법을 보여줍니다.
프로젝트 구조 개요는 다음과 같습니다.
Article-Card/ ├── index.html ├── style.css └── script.js (optional)
프로젝트를 시작하려면 다음 단계를 따르세요.
저장소 복제:
git clone https://github.com/abhishekgurjar-in/Article-Card.git
프로젝트 디렉토리 열기:
cd Article-Card
프로젝트 실행:
index.html 파일은 기사 카드 구성 요소의 구조를 정의합니다. 다음은 일부 내용입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Article Card</title>
<link
href="https://fonts.googleapis.com/css?family=Manrope:200,300,regular,500,600,700,800"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="header">
<h1>Article Card</h1>
</div>
<div class="container">
<div class="box">
<div class="left-box"></div>
<div class="right-box">
<h3>
Shift the overall look and feel by adding these wonderful touches to
furniture in your home
</h3>
<p>
Ever been in a room and felt like something was missing? Perhaps it
felt slightly bare and uninviting. I’ve got some simple tips to help
you make any room feel complete.
</p>
<div class="name-card">
<div class="name">
<img
class="profile"
src="./images/avatar-michelle.jpg"
alt="Profile picture of Michelle Appleton"
/>
<h4>
Michelle Appleton <br />
<span>28 Jun 2020</span>
</h4>
</div>
<div class="share">
<img src="./images/icon-share.svg" alt="Share icon" />
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
style.css 파일은 기사 카드 구성 요소의 스타일을 지정하여 시각적으로 매력적이고 반응성이 뛰어납니다. 다음은 몇 가지 주요 스타일입니다.
* {
box-sizing: border-box;
}
body {
background-color: #ecf2f8;
margin: 0;
padding: 0;
font-family: 'Manrope', sans-serif;
font-size: 16px;
}
.header {
margin: 20px;
text-align: center;
}
.container {
max-width: 1440px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.box {
overflow: hidden;
background-color: white;
border-radius: 20px;
margin: 0;
width: 700px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 100px;
}
.left-box {
width: 40%;
height: 300px; /* Ensure height is defined */
background: url("./images/drawers.jpg") no-repeat center center;
background-size: cover; /* Ensures the image covers the entire area */
}
.right-box {
background-color: white;
width: 60%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin-left: 25px;
}
.right-box h3 {
font-size: 18px;
margin-right: 55px;
}
.right-box p {
font-size: 13px;
margin-right: 55px;
}
.name-card {
display: flex;
flex-direction: row;
align-items: center;
}
.share {
background-color: #ecf2f8;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 120px;
}
.share img {
width: 20px;
}
.name {
gap: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.name h4 {
font-size: 14px;
}
.name span {
font-size: 11px;
color: gray;
}
.profile {
width: 50px;
border-radius: 50%;
}
.share-popup {
display: flex;
align-items: center;
justify-content: space-between;
color: rgb(214, 214, 214);
background-color: #48556a;
padding-inline: 15px;
border-radius: 7px;
font-weight: 100;
font-size: 15px;
width: 220px;
position: fixed;
margin-top: 250px;
margin-left: 550px;
}
.footer {
margin-top: 150px;
text-align: center;
}
@media (max-width: 750px) {
.box {
flex-direction: column;
width: 400px;
height: 600px;
}
.left-box {
width: 100%;
}
.share-popup {
margin-top: 550px;
margin-left: 350px;
}
}
script.js 파일을 사용하여 콘텐츠 확장 또는 축소와 같은 추가적인 상호 작용을 추가할 수 있습니다. 간단한 예는 다음과 같습니다.
const shareBtn = document.getElementsByClassName("share")[0];
const container = document.getElementsByClassName("container")[0];
shareBtn.addEventListener("click", () => {
let sharePopup = document.querySelector(".share-popup");
if (sharePopup) {
container.removeChild(sharePopup);
} else {
sharePopup = document.createElement("div");
sharePopup.innerHTML = `
<p>S H A R E</p>
<img class="fb" src="./images/icon-facebook.svg" alt="기사 카드 만들기" />
<img class="tw" src="./images/icon-twitter.svg" alt="Twitter" />
<img class="pt" src="./images/icon-pinterest.svg" alt="Pinterest" />
`;
sharePopup.classList.add("share-popup");
container.appendChild(sharePopup);
}
});
여기에서 Article Card 프로젝트의 라이브 데모를 확인하실 수 있습니다.
기사 카드 구성 요소를 구축하는 것은 재사용 가능하고 시각적으로 매력적인 웹 구성 요소를 디자인하는 데 있어서 좋은 경험이었습니다. 이 프로젝트는 현대 웹 개발에서 깔끔한 디자인과 반응형 레이아웃의 중요성을 강조합니다. HTML, CSS 및 선택적으로 JavaScript를 적용하여 모든 웹 사이트의 시각적 매력과 유용성을 향상시킬 수 있는 구성 요소를 만들었습니다. 이 프로젝트가 여러분이 자신만의 맞춤형 구성요소를 구축하는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!
이 프로젝트는 웹 개발에 대한 지속적인 학습 여정의 일환으로 개발되었습니다.
위 내용은 기사 카드 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
