찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >기사 카드 만들기

기사 카드 만들기

王林
王林원래의
2024-09-03 16:08:48657검색

Build a Article Card

소개

안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 기사 카드 웹 구성 요소를 소개하게 되어 기쁩니다. 이 프로젝트는 기사, 블로그 게시물 또는 뉴스 업데이트를 표시하는 시각적으로 매력적인 방법을 제공하여 모든 웹사이트에 훌륭한 추가 기능을 제공합니다. 실용적이고 재사용 가능한 구성 요소를 만들면서 HTML, CSS 및 JavaScript를 사용하여 프런트엔드 개발 기술을 연마할 수 있는 좋은 기회입니다.

프로젝트 개요

기사 카드 구성 요소는 이미지, 제목, 설명, 작성자 정보와 함께 기사를 표시하도록 설계되었습니다. 깔끔하고 현대적인 레이아웃으로 콘텐츠를 시각적으로 더욱 매력적이고 접근 가능하게 만들어 사용자 참여를 향상시킵니다. 이 프로젝트는 다양한 웹 애플리케이션에 쉽게 통합할 수 있는 멋진 기사 카드를 만드는 방법을 보여줍니다.

특징

  • 반응형 디자인: 기사 카드는 완벽하게 반응하므로 데스크톱과 모바일 기기 모두에서 멋지게 보입니다.
  • 호버 효과: 미묘한 호버 효과가 적용되어 카드의 상호작용성이 향상됩니다.
  • 사용자 정의 가능한 레이아웃: 다양한 유형의 콘텐츠에 맞게 레이아웃을 쉽게 사용자 정의할 수 있어 다양한 사용 사례에 맞게 다용도로 사용할 수 있습니다.

사용된 기술

  • HTML: 기사 카드 구성요소의 구조를 제공합니다.
  • CSS: 시각적으로 매력적이고 반응이 빠른 디자인을 만들기 위해 구성 요소의 스타일을 지정합니다.
  • JavaScript: (선택 사항) 클릭 시 콘텐츠 확장 또는 다른 구성 요소와의 통합과 같은 추가 상호 작용에 사용할 수 있습니다.

프로젝트 구조

프로젝트 구조 개요는 다음과 같습니다.

Article-Card/
├── index.html
├── style.css
└── script.js (optional)
  • index.html: 기사 카드 구성요소의 HTML 구조를 포함합니다.
  • style.css: CSS 스타일을 포함하여 매력적이고 반응이 빠른 디자인을 만듭니다.
  • script.js: (선택 사항) 클릭 시 콘텐츠 확장과 같은 상호 작용을 추가하는 데 사용할 수 있습니다.

설치

프로젝트를 시작하려면 다음 단계를 따르세요.

  1. 저장소 복제:

    git clone https://github.com/abhishekgurjar-in/Article-Card.git

  2. 프로젝트 디렉토리 열기:

    cd Article-Card

  3. 프로젝트 실행:

    • 기사 카드 구성 요소를 보려면 웹 브라우저에서 index.html 파일을 엽니다.

용법

  1. 웹 브라우저에서 애플리케이션을 엽니다.
  2. 카드 위에 마우스를 올리면 대화형 효과를 볼 수 있습니다.
  3. 특정 사용 사례에 맞게 HTML 및 CSS 파일을 편집하여 콘텐츠를 맞춤설정하세요.
  4. 그리드나 기사 목록을 생성하려면 카드를 더 추가하세요.

코드 설명

HTML

index.html 파일은 기사 카드 구성 요소의 구조를 정의합니다. 다음은 일부 내용입니다.


  
    <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>
  
  
    <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>

CSS

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를 적용하여 모든 웹 사이트의 시각적 매력과 유용성을 향상시킬 수 있는 구성 요소를 만들었습니다. 이 프로젝트가 여러분이 자신만의 맞춤형 구성요소를 구축하는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!

크레딧

이 프로젝트는 웹 개발에 대한 지속적인 학습 여정의 일환으로 개발되었습니다.

작가

  • 아비셰크 구자르
    • GitHub 프로필

위 내용은 기사 카드 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html if for while Directory using JS this display github
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：프런트엔드 개발자를 위한 표준화된 사용자 인터페이스(UI) 1부다음 기사：프런트엔드 개발자를 위한 표준화된 사용자 인터페이스(UI) 1부

관련 기사

더보기