https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/Styling_a_biography_page
새로운 지식을 사용하기 - Web 개발 학습하기 | MDN
지난 몇 단원에서 배운 내용을 통해 CSS 를 사용하여 간단한 텍스트 문서의 서식을 지정하여 자신만의 스타일을 추가 할 수 있다는 것을 알게 될 것입니다. 이 평가는 그 기회를 제공합니다.
developer.mozilla.org
biog-download.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Formatting a biography</title>
<style>
body {
background-color: #fff;
color: #333;
font-family: Arial, Helvetica, sans-serif;
padding: 1em;
margin: 0;
}
h1 {
color: hotpink;
font-size: 2em;
font-family: Georgia, "Times New Roman", Times, serif;
border-bottom: 10px dotted purple;
}
h2 {
font-size: 1.5em;
font-style: italic;
}
.job-title {
color: #999999;
font-weight: bold;
}
a:link,
a:visited {
color: #fb6542;
}
a:hover {
text-decoration: none;
}
ul {
background-color: #eeeeee;
border: 5px solid violet;
padding: 30px;
}
a:hover {
color: green;
}
</style>
</head>
<body>
<h1>Jane Doe</h1>
<div class="job-title">Web Developer</div>
<p>
Far far away, behind the word mountains, far from the countries Vokalia
and Consonantia, there live the blind texts. Separated they live in
Bookmarksgrove right at the coast of the Semantics, a large language
ocean.
</p>
<p>
A small river named Duden flows by their place and supplies it with the
necessary regelialia. It is a paradisematic country, in which roasted
parts of sentences fly into your mouth.
</p>
<h2>Contact information</h2>
<ul>
<li>
Email:
<a href="mailto:jane@example.com">jane@example.com</a>
</li>
<li>
Web:
<a href="https://example.com">https://example.com</a>
</li>
<li>Tel: 123 45678</li>
</ul>
</body>
</html>
결과
이 과제는 정답이 없어요 참고해주세요. 감사합니다!
728x90
'Computer > HTML, CSS, Javascript' 카테고리의 다른 글
| [CSS]과제: 계단식 상속 (2) | 2024.10.17 |
|---|---|
| [CSS]과제: 선택자 (3) | 2024.10.16 |
| [HTML] 과제: 행성 데이터 구조화 (2) | 2024.10.15 |
| [HTML]과제: 반응형 이미지 (6) | 2024.10.15 |
| [HTML] 과제_Multimedia and embedding (2) | 2024.10.14 |
