https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
Fundamental CSS comprehension - Learn web development | MDN
You've covered a lot in this module, so it must feel good to have reached the end! The final step before you move on is to attempt the assessment for the module — this involves a number of related exercises that must be completed in order to create the f
developer.mozilla.org
폴더 목록
index.html
<head> 태그 안에 <link rel="stylesheet" href="styles.css" />만 추가했다.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Fundamental CSS comprehension</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<section class="card">
<header>
<h2>Chris Mills</h2>
</header>
<article>
<img
src="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>
styles.css
/* General styles - put these straight into your stylesheet */
* {
box-sizing: border-box; /* 계산하기 쉽게 박스 모델 변경(대체 박스) */
}
body {
margin: 0;
}
html {
font-family: "Helvetica neue", Arial, "sans serif";
font-size: 10px;
background-color: #ccc;
}
/* Rulesets to be matched up with selectors */
.card {
width: 35em;
height: 22em;
margin: 5em auto;
background-color: red;
border: 0.2em solid black;
border-radius: 1.5em;
}
.card header {
height: 5em; /* 50px */
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 {
height: 5em; /* 50px */
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 article img {
max-height: 100%;
float: right;
}
/* 추가로 작성 */
h2,
p {
margin: 0px;
height: 30px;
padding: 15px;
}
.card article {
height: 12em; /* 120px를 em으로 */
background-color: rgba(0, 0, 0, 0.5);
color: rgb(255, 226, 226);
}
h2 {
font-size: 2em; /* 20px */
}
.card footer p {
font-size: 1.5em; /* 15px */
}
가끔씩 css가 적용이 안될 수도 있다. 그럴 때는 그저 새로고침 여러번 하거나 나갔다 들어가면 된다.
결과
내가 임의로 꾸민 게 아니라 이렇게 하라고 했다. 진짜다.
꼭 나랑 같은 코드일 필요는 없고 결과물만 비슷하게 나오면 된다.
오류 있으면 댓글로 남겨주세요. 감사합니다!
728x90
'Computer > HTML, CSS, Javascript' 카테고리의 다른 글
| [CSS] 과제: 멋지게 보이는 박스 (0) | 2024.10.21 |
|---|---|
| [CSS] 과제: 멋진 편지지 양식 만들기 (2) | 2024.10.19 |
| [CSS] 과제: 값과 단위 (4) | 2024.10.18 |
| [CSS]과제: 계단식 상속 (2) | 2024.10.17 |
| [CSS]과제: 선택자 (3) | 2024.10.16 |
