2023.12.01
지난번에 background 글을 썼었는데 이를 활용하여 반투명한 배경이미지 위로 또렷한 글자를 넣어보자!
marquee 태그를 이용하여 안에 또렷한 글자가 지나가도록 할 예정이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex02.html</title>
<style>
div.back {
background-image: url('danbi.jpg'),
url('짱구.png'),
url('짱아.png');
/* 3개 이미지를 배경에 넣기 */
background-position: top, center, bottom;
/* 이미지 3개의 각 위치는 위,가운데,아래 */
background-repeat: repeat-x;
/* x축으로 반복되도록 설정 */
background-size: 100px auto;
/* 모든 배경이미지는 너비 100px로 고정 */
width: 95%;
/* div.back요소의 너비는 화면 전체의 95%로 설정 */
}
div.text {
background-color: rgba(255, 255, 255, 0.5);
/* 배경이미지 위에 투명도0.5의 하얀색을 덮음 */
font-size: 24px;
font-weight: bold;
padding: 10px;
opacity: 1;
/* 글씨의 투명도는 1 = 투명도없음 */
border: 1px solid coral;
}
</style>
</head>
<body>
<h1>투명한 배경에 또렷한 글자</h1>
<hr>
<div class="back">
<div class="text">
<marquee direction="up" scrollamount="10">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus error tempora qui ullam dolorum nesciunt eius enim necessitatibus animi doloremque aperiam adipisci, perferendis praesentium? Asperiores hic qui nulla fuga sunt.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus error tempora qui ullam dolorum nesciunt eius enim necessitatibus animi doloremque aperiam adipisci, perferendis praesentium? Asperiores hic qui nulla fuga sunt.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus error tempora qui ullam dolorum nesciunt eius enim necessitatibus animi doloremque aperiam adipisci, perferendis praesentium? Asperiores hic qui nulla fuga sunt.</p>
</marquee>
</div>
</div>
</body>
</html>
위 사진에서 아래의 글씨가 위쪽으로 올라간다
이렇게 배경은 색이 옅게 투명도처리를 하였고 그 위에 또렷한 글씨가 나타났다!
🔥 한줄평
주제는 배경에 글씨 넣기였지만 이와 별개로 marquee태그가 너무 신기했다.
언젠가 한 번 활용해보고싶다.
기초부터 시작하는 감쟈 ※ 소개글 확인해주세요!! ※