토이프로젝트 중인데 버튼 위치 이동때문에 질문드립니다.

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

토이프로젝트 중인데 버튼 위치 이동때문에 질문드립니다.

undefined주차

김*완

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

로그인과 회원가입 버튼을 맨 위 상단의 오른쪽으로 위치시키고 싶은데요

이동이 되지 않아서 질문 남깁니다.

수업과 무관한 질문인데... 구글링을 해도 되지 않아서 질문남깁니다 ㅠㅠㅠ

해당 로그인과 회원가입이라는 버튼을 빨간색으로 표시한 우측의 맨 위에 상단으로 옮기려고 하는데요 ㅠㅠ

옮겨지지가 않습니다. 제발 ㅠㅠㅠ 도와주세요

작성한 코드 및 에러 메세지

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>CGV</title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mytitle > button {
            width: 260px;
            height: 50px;

            background-color: dimgrey;
            color: whitesmoke;

            border-radius: 50px;
            border: 1px solid dimgrey;

            margin-top: 55px;
        }

        .mytitle > button:hover {
            border: 3px solid black;
        }
        .mycomment{
            color: grey;
        }
        .wrap {
            max-width: 1200px;
            width: 95%;
            margin: 20px auto 0px auto ;

        }
        .mypost{
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;
            display: none;
        }
        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }
        .mybtn > button {
            margin-right: 10px;
        }
         a {
            color: black;
            text-decoration-line: none;
        }

        a:visited {
            color: black;
        }

        a:hover {
            color: black;
        }

        a:active {
            color: black;
        }

        .menu {
            font-size: 50px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .menu > li {
            display: inline;
            width: 450px;
        }

        @media (max-width: 600px) {
            .menu {
                font-size: 35px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
            }

            .menu > li {
                margin-top: 20px;
            }

        }
        .mytitle >mybutton {
            float: right;
            text-decoration-line: none;
            color: black;
            padding-left: 30px;


        }

    </style>
    <script>
        $.ajax({
            type: "GET",
            url: "여기에URL을입력",
            data: {},
            success: function (response) {
                console.log(response)
            }
        })








        function open_box(){
            $('#post-box').show()
        }
        function close_box(){
            $('#post-box').hide()
        }

    </script>
</head>

<body>
    <div class="mytitle">

        <div class="mybutton" onclick="">
            <a class="id_part" href="#">로그인</a>
            <a class="id_part" href="#">회원가입</a>
        </div>

        <ul class="menu">
            <a href="">
                <img src="https://img.cgv.co.kr/R2014/images/common/logo/logoRed.png">
            </a>
            <li><a href="">무비 차트</a></li>
            <li><a href="">상영예정작</a></li>
            <li><a href="">코멘트 남기기</a></li>
        </ul>
    <hr style="width:100%;height:3px;border:none;background-color:grey;">

        <button onclick="open_box()">감상평 남기기</button>
    </div>
    <div class="mypost" id="post-box">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="url" placeholder="name@example.com">
            <label for="floatingInput">닉네임</label>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
            <label for="floatingTextarea2">댓글</label>
        </div>
        <div class="mybtn">
            <button type="button" class="btn btn-dark">입력하기</button>
            <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>

        </div>

    </div>
    <div class="wrap">
        <div class="row row-cols-1 row-cols-md-5 g-4">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">닉네임</h5>
                        <p class="mycomment">여기에 코멘트가 들어갑니다</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>

댓글 알림