부트스트랩
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.nav {
height: 70px;
border-bottom: 1px solid black;
display: flex;
align-items: center;
}
.nav-right-items {
display: flex;
margin-left: auto;
}
.nav-item {
margin-left: 20px;
}
.company-name {
margin-left: 60px;
}
.title {
text-align: center;
font-size: 3.5rem;
font-weight: bold;
}
.subtitle {
font-size: 40px;
font-size: 1.25rem;
font-weight: 300;
}
.main {
width: 1000px;
margin: 0 auto;
margin-top: 60px;
}
.prices {
display: flex;
}
.price-item {
width: 300px;
height: 350px;
border: 1px solid black;
margin: 20px;
border-radius: 4px;
text-align: center;
}
.price-item-title {
font-size: 1.5rem;
background-color: rgba(0, 0, 0, .03);
text-align: center;
height: 53px;
line-height: 53px;
border-bottom: 1px solid black;
}
.price-item-price {
font-size: 2.5rem;
font-weight: bold;
padding: 20px;
}
.price-item-button {
padding: .5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .3rem;
color: #007bff;
background-color: transparent;
background-image: none;
border-color: #007bff;
margin-top: 20px;
}
.price-item-button-active {
background-color: #007bff;
color: white;
}
.price-item-month {
font-size: 16px;
color: gray;
}
.price-item-detail {
margin-bottom: 5px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="nav">
<div class="company-name">Danny</div>
<div class="nav-right-items">
<div class="nav-item">메뉴1</div>
<div class="nav-item">메뉴2</div>
<div class="nav-item">메뉴3</div>
<div class="nav-item">메뉴4</div>
</div>
</div>
<div class="main">
<div class="title">
Pricing
</div>
<div class="subtitle">
Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with
default Bootstrap components and utilities with little customization.
</div>
<div class="prices">
<div class="price-item">
<div class="price-item-title">
Free
</div>
<div class="price-item-price">
$0<span class="price-item-month">/mo</span>
</div>
<div class="price-item-detail">
10 users included
</div>
<div class="price-item-detail">
2 GB of storage
</div>
<div class="price-item-detail">
Email support
</div>
<div class="price-item-detail">
Help center access
</div>
<button class="price-item-button">
Click Me
</button>
</div>
<div class="price-item">
<div class="price-item-title">
Free
</div>
<div class="price-item-price">
$0<span class="price-item-month">/mo</span>
</div>
<div class="price-item-detail">
10 users included
</div>
<div class="price-item-detail">
2 GB of storage
</div>
<div class="price-item-detail">
Email support
</div>
<div class="price-item-detail">
Help center access
</div>
<button class="price-item-button price-item-button-active">
Click Me
</button>
</div>
<div class="price-item">
<div class="price-item-title">
Free
</div>
<div class="price-item-price">
$0<span class="price-item-month">/mo</span>
</div>
<div class="price-item-detail">
10 users included
</div>
<div class="price-item-detail">
2 GB of storage
</div>
<div class="price-item-detail">
Email support
</div>
<div class="price-item-detail">
Help center access
</div>
<button class="price-item-button price-item-button-active">
Click Me
</button>
</div>
</div>
</div>
<script src="script.js"></script>
<script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
</body>
</html>
CSS
- height: 70px = 세로 길이
- border-bottom: 1px solid black = 밑줄
- display: flex = 가로 방향으로 배치
- margin-left: auto = 오른쪽으로 외부여백 없애기
- margin-left: 20px = 왼쪽으로 외부여백 20px
- text-align: center = text 정렬 가운데로
- font-size: 3.5rem = text 사이즈
- font-weight: bold = text 굵게
- font-weight: 300 = text 굵기 300
- margin: 60 auto = 상하, 좌우 값이 같을 때
- margin: 10px 5px 25px = 좌우는 같은데 상하가 다를 때 좌우 5px
- padding: 20px = 내부 여백 20px
- line-height: 1.5 = text 줄 간격
- border-radius: .3rem = 테두리의 모서리 굴곡
결과
댓글