<img
src="https://wac-cdn.atlassian.com/dam/jcr:bc1f15f9-3b2e-4c30-9313-0ebd6175f18c/File%20Cabinet@2x.png?cdnVersion=676"
alt=""
/>
<h1>Free unlimited private repositories</h1>
<p> Free for small teams under 5 and priced to scale with Standard ($3/user/mo) or Premium ($6/user/mo) plans. </p>
FeatureBox.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Feature Box</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<feature-box>
<img
src="https://wac-cdn.atlassian.com/dam/jcr:bc1f15f9-3b2e-4c30-9313-0ebd6175f18c/File%20Cabinet@2x.png?cdnVersion=676"
alt=""
/>
<h1>Free unlimited private repositories</h1>
<p> Free for small teams under 5 and priced to scale with Standard ($3/user/mo) or Premium ($6/user/mo) plans. </p>
</body>
</feature-box>
</html>
styles.css
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,700&display=swap');
* {
margin: 0;
box-sizing: border-box;
}
html {
font-family: 'Nunito Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #1f2d3d;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
margin: 0 auto;
background-color: #f8f9fc;
}
body::after {
content: 'frenchkebab©';
display: block;
margin-top: 50px;
color: #1f2d3d;
font-size: 12px;
font-weight: 600;
}
/* Common styles */
.feature-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: 420px;
padding: 40px 32px;
border-radius: 6px;
background-color: #fff;
text-align: center;
}
.feature-box h1 {
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.33333333;
color: #253858;
}
.feature-box p {
font-size: 1rem;
color: #091e42;
}
.feature-box img {
display: block;
width: auto;
height: 140px;
margin-bottom: 1rem;
}
/* For feature box without image */
.feature-box.no-image {
padding-top: 196px;
background-image: url('https://wac-cdn.atlassian.com/dam/jcr:bc1f15f9-3b2e-4c30-9313-0ebd6175f18c/File%20Cabinet@2x.png?cdnVersion=676');
background-repeat: no-repeat;
background-position: center 40px;
background-size: auto 140px;
}
그냥
alt=""
로 값을 비워둔다. (단alt
속성 자체는 작성해야 함)
<div class="feature-box no-image">
<!-- <img
src="https://wac-cdn.atlassian.com/dam/jcr:bc1f15f9-3b2e-4c30-9313-0ebd6175f18c/File%20Cabinet@2x.png?cdnVersion=676"
alt=""
/> -->
<h1>Free unlimited private repositories</h1>
<p>
Free for small teams under 5 and priced to scale with Standard ($3/user/mo) or Premium ($6/user/mo) plans.
</p>
</div>
<img>
태그가 직접적으로 전달하는 정보가 없다고 판단할 경우에는 그냥 css를 활용하여도 된다!