프로필 카드 생성

기본 틀 작성

<div id="main">
        <div class="profile-card">
            <div class="profile-picture"><img src="img/lemon.png" alt="프로필 사진"></div>
            <table>
                <tr>
                    <th>이름</th>
                    <td>둘리</td>
                </tr>
                <tr>
                    <th>나이</th>
                    <td>999999세</td>
                </tr>
                <tr>
                    <th>직업</th>
                    <td>백엔드 엔지니어</td>
                </tr>
                <tr>
                    <th>위치</th>
                    <td>서울, 대한민국</td>
                </tr>
                <tr>
                    <th>이메일</th>
                    <td>example@example.com</td>
                </tr>
            </table>
            <div id="pronav">
                <a href="profile.html" class="on"></a>
                <a href="profile2.html"></a>
                <a href="profile3.html"></a>
                <a href="profile4.html"></a>
            </div>
        </div>
    </div>

 

거기에 맞는 CSS 

* {
    margin: 0px;
    padding: 0px;
}

#main {
    width: 100%;
    height: 1000px;
    display: flex;
    justify-content: center;
}

.profile-card {
    margin-top: 100px;
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    text-align: center;
}

.profile-picture {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 10px;
    background-color: #ccc;
}

.profile-picture img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 10px;
}

#pronav {
    width: 100%;
    text-align: center;
    margin-top: 40px;
}

#pronav a {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin:  0px 10px;
    opacity: 0.4;
    filter: saturate(0.7);
}
#pronav a.on {
    opacity: 1;
    filter: saturate(1);
}


#pronav a:nth-of-type(1) {
    background-color:#35e9f7;
    box-shadow:  5px 5px 10px black;
}

#pronav a:nth-of-type(2) {
    background-color: #55f5cd;
    box-shadow:  5px 5px 10px black;
}

#pronav a:nth-of-type(3) {
    background-color: #ff80df;
    box-shadow:  5px 5px 10px black;
}

#pronav a:nth-of-type(4) {
    background-color: #a794fd;
    box-shadow:  5px 5px 10px black;    
}

 

이런식으로 프로필 카드 생성