커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
토스앱 클론코딩 중 궁금한 것이 있습니다.
undefined주차
이*희
댓글
2
・
추천
0
・
조회수
6
조회수
6
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
1주차 토스앱 클론코딩을 다 한 상태에서 UI가 조금 맘에 안들어서 조금씩 수정을 하려 하는데, 각 박스에 들어있는 콘텐츠들이 justify-content와 align-content를 사용해서 정렬했음에도 불구하고 조금씩 모양이 안맞는 부분이 있어 이 부분이 수정이 가능한지 묻고 싶습니다.
구글 아이콘이 들어간 부분이 문제인듯 싶은데, 어떻게 수정해야 될지 모르겠습니다.
작성한 코드 및 에러 메세지
index.html
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="08_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://spartacodingclub.kr/_next/image?url=%2Fv5%2Ficons%2Flogo-inactive.png&w=1080&q=100"
alt="Logo" class="logo" />
<div class="icons">
<span class="material-symbols-outlined"> location_on </span>
<span class="material-symbols-outlined">
notifications
</span>
</div>
</div>
<div class="main">
<div class="box box1">
<h2 class="title">투자</h2>
<div class="flex_area">
<div id="main_icon">
<span class="material-symbols-outlined" style="font-size: 50px; color: blue;">
incomplete_circle
</span>
</div>
<div class="column_area">
<p class="small-text">증권 계좌 연결하고</p>
<h3 class="bold-text">포트폴리오 모아보기</h3>
</div>
</div>
</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">
<span class="material-symbols-outlined" style="color: grey;">
settings
</span>
화면 설정</button>
<button class="gray-button">
<span class="material-symbols-outlined" style="color: grey;">
add
</span>
자산 추가</button>
</div>
</div>
<div class="privacy-policy">개인정보처리방침 보기</div>
</div>
<div class="footer">
<div class="footer-icon">
<span class="material-symbols-outlined">
home
</span>
<h3 class="small-text">홈</h3>
</div>
<div class="footer-icon">
<span class="material-symbols-outlined">
ecg_heart
</span>
<h3 class="small-text">혜택</h3>
</div>
<div class="footer-icon">
<span class="material-symbols-outlined">
wallet
</span>
<h3 class="small-text">토스페이</h3>
</div>
<div class="footer-icon">
<span class="material-symbols-outlined">
insights
</span>
<h3 class="small-text">주식</h3>
</div>
<div class="footer-icon">
<span class="material-symbols-outlined">
legend_toggle
</span>
<h3 class="small-text">전체</h3>
</div>
</div>
</div>
</body>
</html>
styles.css
.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;
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 700,
'GRAD' 200,
'opsz' 48
}
.box {
height: 100px;
margin-bottom: 20px;
background-color: #fff;
}
.title {
padding-bottom: 10px;
}
#main_icon {
height: 50px;
align-content: center;
background-color: #ccc;
border-radius: 50%;
}
.flex_area {
display: flex;
justify-content: flex-start;
padding-bottom: 30px;
}
.column_area {
display: flex;
flex-direction: column;
padding-left: 30px;
align-content: center;
}
.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;
margin: 5px 0;
}
.box2 {
height: 100px;
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
}
.box2 .bold-text {
font-size: 17px;
}
.card {
background-color: white;
padding: 12px;
border-radius: 10px;
height: 90px;
width: 100px;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-right: 20px;
}
.card:last-child {
margin-right: 0;
}
.box3 {
background-color: transparent;
height: fit-content;
display: flex;
flex-direction: column;
justify-content: center;
align-items: 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 {
margin-top: 20px;
text-align: center;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.footer-icon {
display: flex;
flex-direction: column;
align-content: center;
}
.footer-icon img {
width: 30px;
height: 30px;
}
댓글 알림
