<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>카드 레이아웃</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="commons.css">
<!-- <link rel="stylesheet" type="text/css" href="test.css"> -->
<style>
.row {
margin: 5px 0px;
}
.title {
font-size: 20px;
}
.card {
/* border: 1px solid #2d3436; */
box-shadow: 0 0 0 1px #2d3436;
}
</style>
</head>
<body>
<div class="container w-400">
<div class="row">
<h1>카드 레이아웃</h1>
</div>
<div class="row">
<div class="flex-container card">
<div class="w-25 flex-container align-center">
</div>
<div class="w-75">
<div class="row left title">가게이름 - 당산점</div>
<div class="row left">
<i class="fa-solid fa-star yellow"></i>
<span class="yellow">4.9</span>
<span class="gray">|</span>
<span class="black">리뷰 152</span>
<span class="gray">|</span>
<span class="black">사장님댓글 23</span>
</div>
<div class="row left">
<span class="red">요기서결제</span>
<span class="gray">|</span>
<span class="gray">17,000원 이상 배달</span>
</div>
<div class="row flex-container auto-width">
<div class="left flex-container">
<span class="red me-10">3,800원 할인</span>
</div>
<div class="right">
<span class="gray me-10">50~60분</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| 다단 배치 (0) | 2023.11.29 |
|---|---|
| 플랙스 레이아웃(Flex layout) (0) | 2023.11.28 |
| 이미지 디자인 (0) | 2023.11.24 |
| 홈페이지 레이아웃 (0) | 2023.11.23 |
| 홈페이지 레이아웃(+사이드바) (2) | 2023.11.22 |