부트스트랩

커뮤니티

포인트

로딩중

쿠폰

내 강의실

국비 신청 내역

수강권

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

부트스트랩

웹개발 종합반

1주차

윤*하

・

추천

・

조회수

답변 완료

부트 스트랩으로 따온걸 적용하면 가로로 적용이 되어야 하는데 세로로 적용이 됩니다

위에 처럼 세로로만 적용이 되어서 어느부분이 문제인지를 모르겠습니다

작성한 코드 및 에러 메세지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>항해 10기 미니 프로젝트</title>
</head>
<link href="https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Serif+KR:wght@200&display=swap"
      rel="stylesheet">

<style>
    * {

        font-family: 'Noto Serif KR', serif;
    }

    .mypost {
        color: white;
        max-width: 100%;
        height: 400px;


        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://now.rememberapp.co.kr/wp-content/uploads/2020/05/%E1%84%82%E1%85%A6%E1%86%BA%E1%84%91%E1%85%B3%E1%86%AF%E1%84%85%E1%85%B5%E1%86%A8%E1%84%89%E1%85%B3.png");
        background-size: cover;
        background-position: center;

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

    }

    .mypost > button {

        width: 200px;
        height: 50px;

        color: white;
        background-color: transparent;
        border-color: white;
        border-radius: 20px;
        border: 1px solid white;

    }

    .mypost > button:hover {
        border: 2px solid white;
    }

    .mybtn {
        width: 100px;
        height: 50px;
        color: black;
        background-color: white;
        border-radius: 10px;

        margin-left: 150%;


    }


</style>
<body>
<div class="mypost">
    <div>
        <button class="mybtn">로그인</button>
        <h1>넷플릭스 인상깊은 작품</h1>
    </div>


    <button>작품 추천하기</button>
</div>
<div>
    <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                        additional content. This content is a little bit longer.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a short card.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                        additional content.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card h-100">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to
                        additional content. This content is a little bit longer.</p>
                </div>
            </div>
        </div>
    </div>


</div>


</body>
</html>

댓글 알림