Frontend/HTML&CSS
[CSS] hover 애니메이션 구현, z-index & position
- -
hover 애니메이션 구현
🚩 목표: 이미지 크기를 살리면서 container에 hover시 흰색 border가 보이도록 한다.
<div class="container">
<div class="overlay"></div>
<div class="text">
<h3>Title</h3>
<p>ipsem lorem</p>
</div>
</div>.overlay {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
transition: all 1s;
position: absolute;
}
.overlay:hover {
border: 12px solid white;
}
우여곡절 끝에 완성! 이미지가 줄어들지 않으면서 hover시 흰색 border가 생기는 애니메이션을 구현했다.
그런데 나는 검정 border로 표시한 .text 영역에 hover를 해도 애니메이션이 동작하게 만들고 싶어졌다.
.overlay {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
transition: all 1s;
position: absolute;
z-index: 1;
/* overlay 최상단 */
}
.overlay에 z-index 속성을 부여해 .overlay를 최상단으로 배치하자 container의 어디를 hover 해도 애니메이션이 동작한다.
but... 검정 배경 또한 위로 올라와서 이제 텍스트가 잘 보이지 않는다. 그럼 어떻게 해야 할까?
.overlay {
width: 100%;
height: 100%;
transition: all 1s;
position: absolute;
z-index: 1;
}
.overlay:hover {
border: 12px solid white;
}
.text {
width: 100%;
height: 100%;
padding: 16px;
position: absolute;
color: white;
background: rgba(0, 0, 0, 0.5);
}
검정 background를 .text 박스로 옮긴다. 끝!!!!!!!!!
그러면 .overlay는 투명한 박스에서 hover시 흰 테두리만 생기는 거니까
이미지 크기에도 영향을 주지 않고, 검정 배경을 덮은 텍스트 박스 위에서
제대로 동작하는 것이다.
사실 이미 코드를 완성하기는 했으나
이 상태였기 때문에 처음부터 혼자 제대로 해본 것이었다.
그리고 z-index를 써서 해결이 된 건 알겠는데
position이 있는데도 z-index를 써도 되는가에 대한 의문과
정확한 개념을 다지고 싶어서 z-index와 position을 좀 더 공부해봤다.
position 종류
static
- 문서 흐름에 맞춰 배치하며 기본값
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>body {
margin: 0;
}
.div1 {
width: 100px;
height: 100px;
background: pink;
}
.div2 {
width: 100px;
height: 100px;
background: gold;
top: 50px;
left: 50px;
}
.div3 {
width: 100px;
height: 100px;
background: greenyellow;
top: 100px;
left: 100px;
}
relative
- static과 같으나 위칫값을 지정할 수 있음
body {
margin: 0;
}
.div1 {
width: 100px;
height: 100px;
background: pink;
position: relative;
}
.div2 {
width: 100px;
height: 100px;
background: gold;
position: relative;
top: 50px;
left: 50px;
}
.div3 {
width: 100px;
height: 100px;
background: greenyellow;
position: relative;
top: 100px;
left: 100px;
}
absolute
- position: relative값을 가진 부모 요소 기준으로 위치 지정
- 부모 요소에 position이 relative가 없을 경우 브라우저의 window 기준으로 위치 지정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="z-index.css">
</head>
<body>
<div class="relative">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
</body>
</html>body {
margin: 0;
}
.relative {
border: 1px solid black;
width: 300px;
height: 300px;
margin: auto;
}
.div1 {
width: 100px;
height: 100px;
background: pink;
position: absolute;
}
.div2 {
width: 100px;
height: 100px;
background: gold;
position: absolute;
top: 50px;
left: 50px;
}
.div3 {
width: 100px;
height: 100px;
background: greenyellow;
position: absolute;
top: 100px;
left: 100px;
}
fixed
- 문서의 흐름과 상관 없이 스크롤해도 고정 위치에 그대로 있음
- 헤더, 우측하단 채팅봇 등 만드는 데 사용해보자
.div1 {
width: 100px;
height: 100px;
background: pink;
position: fixed;
}
sticky
- fixed와 비슷하지만 일반 문서 흐름에 따라 움직임.
.div1 {
width: 100px;
height: 100px;
background: pink;
position: sticky;
}
z-index
- 뒤에 있는 태그는 앞에 있는 태그보다 위에 있음(div1 < div2 < div3)
- z-index에 숫자를 부여해서 순서를 바꿀 수 있고, 숫자가 높을 수록 앞에 위치(음수 사용 가능)
- 부모 요소에 z-index 값 있으면 부모 값만 적용됨. 자식 z-index는 반영되지 않음
- z-index 값이 없으면 코드 순서에 따라서 쌓임
- position: static 아닐 경우 지정 가능. 즉, static은 기본값이므로 position을 지정해줘야 사용 가능
hover 애니메이션 만들 때 .overlay는 position: absolute 값을 지정했기 때문에 z-index 사용이 가능했던 것!
body {
margin: 0;
}
.relative {
border: 1px solid black;
width: 300px;
height: 300px;
margin: auto;
position: relative;
}
.div1 {
width: 100px;
height: 100px;
background: pink;
position: absolute;
z-index: 3;
}
.div2 {
width: 100px;
height: 100px;
background: gold;
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}
.div3 {
width: 100px;
height: 100px;
background: greenyellow;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
⭐️ 기억할 내용
- 이미지 어둡게 만들고 애니메이션 동작시 background 위치 지정 생각하기
- z-index를 사용할 요소에 static을 제외한 position이 지정되어야 한다
- position: fixed를 사용해 고정 ui(헤더, 채팅봇 등)을 만들어보자
참고자료
- 코딩애플 HTML/CSS 강의 中 Landing Page 숙제
HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, 고급 animation 까지 - 코딩애플 온라인 강좌
Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때문에 React, Vue만 사
codingapple.com
[LECTURE] 5. z-index 속성의 이해 : edwith
인트로 포지션 속석 값이 static이 아닌 element끼리는 겹칠 수 있습니다. 기본 순서는 나중에 선언 된 것이 위로 나오게 되지만, 만약 이 순서를 바꾸고 싶다면 어떻게 해... - 커넥트재단
www.edwith.org
'Frontend > HTML&CSS' 카테고리의 다른 글
| [HTML] Canvas Tutorial 정리 (0) | 2023.07.21 |
|---|---|
| [HTML] 웹사이트 헤더 구조 분석 (0) | 2023.07.03 |
| [CSS] flexbox 개념 정리 & Flexbox Froggy 문제 (0) | 2023.06.11 |
| [CSS] 선택자 정리 (0) | 2023.06.10 |
| [CSS] 단위 정리 (0) | 2023.06.09 |
Contents
소중한 공감 감사합니다