커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
폰트 적용문제
undefined주차
북마크
이*진
댓글
1
추천
0
조회수
18
조회수
18
답변 완료

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

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


폰트를 복붙하고나선 저기 중간이 흰색으로 떠요ㅜㅜ 그리고 폰트 적용이 안돼요



스파르타 즉문즉답




작성한 코드 및 에러 메세지

<!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=Black+And+White+Picture&family=Dongle:wght@300;400&display=swap');

    </style>

    *{

        font-family: 'Black And White Picture', sans-serif;

        font-family: 'Dongle', sans-serif;

   

    }

    .title {

    color: white;

    background-color: rgb(223, 162, 193);

    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>오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!




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