커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
숙제
[왕초보] ChatGPT 300% 활용하기 v0
6주차
신*은
댓글
6
・
추천
0
・
조회수
22
조회수
22
답변 완료
저기 이미지 옆에 검은색 배경이 너무 커서 오른쪽 메인에 있는 글자들이 너무 떨어져 있어서 그런데 저기 이미지 검은색 배경 크기를 이미지랑 똑같은 크기로 만들 수는 없나요?
한마디로 그냥 저기 이미지랑 글자가 붙을 수 있는 방법을 알려주세요!!
작성한 코드 및 에러 메세지
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="detail.css">
<title>무신사 상품 상세 페이지 클론코딩</title>
</head>
<body>
<body>
<header>
<!-- header contents -->
<div class="badge">
<span>한정 판매</span>
</div>
<h1 class="product-title">상품 제목</h1>
</header>
<main>
<div class="main-left">
<!-- main-left contents -->
<img src="https://cdn.pixabay.com/photo/2024/01/20/01/50/ai-generated-8520178_1280.jpg" alt="상품 이미지"
width="500" height="600">
<div class="thumbnails">
<img src="https://cdn.pixabay.com/photo/2024/01/20/01/50/ai-generated-8520178_1280.jpg" alt="썸네일 1"
width="60" height="72">
<img src="https://cdn.pixabay.com/photo/2024/01/20/01/50/ai-generated-8520178_1280.jpg" alt="썸네일 2"
width="60" height="72">
<img src="https://cdn.pixabay.com/photo/2024/01/20/01/50/ai-generated-8520178_1280.jpg" alt="썸네일 3"
width="60" height="72">
<img src="https://cdn.pixabay.com/photo/2024/01/20/01/50/ai-generated-8520178_1280.jpg" alt="썸네일 4"
width="60" height="72">
<img src="https://cdn.pixabay.com/photo/2024/01/20/01/50/ai-generated-8520178_1280.jpg" alt="썸네일 5"
width="60" height="72">
<img src="https://cdn.pixabay.com/photo/2024/01/20/01/50/ai-generated-8520178_1280.jpg" alt="썸네일 6"
width="60" height="72">
<img src="https://cdn.pixabay.com/photo/2024/01/20/01/50/ai-generated-8520178_1280.jpg" alt="썸네일 7"
width="60" height="72">
</div>
</div>
<div class="main-right">
<!-- main-right contents -->
<div class="product-info">
<h2>Product Info</h2>
<div class="info-item">
<span class="info-title">제조사:</span>
<span class="info-content">테스트 제조사</span>
</div>
<div class="info-item">
<span class="info-title">모델명:</span>
<span class="info-content">테스트 모델명</span>
</div>
<!-- Add more info items as needed -->
</div>
<div class="delivery-info">
<h2>Delivery Info</h2>
<div class="info-item">
<span class="info-title">배송비:</span>
<span class="info-content">무료</span>
</div>
<div class="info-item">
<span class="info-title">배송 방법:</span>
<span class="info-content">CJ 대한통운 택배</span>
</div>
<!-- Add more delivery items as needed -->
</div>
<div class="price-info">
<h2>Price Info</h2>
<div class="info-item">
<span class="info-title">판매 가격:</span>
<span class="info-content">1000000원</span>
</div>
<div class="info-item">
<span class="info-title">적립금:</span>
<span class="info-content">10000원</span>
</div>
<!-- Add more price items as needed -->
</div>
<div class="purchase">
<select>
<option value="">옵션 선택</option>
<option value="option1">옵션 1</option>
<option value="option2">옵션 2</option>
<option value="option3">옵션 3</option>
<!-- Add more options as needed -->
</select>
<div class="total-price">
<span>총 금액</span>
<span>1000000원</span>
</div>
<button>구매하기</button>
</div>
</div>
</main>
</body>
</body>
</html>
header {
display: flex;
justify-content: center;
/* 가로 중앙 정렬 */
align-items: center;
padding: 20px;
}
.badge {
height: 26px;
background-color: black;
/* 배지 배경색 */
padding: 0 10px;
border-radius: 5px;
margin-right: 10px;
/* 우측 여백 추가 */
}
.badge span {
font-size: 14px;
font-weight: bold;
color: #ffffff;
/* 배지 텍스트 색상 */
}
.product-title {
font-size: 24px;
font-weight: bold;
}
main {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 50px 0;
/* 가로 중앙 정렬 */
}
.main-left {
width: 400px;
flex: 1;
padding: 20px 10px; /* 상하로는 그대로 두고 좌우로만 간격을 줄임 */
background-color: black; /* 이미지와 같은 크기의 배경색 적용 */
}
.product-image {
width: 500px;
height: 600px;
background-color: black;
/* 이미지와 같은 크기의 배경색 적용 */
margin-bottom: 20px;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumbnails {
display: flex;
}
.thumbnails img {
width: 60px;
height: 72px;
margin-right: 13.3px;
}
.thumbnails img:last-child {
margin-right: 0;
/* 마지막 이미지의 우측 여백 제거 */
}
.main-right {
width: 400px;
padding: 20px;
margin-left: 20px;
/* 적당한 여백 추가 */
margin-right: 20px;
/* 적당한 여백 추가 */
}
.product-info,
.delivery-info,
.price-info,
.purchase {
margin-bottom: 20px;
/* 각 영역 아래에 여백 추가 */
}
.product-info h2,
.delivery-info h2,
.price-info h2 {
font-weight: bold;
}
.info-item {
display: flex;
justify-content: space-between;
margin-top: 5px;
}
.info-title {
font-weight: bold;
}
.select {
margin-bottom: 10px;
}
.total-price {
margin-top: 10px;
display: flex;
justify-content: space-between;
}
.purchase button {
width: 25%;
padding: 10px;
background-color: black;
color: #fff;
border: none;
cursor: pointer;
}
.purchase button:hover {
background-color: #0056b3;
}
댓글 알림
