🎯 Achievement Goals
- Semantics
- Styling Links
- Avatar
- Spreadsheet
- Articles
Semantics
문제
정답
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Semantics</title>
</head>
<body>
<main>
<h1>Lorem Ipsum</h1>
<figure class="image">
<img src="https://goo.gl/zF9eky" alt="Lorem Ipsum">
<figcaption class="caption">Lorem Ipsum</figcaption>
</figure>
<details class="lorem-ipsum">
<summary class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur vitae hendrerit mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris lacinia scelerisque nibh nec gravida.
Duis malesuada nec nibh sit amet pulvinar.
Phasellus congue porttitor arcu, ut suscipit nibh aliquam vel.
Nunc arcu lectus, egestas ut sem ac, euismod porttitor eros.
Phasellus tincidunt consequat pharetra. Maecenas sodales purus at nulla finibus dapibus.
Nullam varius at nisl vel euismod. Fusce aliquet ligula non tempor fermentum.
Nam fermentum posuere mauris, quis aliquam nibh dictum sed.</p>
</details>
</main>
</body>
</html>
풀이
body태그 안에 있는 div태그들을 시맨틱 태그로 바꾸는 문제였다. 이 문제를 통해서 div를 쓰지 않고 SEO에 더 가깝게 구현하는 방법을 배울 수 있었다. 특히 사진을 넣는 태그에 figure를 넣는 방법은 구글링을 통해 해결했는데 시맨틱 태그를 더 배울 수 있는 계기가 되었던 것 같다.
Styling Links
문제
정답
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Styling links</title>
<style type="text/css">
/* Write your CSS solution here (do not edit the surrounding HTML) */
a {
cursor: help;
text-decoration: none;
text-transform: uppercase;
color: lavender;
}
a:before {
content: ">";
}
a:after {
content: "<";
}
</style>
</head>
<body>
<a href="http://www.testdome.com">Check documentation</a>
</body>
</html>
풀이
이 문제는 풀다가 before, after 부분이 생각나지 않아서 구글링을 통해 해결했다. a 태그에 마우스를 올렸을 때 문제에 나와있는 그림처럼 변하게 만들어주는 문제였다.
Avatar
문제
정답
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Avatar</title>
<style>
/* Write your CSS solution here (do not edit the surrounding HTML) */
img {
border-radius: 100%;
width: 150px;
height: 150px;
border: 2px solid gray;
}
</style>
</head>
<body>
<img class="avatar" src="https://goo.gl/khGCrk" alt="avatar" />
</body>
</html>
풀이
이 문제는 문제에서 하라는대로 구현만 하면 쉽게 풀 수 있는 문제였다. css의 border 속성만 잘 이해하면 풀 수 있다.
Spreadsheet
문제
정답
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spreadsheet</title>
<style>
td {
text-align: right;
width: 33%;
}
td, th, table {
border: 1px solid;
border-collapse: collapse;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<caption>Purchase Orders</caption>
<thead>
<tr>
<th>Order Date</th>
<th>SKU</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>07-16-2018</td>
<td>523402</td>
<td>54</td>
</tr>
</tbody>
</table>
</body>
</html>
풀이
테이블 태그를 활용해서 테이블을 구현하는 문제였다. 예전에 테이블을 활용해서 표를 만들어 본 기억이 있어서 쉽게 풀 수 있었다.
Articles
문제
정답
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Articles</title>
<style>
body {
margin: 0px;
heighth: 100%;
}
/* Write your CSS solution here (do not edit the surrounding HTML) */
article {
min-height: 50%;
width: 50%;
float: left;
}
article:nth-child(1) {
background-color: red;
}
article:nth-child(2) {
background-color: yellow;
}
article:nth-child(3) {
background-color: blue;
}
article:nth-child(4) {
background-color: green;
}
</style>
</head>
<body>
<article>First</article>
<article>Second</article>
<article>Third</article>
<article>Fourth</article>
</body>
</html>
풀이
article 태그를 css 기능들을 활용해서 문제에 나와있는 이미지처럼 구현하면 되는 문제였다. 이 문제는 잘 풀리지 않아서 구글링을 했는데 문제는 float 속성을 사용해주지 않아서 문제였었다. 잘 쓰지 않는 태그였는데.. 이번에 float에 대해서 이해하는 계기가 되었다.. ㅠㅠ
테스트 사이트