728x90
TIL
📌
오늘 한 일
아침 도커 퀴즈
기* 튜터님 유튜 프론트부분 강의 다 듣기
html 모션 컴포넌트화
오늘은 아침에 도커 퀴즈를 풀었다.
처음에 이미지 다운까지는 됐는데 이미지로 컨테이너를 만드는 것을 해야 하는데
계속 오류가 났다. 구글링도 해보고 다 적용해봤지만 오류가 났음
근데 튜터님이 해설해주실 때 이미지로 컨테이너 만드는 코드를 보여주셨는데
그걸 내꺼에 바로 작성하니깐 잘됐다. ㅎㅎㅎ
그것만 안되고 다른 건 술술 풀어서 제출했다.
아침 퀴즈 하고 아침부터 기* 튜터님 유튜브 강의를 하나하나 찾아가며 프론트부분을 시청했다.
보면서 전에 했던 프로젝트 코드랑 비교하면서 궁금한 건 여쭤보고 이렇게 진행했던 거 같다.
강의를 다 듣고 나니깐 뭘 해야 하지 생각이 들었다. 유튜브 알고리즘에 html css 모션 이런 동영상이 있어서
바로 클릭~ 강의를 보면서 와.. 어건 컴포넌트화 해서 나중에 써야겠다. 느껴서 바로 진행 중!!
다음 주에 프로젝트인데 그때 만든 것들을 사용해보고 싶다. 오늘 틸은 여기까지!!
오늘 만든 모션❗❗
<!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>Document</title>
<style>
.gallerylist{
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
ul {
font-size:0;
}
ul > li {
display: inline-block;
vertical-align: top;
width:33.3%;
}
ul > li > a {
display:block;
width:auto;
text-decoration:none;
margin:5px;
}
ul > li > a .screen{
position:relative;
overflow:hidden;
}
ul > li > a .screen .top {
position:absolute;
bottom: 150%;
left: 30px;
z-index: 2;
color: #fff;
font-size: 26px;
font-weight: 900;
transition:all .35s;
}
ul > li > a .screen .bottom {
position:absolute;
top:150%;
left:30px;
z-index:2;
color:#fff;
font-size:12px;
transition:all .35s;
}
ul > li > a .screen .img {
width: 100%;
object-fit:contain;
}
ul > li > a h3 {
font-size:14px;
text-align:center;
padding:20px;
color:#666;
}
ul > li > a:hover .top {
bottom: 52%;
}
ul > li > a:hover .bottom {
top: 52%;
}
ul > li > a .screen::after{
content:'';
display: block;
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
z-index: 1;
opacity:0;
transition:all .35s;
}
ul > li > a:hover .screen::after{
opacity: 1;
}
</style>
</head>
<body>
<div class="gallerylist">
<ul>
<li>
<a href="">
<div class="screen">
<div class="top">루피야~</div>
<div class="bottom">마으스 호버효과</div>
<img src="https://item.kakaocdn.net/do/9328560fede308048fc3b30d5da82e1d7154249a3890514a43687a85e6b6cc82">
</div>
<div>
<h3>이미지 위에 오브젝트가 나타느는 효과</h3>
</div>
</a>
</li>
<li>
<a href="">
<div class="screen">
<div class="top">루피야~</div>
<div class="bottom">마으스 호버효과</div>
<img src="https://item.kakaocdn.net/do/9328560fede308048fc3b30d5da82e1d7154249a3890514a43687a85e6b6cc82">
</div>
<div>
<h3>이미지 위에 오브젝트가 나타느는 효과</h3>
</div>
</a>
</li>
<li>
<a href="">
<div class="screen">
<div class="top">루피야~</div>
<div class="bottom">마으스 호버효과</div>
<img src="https://item.kakaocdn.net/do/9328560fede308048fc3b30d5da82e1d7154249a3890514a43687a85e6b6cc82">
</div>
<div>
<h3>이미지 위에 오브젝트가 나타느는 효과</h3>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
시연 영상
728x90
'내일배움캠프' 카테고리의 다른 글
| 70. 내일배움캠프 - 12주차 WIL (1) | 2022.11.20 |
|---|---|
| 69. 내일배움캠프 - 55일차 TIL (0) | 2022.11.20 |
| 67. 내일배움캠프 - 53일차 TIL (0) | 2022.11.17 |
| 66. 내일배움캠프 - 52일차 TIL (0) | 2022.11.15 |
| 65. 내일배움캠프 - 51일차 TIL (0) | 2022.11.14 |
댓글