* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
VS Code 실습 중에 궁금한 부분이 있습니다!
box2 3번째 카드가 글자 수와 상관없이 1,2번째 카드와 동일한 사이즈를 유지하되, 텍스트 레이아웃은(높이) 1,2번째 카드와 동일하게 유지하려면 코드를 어떻게 수정해야 하나요?
작성한 코드 및 에러 메세지
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="07_styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body>
<div class="container">
<div class="header">
<img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/chatgpt300%25/week5/image.png"
alt="Logo" class="logo" />
<div class="icons">
<span class="material-symbols-outlined"> Person_Pin_Circle </span>
<span class="material-symbols-outlined"> Notifications </span>
</div>
</div>
<div class="main">
<div class="box box1">
<h2 class="title">투자</h2>
<p class="small-text">증권 계좌 연결하고</p>
<h3 class="bold-text">포트폴리오 모아보기</h3>
</div>
<div class="box box2">
<div class="card">
<p class="small-text">안전하게</p>
<h3 class="bold-text">신용점수 보기</h3>
</div>
<div class="card">
<p class="small-text">최대 14만원</p>
<h3 class="bold-text">카드 혜택 받기</h3>
</div>
<div class="card">
<p class="small-text">최근</p>
<h3 class="bold-text">공동구매</h3>
</div>
</div>
<div class="box box3">
<div class="button-group">
<button class="gray-button">화면 설정</button>
<button class="gray-button">자산 추가</button>
</div>
</div>
<div class="privacy-policy">개인정보처리방침 보기</div>
</div>
<div class="footer">
<span class="material-symbols-outlined"> home </span>
<span class="material-symbols-outlined"> diamond </span>
<span class="material-symbols-outlined"> wallet </span>
<span class="material-symbols-outlined"> stacked_line_chart</span>
<span class="material-symbols-outlined"> menu </span>
</div>
</div>
</body>
</html>
<style>
.container {
width: 390px;
margin: 0 auto;
background-color: #f5f5f5;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.logo {
width: 100px;
height: 50px;
}
.icons {
display: flex;
justify-content: space-between;
width: 60px;
}
.main {
padding: 20px;
}
.box {
height: 100px;
margin-bottom: 20px;
background-color: #fff;
}
.box1 {
padding: 20px;
background-color: #fff;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.title {
margin: 0;
}
.small-text {
font-size: 12px;
margin: 5px 0;
}
.bold-text {
font-weight: bold;
font-size: 17px;
margin: 5px 0;
}
.box2 {
height: 100px;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
}
.card {
background-color: #fff;
padding: 20px;
border-radius: 10px;
width: 100px;
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 20px;
}
.card:last-child {
margin-right: 0;
}
.small-text {
font-size: 12px;
margin: 5px 0;
}
.bold-text {
font-weight: bold;
margin: 5px 0;
}
.box3 {
background-color: transparent;
height: fit-content;
display: flex;
flex-direction: column;
justify-content: center;
}
.button-group {
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
}
.gray-button {
background-color: #ccc;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin: 0 10px;
cursor: pointer;
}
.privacy-policy {
font-size: 12px;
margin-top: 20px;
text-align: center;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.footer-icon {
flex: 1;
display: flex;
justify-content: center;
}
.footer-icon img {
width: 30px;
height: 30px;
}
</style>
</head>
