728x90
반응형
html 생성
linear-gradient(각도, 색상코드) - 직선 그라디언트
색상 코드 두가지로 사용하면 한 가지 명령어가 안 먹을 시에 둘 중 하나가 들어올 수 있도록 한다.
전에는 브라우저마다 속성이 다르기 때문에 배경색과 그라디언트색상을 두가지 사용했지만 지금은 거의 브라우저가 통일된상태이다.
_가운데 정렬 3총사
flex: 자식들을 옆으로 보내주는 것이 특징
alian-items: center; - 세로 가운데 정렬, 높이값이 있어야 적용이 됨
justfy-content: center; - 가로 가운데 정렬
border-radius: __px 는 이미지위에 피규어가 있기 때문에 이미지에 명령을 줘야함
figcaption이 움직이려면 부모(figure)가 기준점(relative)이 되어야함
figure영역에 overflow: hidden; 을 줘야 figcaption을 숨겨줄 수 있다.
마우스오버시 figcaption이 올라오게 하려면 figure에 :hover 명령어를 넣어주고
속도를 주어 스르르 올라오게 하기 위해 figcaption에 transition: all 00s 초를 넣어주면 된다.
html
<!DOCTYPE html>
<html lang="ko">
<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>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="wrap">
<figure class="ho1">
<img src="./img01.png" alt="거북이이미지">
<figcaption>
<h3>MOUSE HOVER</h3>
<p>마우스오버 효과입니다.(왼쪽)</p>
</figcaption>
</figure>
<figure class="ho2">
<img src="./img02.png" alt="사슴이미지">
<figcaption>
<h3>MOUSE HOVER</h3>
<p>마우스오버 효과입니다.(오른쪽)</p>
</figcaption>
</figure>
</div>
</body>
</html>css
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background-color: #0f2027;
background-color: linear-gradient(120deg, #2c5364, #203a43, #0f2027);
/*linear-gradient(각도,색상코드)- 직선그라디언트*/
}
#wrap{
display: flex;
align-items: center;
/*높이값이 있어야지 적용이 됨*/ /*세로가운데 정렬*/
height: 100vh;
justify-content: center; /*가로 가운데 정렬*/
}
#wrap figure{
margin: 20px;
width: 400px;
cursor: pointer;
position: relative;
overflow: hidden;
}
#wrap figure img{
width: 100%;
display: block;
border-radius: 5px;
/*figure위에 이미지에 radius를 줘야 적용이 됨*/
}
#wrap figure figcaption{
background-color: white;
opacity: 0;
padding: 15px;
position: absolute;
left: 0;
bottom: -150px;
width: 100%;
font-weight: bold;
transition: all 0.5s;
}
#wrap figure:hover figcaption{
bottom: 0;
/*figure에 마우스를 올려놨을 때 figcaption이 움직인다.*/
opacity: 0.3;
}
#wrap figure figcaption h3{}
#wrap figure figcaption p{}728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 19_ 연꽃축제 예제_banner, contents 넣기 (0) | 2023.06.08 |
|---|---|
| 비주얼 스튜디오 코드18_ 연꽃축제 예제_header 사이드 (0) | 2023.06.08 |
| 비주얼 스튜디오 코드 16_ header 사이드에 넣기 (0) | 2023.06.07 |
| 비주얼 스튜디오 코드⑮ 트렌스폼을 이용해서 효과주기_2 (0) | 2023.06.07 |
| 비주얼 스튜디오 코드⑭ 피그마이용해서 이미지크기 조절 ㅣ 콘텐츠 모양을 자유롭게 변형하기_2 (0) | 2023.06.05 |