HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fundamental CSS comprehension</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="card">
<header>
<h2>Chris Mills</h2>
</header>
<article>
<img src="images/chris.jpg"
alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat">
<p>50 My Street<br>
The Town<br>
Gray Peach<br>
UK<br>
ZO50 1MU<br>
<strong>Tel</strong>: 01234 567 890<br>
<strong>Mail</strong>: chris@nothere.com
</p>
</article>
<footer>
<p>Editing, writing, and web development services</p>
</footer>
</section>
</body>
</html>
CSS
/* General page styles */
body {
margin: 0;
}
html {
font-family: 'Helvetica neue', Arial, 'sans serif';
font-size: 10px;
background-color: #ccc;
}
/* Style for card container */
.card {
width: 35em;
height: 22em;
margin: 5em auto;
background-color: red;
border: 0.2em solid black;
border-radius: 1.5em;
}
.card h2,
.card p {
margin: 0;
}
/* Style for header and footer */
.card header {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
border-radius: 1.5em 1.5em 0 0;
}
.card footer {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
border-radius: 0 0 1.5em 1.5em;
}
.card header,
.card footer {
height: 3em;
padding: 1em;
}
.card header h2 {
font-size: 2em;
line-height: 1.5;
}
.card footer p {
font-size: 1.5em;
line-height: 2;
}
/* Style for main contents */
.card article {
height: 12em;
background-color: rgba(0, 0, 0, .5);
}
.card article img{
max-height: 100%;
float: right;
}
.card article p {
line-height: 1.3;
padding: 1em;
color: white;
}도움 받은 곳
https://discourse.mozilla.org/t/fundamental-css-comprehension/101395
깨달은 것
line-height 속성이 em 단위로 제공된 값은 예기치 않은 결과를 생성할 수 있으므로 단위 없는 값으로 나태내기.
'CSS > MDN 평가' 카테고리의 다른 글
| Fundamental layout comprehension (0) | 2022.11.18 |
|---|---|
| Typesetting a community school homepage (0) | 2022.11.13 |
| A cool-looking box (0) | 2022.11.10 |
| Creating fancy letterheaded paper (0) | 2022.11.09 |