배너/커버 이미지 처리

먼저 이미지 위치와 크기를 html파일에서 잡아본다.
scroll-down하지 않아도, 첫 페이지에 필요한 게 다 한눈에 보였으면 한다.
글자는 이미지 편집 시 직접 삽입해도 되지만 웹에 올렸을 때는 또 상상과 다를 경우 대비해,
소스파일에서 작성하고 맞추는 게 편하겠더라~

<div class="coverImg">
	<div style="width: 800px; margin: 30px 100px 0; font-size: 40px; text-align: left;">
	<mark style="background-color: #96a9fe; color: white;">키링</mark>
	</div>
	
	<div style="width: 100%; margin: -25px 100px; color: white; font-size: 40px; text-align: left;">
	얼마나 있어도
	<span style="color: #96a9fe;">모자라죠</span>..?!
	</div>
</div>

이미지 파일을 플젝 폴더에 넣고, url은 css파일에 붙이면 된다.
이미지 자체의 크기에 상관없이, 노출될 부분은 정해진 div의 크기에 맞게 나오도록(cover) 한다.
가독성 위해 이미지와 글자 사이에 반투명 레이어가 필요한데, 왼쪽에서 오른쪽 방향으로 투명도 점점 줄이고, 단순히 수평/수직 방향으로 가면 심심하니까 각도를 왼쪽(55deg)으로 살짝 기울였다.

.coverImg {
	display: flex; flex-wrap: wrap; justify-content: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	width: 860px; height: 140px; border-radius: 7px; margin-bottom: 20px; padding: 20px; 
	background: linear-gradient(55deg, 
	#3e3e3eF2 0%, 
	#3e3e3eD9 50%, 
	#3e3e3eB3 100%), 
	url('/img/img2/coverImg.jpg') center center / cover no-repeat;	
}

이미지 원본 용량이 큰 편이라 여기 통해 크기를 조절했다.

투명도에 경우, rgb코드 쓰면 0.2, 0.5, 0.8 등으로 설정할 수 있고,
본인이 hex코드 쓰는 편이라 투명도는 16진수의 알파값으로 설정한다.

검색해보니 아래처럼 기호되어 있다:

FF = 100%
F2 = 95%
E6 = 90%
D9 = 85%
CC = 80%
BF = 75%
B3 = 70%
A6 = 65%
99 = 60%
8C = 55%
80 = 50%
73 = 45%
66 = 40%
59 = 35%
4D = 30%
40 = 25%
33 = 20%
26 = 15%
1A = 10%
0D = 5%
00 = 0%