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>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
.box {
border: 5px solid #000;
width: 400px;
height: 200px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="box">
<img src="images/balloons.jpg" alt="balloons">
</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>
body {
background-color: #fff;
color: #333;
font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
.myform {
border: 2px solid #000;
padding: 5px;
}
.myform input[type] {
font-size: inherit;
padding: 10px;
}
.myform input[type="submit"] {
background-color: rebeccapurple;
color: white;
border: 0;
border-radius: 5px;
}
</style>
</head>
<body>
<form method="post" action="" class="myform">
<div>
<label for="fldSearch">Keywords</label>
<input type="search" id="fldSearch" name="keywords">
<input type="submit" name="btnSubmit" value="Search">
</div>
</form>
</body>
</html>도움 받은 곳
https://github.com/mdn/css-examples/blob/main/learn/tasks/images/marking.md
https://discourse.mozilla.org/t/need-help-with-task-1-of-images-and-form-elements-skill-test/62981
https://discourse.mozilla.org/t/assessment-wanted-for-images-and-form-elements-skill-test-1/62977
깨달은 것
Task 1:
object-fit 속성은 컨테이너 내부의 이미지에 대한 설정을 하는 것이므로 이미지가 컨테이너 내부에 들어가게 설정해야 한다.
찾아볼 것
https://discourse.mozilla.org/t/need-help-with-task-1-of-images-and-form-elements-skill-test/62981
-> 이해하기
'CSS > MDN 문제 풀이' 카테고리의 다른 글
| Test your skills: Flexbox (0) | 2022.11.14 |
|---|---|
| Test your skills: Tables (0) | 2022.11.09 |
| Test your skills: Sizing (0) | 2022.11.08 |
| Test your skills: Values and units (0) | 2022.11.08 |
| Test your skills: Overflow (0) | 2022.11.07 |