커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
버킷리스트 리스트들이 2줄로 안돼요
undefined주차
북마크
황*은
댓글
7
추천
0
조회수
13
조회수
13
답변 완료

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

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


버킷리스트들을 2개씩 착착착 정리하는 부분을

똑같이 따라했는데 저는 가로로 1줄로만 표시가 되고 있어요


똑같이 입력했는데 잘 못 입력한게 있을까요??


확인부탁드립니다



스파르타 즉문즉답


스파르타 즉문즉답스파르타 즉문즉답




<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>2023년 버킷리스트</title>

    <style>

        @import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@400;500;600;700&display=swap');

        * {

            font-family: 'Hahmlet', serif;

        }

        .title {

            color: white;

            background-color: tomato;

            font-size: 24px;

            padding: 4px 14px;

            border-radius: 8px;

        }


        .bg {

            width: 360px;

            background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bg-grid.png");

        }


        .msg {

            font-weight: bold;

        }


        .bucket {

            width: 160px;

            height: 160px;

        }


        .img1 {

            background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bucket-red.png");

            background-size: cover;

            background-position: center;

        }


        .img2 {

            background-image: url("https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/bucket-lightred.png");

            background-size: cover;

            background-position: center;

        }

    </style>

    <link rel="stylesheet" type="text/css" href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/bucketList/sparta-bucket2.css">

</head>


<body class="bg center">

    <h1 class="title">2023 신년계획</h1>

    <p class="msg">올해는 열심히 살아보자!</p>

    <div class="row flex-row wrap">

        <div class="bucket img1 center">다이어트</div>

        <div class="bucket img2 center">다이어트</div>

        <div class="bucket img2 center">다이어트</div>

        <div class="bucket img1 center">다이어트</div>

        <div class="bucket img1 center">다이어트</div>

        <div class="bucket img2 center">다이어트</div>

    </div>


</body>


</html>



취소
 공유
취소
댓글 0
댓글 알림
나의얼굴