Task 1
<!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>Task 1</title>
<style>
h1 {
color: blue;
}
h2 {
background-color: blue;
color: white;
}
span {
font-size: 200%;
}
</style>
</head>
<body>
<div class="container">
<h1>This is a heading</h1>
<p>Veggies es <span>bonus vobis</span>
, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
tomatillo melon azuki bean garlic.</p>
<h2>A 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>
</div>
</body>
</html>
Task 2
<!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>Task 2</title>
<style>
#special {
background-color: yellow;
}
.alert {
border: 1px solid gray;
}
.alert.stop {
background-color: red;
}
.alert.go {
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>This is a heading</h1>
<p>Veggies es
<span class="alert">bonus vobis</span>
, proinde vos postulo
<span class="alert stop">essum magis</span>
kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<h2 id="special">A level 2 heading</h2>
<p>
Gumbo beet greens corn soko endive gumbo gourd.
</p>
<h2>Another level 2 heading</h2>
<p>
<span class="alert go">Parsley shallot</span>
courgette tatsoi pea sprouts fava bean collard greens dandelion
okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</div>
</body>
</html>
Task 3
<!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>Task 3</title>
<style>
a:link {
color: orange;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}
.container > :first-child {
font-size: 150%;
}
.container > :first-child::first-line {
color: red;
}
tr:nth-child(even) {
background-color: #333;
color: white;
}
</style>
</head>
<body>
<div class="container">
<p>Veggies es
<a href="http://example.com">bonus vobis</a>
, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<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>
<table>
<tbody>
<tr>
<th>Fruits</th>
<th>Vegetables</th>
</tr>
<tr>
<td>Apple</td>
<td>Potato</td>
</tr>
<tr>
<td>Orange</td>
<td>Carrot</td>
</tr>
<tr>
<td>Tomato</td>
<td>Parsnip</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Onion</td>
</tr>
<tr>
<td>Banana</td>
<td>Beet</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Task 4
<!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>Task 4</title>
<style>
h2 + p {
color: red;
}
ul.list > li {
list-style-type: none;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<h2>This is a heading</h2>
<p>
This paragraph comes after the heading.
</p>
<p>
This is the second paragraph.
</p>
<h2>Another heading</h2>
<p>
This paragraph comes after the heading.
</p>
<ul class="list">
<li>One</li>
<li>Two
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
<li>Three</li>
</ul>
</div>
</body>
</html>
Task 5
<!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>Task 5</title>
<style>
a {
border: 5px solid grey;
}
a[title] {
border-color: pink;
}
a[href*="contact"] {
border-color: orange;
}
a[href^="https"] {
border-color: green;
}
</style>
</head>
<body>
<ul>
<li>
<a href="https://example.com">Link 1</a>
</li>
<li>
<a href="http://example.com" title="Visit example.com">Link 2</a>
</li>
<li>
<a href="/contact">Link 3</a>
</li>
<li>
<a href="../contact/index.html">Link 4</a>
</li>
</ul>
</body>
</html>
도움 받은 곳
https://discourse.mozilla.org/t/assessment-wanted-for-test-your-skills-selectors-tasks-1-5/101702
깨달은 것
1.
.container > :first-child {
font-size: 150%;
}
.container > :first-child::first-line {
color: red;
}Task 3을 처음에 이렇게 작성하였는데
.container p:first-child {
font-size: 150%;
}
.container p:first-child::first-line {
color: red;
}이 방법으로 작성하는게 가독성이 더 좋아보인다.
2. 클래스는 여러번 쓰이기 때문에 클래스명 앞에 요소를 써줘야 특정성이 더 명확해진다.
'CSS > MDN 문제 풀이' 카테고리의 다른 글
| Test your skills: Writing modes and logical properties (0) | 2022.11.07 |
|---|---|
| Test your skills: Backgrounds and borders (0) | 2022.11.07 |
| Test your skills: The box model (0) | 2022.11.06 |
| Test your skills: The Cascade (0) | 2022.11.04 |
| Styling a biography page (0) | 2022.10.25 |