부트스트랩-버튼을 쓰려고 소스를 그대로 따와서 입력했는데 왜 적용이 되지 않을까요? | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

부트스트랩-버튼을 쓰려고 소스를 그대로 따와서 입력했는데 왜 적용이 되지 않을까요?

undefined주차

김*주

댓글

3

・

추천

0

・

조회수

4

조회수

4

답변 완료

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

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

로그인페이지를 혼자 새롭게 만들어 보려고 시도 중인데 부트스트랩에서 가져온 버튼이 홈페이지로 적용이 안되서 당황스럽네요. 어느 부분이 잘못된 걸까요?

혹시나 싶어 다른 위치로 옮겨서 입력해봐도 적용 안되는 건 똑같네요;

그리고 캡쳐화면에 ID와 PW박스를 보시면 삐뚤빼뚤해서 예쁘지 않은데 똑같이 정렬하는 쉬운 방법 없을까요?

스파르타 즉문즉답

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
    <link href="https://fonts.googleapis.com/css2?family=Gugi&family=Jua&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Gugi', cursive;
        }
        .mytitle {
            width: 300px;
            height: 200px;

            color: white;

            text-align: center;

            background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA1MDJfNSAg%2FMDAxNjUxNDg0NDE3Mzk4.595mv0m_tXQMOnMB1vwtzx-kusvn6AQAakT5oMNaPi8g.7zVGciF8FxOjN6PPnhCFK_JxeB9LH_SpFbT1aumJiTYg.JPEG.wmfrjdnsqkdg%2FIMG_9817.jpg&type=sc960_832");
            background-size: cover;
            background-position: center;

            border-radius: 20px;

            padding-top: 50px;
        }

        .wrap {
            width: 300px;
            margin: auto;
        }
        .mybtn {
            margin-top: 10px;
            margin-left: 50px;
        }
        .idfw {
            margin-top: 10px;
            margin-left: 40px;
        }

    </style>

</head>
<body>
<div class="wrap">
    <div class="mytitle">
        <h1>로그인페이지</h1>
        <h5>ID, PW를 입력해주세요.</h5>
    </div>
    <div>
        <div class="idfw">
            <form>
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">I   D :</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                    <div id="emailHelp" class="form-text"></div>
                </div>
                <div class="mb-3">
                    <label for="exampleInputPassword1" class="form-label">PW :</label>
                    <input type="password" class="form-control" id="exampleInputPassword1">
                </div>
            </form>
        </div>
    </div>
    <div class="mybtn">
        <button type="button" class="btn btn-dark">로그인하기</button>
        <button type="button" class="btn btn-dark">회원가입하기</button>
    </div>
</div>
</body>
</html>

공유

댓글 0

댓글 알림