메뉴바 만들기

sm_leaf25 2025. 5. 12. 00:46

본격적인 개발에 앞서 웹플랫폼의 menubar를 HTML/CSS를 사용하여 미리 디자인해 보았어요.

1. 로그인 전 메뉴바

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
    html, body{
        height: 100%;
        margin: 0;
        padding: 0;
        color: #49433b;
    }

    
    #logo {
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
    
    #homeLogo{
        height: 140px;
        width: auto;
    }
    
    #menubar{
        border: 1px solid  rgb(255, 243, 224);
        background-color: rgb(255, 243, 224);
        height: 65px;
        padding: 0px 5%;
        display: flex;  /* 내부 요소를 가로 방향으로 정렬 */
        justify-content: space-between;  /* 주 축을 따라 항목들의 정렬 방식 지정 ==> 항목 사이에 균등한 공간 배치. */
        align-items: center;  /* 세로방향 중앙 정렬*/
        flex-wrap: wrap;   /* 화면이 좁아지면 요소들이 자동 줄바꿈을 한다. */
        font-size: large;
        box-sizing: border-box;
    }
    .menu {
        display: flex;
        flex-wrap: wrap;
    }
   
    .menu span{
        padding: 0px 10px;
        cursor: pointer;
        border-right: 1px solid #49433b;
    }
    
    #menu1 span{
        padding: 0px 30px;
        cursor: pointer;
        border-right: 1px solid #49433b;
    }

    .menu span:hover{
        font-weight: bold;
        text-shadow: gray;
    }
    
    .menu span:last-child, #menu1 span:last-child {
        border-right: none; /* 마지막 항목은 구분선 제거 */
    }   
   

</style>


</head>
<body>
    <div id="logo">
        <img src="TIMELY.png" id="homeLogo">
    </div>

    <div id="menubar">
        <div class="menu" id="menu1">
            <span>Home</span>
            <span>일정</span>
            <span>다이어리</span>
            <span>커뮤니티</span>
            <span>공지사항</span>
        </div>
    
        <div class="menu">
            <span>로그인</span> 
        </div>
    </div>
</body>
</html>

2. 로그인 후 메뉴바

<body>
    <div id="logo">
        <img src="TIMELY.png" id="homeLogo">
    </div>

    <div id="menubar">
        <div class="menu" id="menu1">
            <span>Home</span>
            <span>일정</span>
            <span>다이어리</span>
            <span>커뮤니티</span>
            <span>공지사항</span>
        </div>
    
        <div class="menu">
            <span>로그아웃</span> 
            <span>마이페이지</span> 
        </div>
    </div>
</body>

저작자표시 비영리 변경금지 (새창열림)