https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_tasks
Test your skills: Values and units - Learn web development | MDN
The aim of this skill test is to assess whether you understand different types of values and units used in CSS properties.
developer.mozilla.org
Task 1
color-download.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Values and Units Task 1: color values</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 1em;
padding: 0.5em;
}
.hex {
background-color: #86defa;
}
/* 변경한 부분*/
.rgb {
background-color: rgb(134, 222, 250);
}
/* 변경한 부분*/
.hsl {
background-color: hsl(194, 92%, 75%);
}
/* 변경한 부분*/
.transparency {
background-color: rgb(134, 222, 250, 0.6);
}
</style>
</head>
<body>
<ul>
<li class="hex">hex color</li>
<li class="rgb">RGB color</li>
<li class="hsl">HSL color</li>
<li class="transparency">Alpha value 0.6</li>
</ul>
</body>
</html>
결과
Task 2
length-download.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Values and Units Task 1: length values</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
/* 변경한 부분 */
h1 {
font-size: 50px;
}
/* 변경한 부분 */
h2 {
font-size: 2em;
}
/* 변경한 부분 */
p {
font-size: 16px;
}
/* 변경한 부분 */
h1 + p {
font-size: 120%;
}
</style>
</head>
<body>
<h1>Level 1 heading</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh
onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<h2>Level 2 heading</h2>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</body>
</html>
결과
Task 3
(star.png가 없어서 사이트 내엥서 변경했습니다.)
.box {
background-image: url(star.png);
background-repeat: no-repeat;
background-position: center 10px; /* 변경한 부분*/
}
결과
오류 있으면 댓글 남겨주세요! 감사합니다!
728x90
'Computer > HTML, CSS, Javascript' 카테고리의 다른 글
| [CSS] 과제: 멋진 편지지 양식 만들기 (2) | 2024.10.19 |
|---|---|
| [CSS] 과제: 기초적인 CSS 이해 (0) | 2024.10.18 |
| [CSS]과제: 계단식 상속 (2) | 2024.10.17 |
| [CSS]과제: 선택자 (3) | 2024.10.16 |
| [CSS]과제: 새로운 지식을 사용하기 (8) | 2024.10.15 |
