JavaScript를 사용하여 프로필 카드 전환

22270 단어
안녕하세요 여러분! 이 블로그에서는 JavaScript를 사용하여 Profile Card Info Toggler를 만드는 방법을 설명하겠습니다. 이것은 HTML과 CSS를 포함한 단계별 가이드가 될 것입니다. 시작합시다 🚀.

Coding Torque에서 놀라운 웹 개발 프로젝트 받기

HTML 부분을 다루겠습니다.



우리는 웹사이트의 뼈대를 만들기 위해 HTML을 사용합니다. HTML은 마크업 언어입니다.

이제 HTML<head> 태그에서 멋진 글꼴 CDN을 가져오겠습니다. fontawesome은 웹사이트의 아이콘에 사용되는 라이브러리입니다.

<!-- Font Awesome Icons  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />


이제 Google Fonts API를 사용하여 글꼴을 가져오겠습니다. 아래는 Poppins 글꼴에 대한 코드입니다. <head> 태그에 아래 코드를 붙여넣습니다.

<!-- Google Fonts  -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">


이제 프로필 카드를 디자인해 보겠습니다. 우리는 계층적으로 갈 것입니다. 먼저 'profile_card' 클래스로 <div>를 선언합니다. 이름에서 알 수 있듯이 프로필과 세부 정보가 포함되어 있습니다. 그런 다음 프로필 이미지를 포함하는 <img>를 선언합니다. 그런 다음 <button> 태그를 클릭하여 프로필 세부 정보를 전환합니다.
다음으로 프로필 정보를 포함하는 profile_card 내부에 클래스 이름 'info'가 있는 <div> 태그를 선언합니다. 정렬되지 않은 소셜 미디어 아이콘 목록, 이름에 대한 <h4> 태그 및 직업에 대한 <p> 태그가 있습니다.

<div class="profile_card">
    <img src="../imgs/profile-pic.jpg" alt="profile">
    <button id="toggleBtn" class="toggleBtn"><i class="fas fa-arrow-up"></i></button>
    <div class="info" id="info">
        <ul class="social-icons">
            <li>
                <a href="#"><i class="fab fa-instagram"></i></a>
            </li>
            <li>
                <a href="#"><i class="fab fa-twitter"></i></a>
            </li>
            <li>
                <a href="#"><i class="fab fa-github"></i></a>
            </li>
        </ul>
        <h4 class="name">Piyush Patil</h4>
        <p class="profession">Web Developer</p>
    </div>
</div>


다음은 최종 HTML 코드입니다.




<!doctype html">
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Toggle Profile Card info - @code.scientist</title>
</head>

<body>
    <div class="profile_card">
        <img src="../imgs/profile-pic.jpg" alt="profile">
        <button id="toggleBtn" class="toggleBtn"><i class="fas fa-arrow-up"></i></button>
        <div class="info" id="info">
            <ul class="social-icons">
                <li>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </li>
                <li>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                </li>
                <li>
                    <a href="#"><i class="fab fa-github"></i></a>
                </li>
            </ul>
            <h4 class="name">Piyush Patil</h4>
            <p class="profession">Web Developer</p>
        </div>
    </div>
</body>

</html>


지금까지 출력





CSS 부분을 이해하자



아래 CSS 코드에서. 특정 클래스의 모든 스타일을 설명하겠습니다.
  • 클래스가 'profile_card'인 div의 경우 높이 및 너비 속성을 설정하고 테두리 반경 속성을 포함하여 곡선 가장자리를 갖습니다.
  • 다음으로 이미지의 너비를 profile_card 너비의 100%로 설정합니다.
  • 다음으로 절대 속성, 상단 및 하단 0, 너비가 카드에 대한 100%인 '정보' div가 있습니다.
  • 다음으로 호버 효과가 있는 소셜 미디어 아이콘이 있습니다.
  • 다음은 절대 위치가 있는 원형 토글 버튼입니다. border-radius:50%를 사용하여 원형을 만듭니다.

    • * {
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #111827;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 1 */
.profile_card {
    height: 20rem;
    width: 15rem;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

/* 2 */
.profile_card img {
    width: 100%;
}

/* 3 */
.info {
    background: white;
    color: black;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 30px;
    transition: 0.5s ease;
}

/* 4 */
.social-icons {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    position: absolute;
    top: -50px;
    left: 0;
}

.social-icons li {
    margin: 0 10px;
}

.social-icons li a {
    background: white;
    color: black;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 5px;
}

/* 5 */
.toggleBtn {
    position: absolute;
    right: 5px;
    bottom: 7px;
    z-index: 1;
    background: black;
    color: white;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 50%;
    cursor: pointer;
}

/* 6 */
.name {
    margin: 0;
    padding: 0 10px;
}

.profession {
    margin: 0;
    padding: 0 10px;
    font-size: 12px;
}


    지금까지 출력





    마지막으로 JavaScript 부분



    아래 자바스크립트 코드에서
  • 우리는 toggleBtn 및 info인 2개의 변수를 선언했습니다. 그런 다음 document.getElementById() 기능을 사용하여 토글 버튼과 정보 div를 가져옵니다.
  • 다음으로 정보가 토글되었는지 여부에 관계없이 토글 상태를 부울 형식으로 유지하는 토글 변수를 선언했습니다.
  • 다음으로 토글 버튼에 클릭 이벤트 리스너를 할당했습니다. 여기에서 우리는 토글 상태가 참이면 info div가 열린다는 것을 의미하므로 info div에 스타일을 적용하고 toggleBtn의 화살표를 변경하고 마지막 변경 토글 상태에서 false로 전환하여 닫아야 하는 조건문이 있습니다. .

    • // 1
let toggleBtn = document.getElementById("toggleBtn");
let info = document.getElementById("info");

// 2
let toggle = false;

// 3
toggleBtn.addEventListener("click", () => {
    if (toggle) {
        info.style = `transform: translateY(8rem);`;
        toggleBtn.innerHTML = `<i class="fas fa-arrow-up"></i>`
        toggle = false;
    } else {
        info.style = `transform: translateY(0rem);`;
        toggleBtn.innerHTML = `<i class="fas fa-arrow-down"></i>`
        toggle = true;
    }
})
    Rust desde cero(파트 1)
    Colab - 실시간 코드 협업 도구를 소개합니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage