* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
1주차 실습 내용을 모두 따라해보고 복습하면서 다른 구글 폰트를 적용해보는데, 폰트가 적용 되지 않습니다. 어떤 문제일까요?
강의 내용 바탕으로 오늘 복습하며 만든 결과물입니다.
<style> 밑에 구글 폰트를 적용했는데 되지 않네요
https://fonts.google.com/noto/specimen/Noto+Sans+KR
위 폰트를 적용해봤습니다
작성한 코드 및 에러 메세지
OCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>추억앨범</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
* {
font-family: 'Gothic A1', sans-serif;
font-family: 'Gowun Dodum', sans-serif;
font-family: 'Noto Sans KR', sans-serif;
font-family: 'Noto Serif KR', serif;
font-family: 'Quicksand', sans-serif;
}
.album {
padding: 70px;
text-align: center;
color: white;
background-image: url(https://www.kdu.ac.kr/home/images/contents/subject_img10.gif);
background-position: center;
background-size: cover;
}
.album>button {
margin-top: 10px;
padding: 15px;
border-radius: 10px;
color: white;
background-color: transparent;
border-color: white;
border-style: solid;
}
.textbox {
width: 500px;
margin: 15px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 5px 0px blue;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.form-control {
margin: 5px;
}
.col {
padding: 5px;
}
.cards2 {
width: 1200px;
margin: 15px auto 0px auto;
}
}
</style>
</head>
<body>
<div class="album">
<h1>나만의 추억앨범</h1>
<button>추억 저장하기</button>
</div>
<div class="textbox">
<input type="text" class="form-control" placeholder="앨범 이미지" aria-label="Last name">
<input type="text" class="form-control" placeholder="앨범 제목" aria-label="Last name">
<input type="text" class="form-control" placeholder="앨범 내용" aria-label="Last name">
<input type="text" class="form-control" placeholder="앨범 날짜" aria-label="Last name">
<div class="btn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="cards2">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://t1.daumcdn.net/cfile/tistory/99823B355BD24C622A" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://t1.daumcdn.net/cfile/tistory/99823B355BD24C622A" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://t1.daumcdn.net/cfile/tistory/99823B355BD24C622A" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://t1.daumcdn.net/cfile/tistory/99823B355BD24C622A" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
