HTML
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<h1>Awesome<br>Company</h1>
<address>
<p>The Awesome Company</p>
<p>102-112 Frail Bend Bridge<br>
The Dwindlings<br>
Little Hornet<br>
HX3 9ZQ<br>
UK</p>
</address>
</article>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
body {
margin: 0;
background: #ccc;
}
article {
width: 210mm;
height: 297mm;
margin: 20px auto;
position: relative;
}
address {
position: absolute;
bottom: 8mm;
right: 20mm;
}
h1 {
position: absolute;
top: 12mm;
left: 20mm;
width: 128px;
height: 128px;
font-size: 20px;
letter-spacing: 1px;
text-align: center;
padding: 44px 0;
color: white;
text-shadow: 1px 1px 1px black;
}
/* Your CSS below here */
article {
background: url(images/top-image.png) no-repeat;
background:
linear-gradient(to bottom,
rgba(0, 0, 0, .2),
rgba(255, 255, 255, 0) 20%,
rgba(255, 255, 255, 0) 80%,
rgba(0, 0, 0, .2)),
url(images/top-image.png) no-repeat,
url(images/bottom-image.png) 0% 100% no-repeat;
background-color: white;
border-top: 1mm solid red;
border-bottom: 1mm solid red;
}
h1 {
background-image: url(images/logo.png) ;
/* filter: drop-shadow(1px 1px 0px rgb(0, 0, 0)); */
border-radius: 100%;
box-shadow: 3px 3px 3px black;
}도움 받은 곳
https://github.com/reyob/Creating-fancy-letterheaded-paper/blob/master/style.css
https://discourse.mozilla.org/t/creating-fancy-letterheaded-paper-assessment/24684
https://mdn.github.io/learning-area/css/styling-boxes/letterheaded-paper-finished/
깨달은 것
1. border-radius
/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;
/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;
/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#see_also
2. 속성을 알 수 없거나 지정된 속성에 대해 값이 유효하지 않은 경우, 선언이 유효하지 않은 것으로 간주되어 브라우저의 CSS 엔진에서 완전히 무시된다. (MDN) 그러므로 상단 이미지를 추가하는 또 다른 배경 선언을 추가한 것이다.
찾아볼 것
border-radius: 64px;과 border-radius: 100%;가 똑같이 작동하는 이유는?
-> % 기준으로 50%가 원을 그리고 px 기준으로 50px이 원을 그린다. 이유는 모르겠다.
'CSS > MDN 평가' 카테고리의 다른 글
| Fundamental layout comprehension (0) | 2022.11.18 |
|---|---|
| Typesetting a community school homepage (0) | 2022.11.13 |
| A cool-looking box (0) | 2022.11.10 |
| Fundamental CSS comprehension (0) | 2022.11.09 |