* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
질문1
구글에서 폰트 링크? 자료를 가지고 왔는데 상단은 굵은 글씨가 되는데
버킷리스트안의 글자 굵기가 적용되지 않습니다. ㅠㅠㅠ
질문2
버킷리스트 완료도장 이미지 설정에서
버킷리스트 부분에 "done"을 입력하고 저장했는데
전체 화면에 완료 이미지가 뜹니다. 어떤 부분이 잘 못된것 일까요?
질문3
캡처본에서 처럼 버킷리스트 간의 간격을 조금 넓힐 수 있나요? 좁아보여서요 ㅠㅠ
작성한 코드 및 에러 메세지
<!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;
}
.butket {
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="butket img1 center done">1년에 책 100권 읽기</div>
<div class="butket img2 center">1년에 책 100권 읽기</div>
<div class="butket img2 center">1년에 책 100권 읽기</div>
<div class="butket img1 center">1년에 책 100권 읽기</div>
<div class="butket img1 center">1년에 책 100권 읽기</div>
<div class="butket img2 center">1년에 책 100권 읽기</div>
</div>
</body>
</html>
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
