찾다

집 >웹 프론트엔드 >JS 튜토리얼 >프로필 카드 웹사이트 구축

프로필 카드 웹사이트 구축

王林
王林원래의
2024-08-24 11:21:35614검색

Build a Profile Card Website

소개

안녕하세요, 개발자 여러분! 저의 최근 프로젝트인 프로필 카드를 공유하게 되어 기쁩니다. 이 간단하면서도 우아한 프로젝트는 개인용 또는 전문용으로 재사용 가능한 구성 요소를 만드는 동시에 프런트 엔드 개발 기술을 선보일 수 있는 좋은 방법입니다. 개인 포트폴리오를 구축하든 비즈니스 웹사이트를 구축하든 이 프로필 카드를 사용하면 웹페이지에 세련되고 전문적인 느낌을 더할 수 있습니다.

프로젝트 개요

프로필 카드 프로젝트는 사용자의 프로필 사진, 이름, 상태, 간단한 설명을 표시하는 웹 기반 구성 요소입니다. 대화형으로 설계되어 사용자가 단 한 번의 버튼 클릭만으로 친구를 추가하거나 제거할 수 있습니다. 이 프로젝트는 JavaScript를 사용하여 동적 콘텐츠, 이벤트 리스너 및 조건부 렌더링으로 작업하는 방법을 보여줍니다.

특징

  • 인터랙티브 디자인: 사용자는 친구를 추가하거나 제거하여 프로필 카드와 상호 작용할 수 있습니다.
  • 반응형 레이아웃: 카드는 다양한 기기와 화면 크기에서 잘 보이도록 디자인되었습니다.
  • 동적 콘텐츠: 프로필 카드는 사용자 상호 작용에 따라 콘텐츠를 동적으로 업데이트합니다.

사용된 기술

  • HTML: 프로필 카드의 구조를 제공합니다.
  • CSS: 시각적으로 매력적이고 반응성이 뛰어나도록 카드 스타일을 지정합니다.
  • JavaScript: 카드 상태 업데이트, 콘텐츠 다시 렌더링 등의 대화형 기능을 처리합니다.

프로젝트 구조

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

Profile-Card/
├── index.html
├── style.css
└── script.js
  • index.html: 프로필 카드의 HTML 구조가 포함되어 있습니다.
  • style.css: 깔끔하고 현대적인 디자인을 위한 CSS 스타일을 포함합니다.
  • script.js: 사용자 상호 작용 및 상태 업데이트와 같은 카드의 동적 측면을 관리합니다.

설치

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

  1. 저장소 복제:

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

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

    cd Profile-Card

  3. 프로젝트 실행:

    • 웹 브라우저에서 index.html 파일을 열어 프로필 카드를 확인하세요.

용법

  1. 웹사이트를 엽니다 웹 브라우저에서
  2. 프로필 카드 보기 사용자 정보를 표시합니다.
  3. 카드와 상호작용 "친구 추가" 또는 "친구 제거" 버튼을 클릭하여 사용자 상태를 업데이트하세요.

코드 설명

HTML

index.html 파일은 머리글, 기본 콘텐츠 영역, 바닥글을 포함한 프로필 카드의 구조를 정의합니다. 다음은 스니펫입니다.

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Profile Card6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    924ff17625d603f964501dd897c96cc6
      4a249f0d628e2318394fd9b75b4636b1Profile Card473f0a7621bec819994bb5020d29372a
    16b28748ea4df4d9c2150843fecfba68
    243a8f3f087936dc3f96e2f0cf018c2216b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

style.css 파일은 프로필 카드의 스타일을 지정하여 시각적으로 매력적이고 반응성이 뛰어납니다. 다음은 몇 가지 주요 스타일입니다.

body {
  width: 100%;
  height: 100%;
}

.header {
  font-family: sans-serif;
  margin: 50px;
  text-align: center;
}

#main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  height: 65vh;
}

#card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
  width: 200px;
  height: 300px;
  background-color: #ffffff;
}

#card #img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 10px;
  overflow: hidden;
}

#card button {
  padding: 12px 22px;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.footer {
  margin: 50px;
  text-align: center;
}

자바스크립트

script.js 파일에는 프로필 카드를 동적으로 생성하고 사용자 상호 작용을 처리하기 위한 로직이 포함되어 있습니다. 다음은 일부 내용입니다.

var arr = [
  {
    name: "Alexander",
    img: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    status: "Stranger",
  },
  {
    name: "Alex",
    img: "https://images.unsplash.com/photo-1549780101-0c96c7eafbd9?q=80&w=1886&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
    status: "Stranger",
  },
];

function print() {
  var clutter = "";
  arr.forEach(function (val, index) {
    clutter += `2e0f9246e0efb13426a82c7a66cb8ecf
      da8f770b4b20bddacfe2892cf09d4dc4
        450cc9548020fb25015b4152370eff19
      16b28748ea4df4d9c2150843fecfba68
      684271ed9684bde649abda8831d4d355${val.name}39528cedfa926ea0c01e69ef5b2ea9b0
      c709bbc0c4dc83e77d44381701e7cbb2${val.status}46eb22d0a433f22cff9940d34d5612bf
      e388a4556c0f65e1904146cc1a846beeLorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia consequatur nobis natus. Provident?94b3e26ee717c64999d7867364b1b4a3
      a6f426b398845cafcd9b34afd8ec64a6
        ${val.status === "Stranger" ? "Add Friend" : "Remove Friend"}
      65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68`;
  });
  document.querySelector("#main").innerHTML = clutter;
}
print();

document.querySelector("#main").addEventListener("click", function (details) {
  arr[details.target.id].status = "Friends";
  print();
});

라이브 데모

여기에서 프로필 카드 프로젝트의 라이브 데모를 확인하실 수 있습니다.

결론

프로필 카드 프로젝트는 HTML, CSS, JavaScript 등 필수 프론트엔드 기술을 연습할 수 있어 즐거운 경험이었습니다. 이 프로젝트를 통해 여러분이 자신만의 대화형 구성 요소를 만들고 계속해서 개발 기술을 연마할 수 있기를 바랍니다. 즐거운 코딩하세요!

크레딧

이 프로젝트는 대화형 및 재사용 가능한 웹 구성 요소를 만드는 데 중점을 두고 프런트 엔드 개발에 대한 지속적인 학습 여정의 일환으로 개발되었습니다.

작가

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

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

JavaScript css html for while Directory continue using Conditional Event JS this github
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：for-of 루프다음 기사：for-of 루프

관련 기사

더보기