Almon Dev

모의해킹 공부 정리 2일차 (과제) 본문

모의해킹/웹 개발

모의해킹 공부 정리 2일차 (과제)

Almon 2024. 10. 18. 02:57

어제 완성하지 못했던 login_successful.php를 완성했습니다.

login_successful.php

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Almond</title>
    <link rel="stylesheet" href="/css/login_successful.css">
</head>
<body>
    <container class="profile-container">
        <div class="profile">
            <img src="/imgs/almond-profile.jpg" class="profile_img">
            <div class="profile_info">
                <h2 class="profile_name">Almond Dev</h2>
                <p class="profile_subs">구독자 <strong>0명</strong></p>
            </div>
        </div>
        
        <div class="profile_link">
            <a href="#" class="link_tab"><p>글쓰기</p></a>
            <a href="#" class="link_tab"><p>마이페이지</p></a>
            <a href="#" class="link_tab"><p>로그아웃</p></a>
        </div>
    </container>
</body>
</html>

html 코드는 profile-container 안에 프로필과 링크(기능)들을 나눴습니다.

프로필은 이미지와 닉네임, 구독자 수

링크는 글쓰기, 마이페이지, 로그아웃으로 구성했습니다.

login_successful.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

html {
    height: 100%;
}

body {
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-color: #f5e1c8;
}

.profile-container {
    padding: 2rem;
    width: 500px;
    height: 550px;

    text-align: center;

    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    background-color: #efdecd;
}

.profile {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.profile_img {
    margin-right: 1rem;

    width: 130px;
    
    border: 2px solid #d2b48c;
    border-radius: 50%;
}

.profile_info {
    text-align: left;

    color: #6e4e37; 
}

.profile_name {
    font-size: 1.5rem;
}

.profile_subs {
    padding-top: 0.3rem;
}

.profile_link {
    margin-top: 2rem;

    height: 48px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    border: 1px solid #d2b48c;
    border-radius: 8px;

}

.profile_link .link_tab {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.3;
    color: #6e4e37;

    text-decoration: none;

    flex-basis: 33.33%;
    flex-grow: 1;
    text-align: center;

    transition: text-decoration 0.7s ease;
    transition: color 0.7s ease;
}

.profile_link .link_tab:hover {
    text-decoration: underline;
    text-decoration-color: #deb887;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;

    color: #deb887;
}

.profile_link .link_tab+.link_tab {
    position: relative;
}

.profile_link .link_tab+.link_tab::before {
    width: 1px;
    height: 20px;
    content: "";


    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);

    background-color: #d2b48c;
}

 

로그인 페이지와 테마를 맞추기 위해 같은 색상들을 활용하면서, 티스토리의 로그인 후 나오는

프로필을 참고해서 만들었습니다.

 

티스토리 프로필

 

'모의해킹 > 웹 개발' 카테고리의 다른 글

모의해킹 공부 정리 3일차 (회원가입 페이지)  (0) 2024.10.19
모의해킹 공부 정리 2일차 (과제)  (2) 2024.10.18
모의해킹 공부 정리 1일차(과제)  (2) 2024.10.17
모의해킹 공부 정리 1일차 ( 웹서버 )  (0) 2024.10.17
모의해킹 공부 1일차 정리 (APM 설치)  (0) 2024.10.17
'모의해킹/웹 개발' Related Articles more