* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
h1 과 h2가 있는 영역에 왼쪽 오른쪽에 하나씩 이미지를 넣고싶은데 어떻게 해야하나요?
작성한 코드 및 에러 메세지
오류 발생 시, 작<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>오와지네 고양이들</title>
<link rel="stylesheet"
href="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/easygpt/default.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous">
</script>
<style>
.card:hover {
transform: scale(1.05);
transition: transform 0.2s ease-in-out;
}
@font-face {
font-family: 'RubikBubbles-Regular';
src: url('RubikBubbles-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'RubikBubbles-Regular', cursive;
font-size: 70px;
margin-bottom: 30px;
}
h2 {
font-family: 'RubikBubbles-Regular', cursive;
font-size: 40px;
margin-top: 20px;
}
@font-face {
font-family: 'LOTTERIADDAG';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/LOTTERIADDAG.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
h5{
font-family: 'LOTTERIADDAG', cursive;
font-size: 30px;
}
h6{
font-family: 'LOTTERIADDAG', cursive;
font-size: 20px;
margin-top: 20px;
}
@font-face {
font-family: 'YUniverse-B';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_yuniverse@1.0/YUniverse-B.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
p{
font-family: 'YUniverse-B', cursive;
font-size: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<section class="hero d-flex align-items-center" style="background-color: #d1566f; padding: 100px 0;">
<div class="container">
<div class="row">
<div class="col-md-12 text-center text-white">
<h1 class="text-white">OwaJi + Cats</h1>
<h2 class="text-white">miaw</h2>
</div>
<section class="cards my-5">
<div class="container">
<div class="row">
<!-- 첫 번째 카드 -->
<div class="col-md-4">
<div class="card">
<a href="https://www.instagram.com/lei_na_k/" target="_blank">
<img src="팻보이세이.jpeg" class="card-img-top"
alt="sei image">
</a>
<div class="card-body">
<h5 class="card-title">금강세이</h5>
<h6 class="card-subtitle mb-2 text-muted">소심하지만 여유로운 첫째</h6>
<p class="card-text">큰 소리나 급격한 변화에 동공지진하지만 평소에는 평화롭고 여유롭게 꿈나라 헤엄치기를 좋아하는 세이에요!</p>
</div>
</div>
</div>
<!-- 두 번째 카드 -->
<div class="col-md-4">
<div class="card">
<a href="https://www.instagram.com/lei_na_k/" target="_blank">
<img src="감성에리카.jpeg" class="card-img-top"
alt="erykah image">
</a>
<div class="card-body">
<h5 class="card-title">김강에리카</h5>
<h6 class="card-subtitle mb-2 text-muted">무던하고 똑똑한 둘째</h6>
<p class="card-text">늘 모든 것을 알고 있다는 듯이 사색에 잠기며 혼자만의 시간을 즐기는 에리카에요. 종종 조그만 혀로 귀엽게 메롱을 한답니다! </p>
</div>
</div>
</div>
<!-- 세 번째 카드 -->
<div class="col-md-4">
<div class="card">
<a href="https://www.instagram.com/lei_na_k/" target="_blank">
<img src="근엄무지.jpeg" class="card-img-top"
alt="muji image">
</a>
<div class="card-body">
<h5 class="card-title">감무지</h5>
<h6 class="card-subtitle mb-2 text-muted">욕심많은 귀염둥이 막내</h6>
<p class="card-text">밥도 사랑도 모두 독차지하고싶은 왕 큰 막내 무지에요!</p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
