https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper
멋진 편지지 양식 만들기 - Web 개발 학습하기 | MDN
좋은 인상을 남기고 싶다면, 멋진 편지지 양식에 편지를 쓰는 것이 좋은 시작이 될 수 있습니다. 이번 평가에서는 좋은 느낌을 줄 수 있는 온라인 템플릿을 만들어 보도록 하겠습니다.
developer.mozilla.org
폴더 구조
이 사이트의 첫번째 과제는 배경 이미지 상단, 하단에 이미지를 넣고 그 위에 그라데이션도 함께 올리라는 과제였다. 이를 풀기 위해서 직접 그려서 풀어 보았다.
먼저 첫 방법은 blend-mode를 활용하는 방법이다. 최신 브라우저에만 나와있기에 차선책도 따로 준비하게 되었다. blend mode를 사용하면 같은 공간에 여러 이미지를 붙여도 중첩되어서 같이 나온다. 즉 배경 이미지 하나, 배경 색상 하나를 선택하면 원래 배경 색상만 나오든가 배경 이미지 하나만 나왔는데에 반해 둘 다 한번에 볼 수 있다는 의미이다.
두번째로는 상단, 하단에 박스를 따로 만들어서 하는 방법이었다. 이를 이용하려고 했으나 div 박스를 만들지 않아도 그저 class만 따로 만들어서 구현하는 게 더 편할 것 같아 방법을 바꾸었다.
태그를 많이 만들수록 dom에서 브라우저에 구현하는 데에 시간이 오래 걸리니 최대한 그 방법을 쓰지 않으려고 노력했다.
index.html
<link rel="stylesheet" href="style.css" />와 class 이름 background, blend-background, logo만 추가했습니다.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Fancy letterheaded paper</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article class="background blend-background">
<h1 class="logo">Awesome<br />Company</h1>
<section></section>
<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>
style.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 */
.background {
background: url(top-image.png) no-repeat top center,
url(bottom-image.png) no-repeat bottom center, rgb(255, 255, 255);
}
.blend-background {
background: rgb(0, 0, 0);
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.1) 0%,
rgba(255, 255, 255, 1) 25%,
rgba(255, 255, 255, 1) 75%,
rgba(0, 0, 0, 0.1) 100%
),
url(top-image.png) no-repeat top center,
url(bottom-image.png) no-repeat bottom center;
background-blend-mode: multiply;
border-top: 1mm solid #de3323;
border-bottom: 1mm solid #de3323;
}
.logo {
background: url(logo.png) no-repeat center / 100%;
}
h1.logo {
/* filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); */
border-radius: 50%;
box-shadow: 2px 2px 2px 2px rgb(0, 0, 0, 0.7);
}
그라데이션은 참고 사이트를 이용해 쉽게 풀었다.
이 사이트에 들어가면 알겠지만 기준점을 두 개를 놓고 하나는 25% 하나는 75%에 위치시킨다.
시작점은 검정색에서 하얀색으로 가고 75%의 기준점인 하얀색 점부터 다시 끝점까지 점점 검게 변하도록 바뀌었다. 물론 좀 더 연하게 보여지기 위하여 투명도도 조절하였다.
CSS Gradient — Generator, Maker, and Background
As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
cssgradient.io
결과
가장 윗부분에 있는 과제를 해결하는 데에 시간이 가장 오래 걸렸다. 가장 쉬운 방법이 어떨 때는 시간이 가장 오래 걸리기도 한다. 개념 다시 복습해야겠다.
그리고 코드와 결과가 길고 복잡해지면서 이 페이지도 길어진다. 서식을 만들어야겠다.
오류 있으면 댓글 달아주세요. 감사합니다!
'Computer > HTML, CSS, Javascript' 카테고리의 다른 글
| [CSS] 과제: 커뮤니티 대학 홈페이지 레이아웃 (0) | 2024.10.21 |
|---|---|
| [CSS] 과제: 멋지게 보이는 박스 (0) | 2024.10.21 |
| [CSS] 과제: 기초적인 CSS 이해 (0) | 2024.10.18 |
| [CSS] 과제: 값과 단위 (4) | 2024.10.18 |
| [CSS]과제: 계단식 상속 (2) | 2024.10.17 |
