- 2일차 쇼핑몰 실습-
쇼핑몰 페이지 배너 만들기 실습
위 디자인의 배너에 홈페이지를 처음 접속했을때 글씨가 아래에서 위로 나오는 형식으로 구현해볼 예정이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>banner</title>
<link rel="stylesheet" href="./banner.css">
</head>
<body>
<section class="mainBanner">
<h1 class="text">
프망생 쇼핑몰
</h1>
</section>
</body>
</html>
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
.mainBanner {
width: 100%;
height: 200px;
background-image: url("./img/banner.jpg");
background-size: cover;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.mainBanner .text {
font-size: 40px;
font-weight: 700;
color: orange;
text-shadow: 12px 12px 10px rgba(0, 0, 0, 0.5);
animation: titleText 1s ease-in-out;
}
@keyframes titleText {
0% {
transform: translateY(70px);
opacity: 0;
}
93%{
transform: translateY(-15px);
}
100% {
transform: translateY(0);
opacity: 1;
}
}'프론트엔드 공부 > 쇼핑몰 실습' 카테고리의 다른 글
| 쇼핑몰 실습 3일차 (0) | 2024.09.26 |
|---|---|
| 쇼핑몰 실습 1일차 (1) | 2024.09.21 |