[TIL] 240115(월) : hover / filter : brightness 하게 만들기 / opacity / 이미지 그림자지게 하기 / 이미지 안에 글자 넣기

우리 조에서는 카드 이미지 위에 마우스를 올리면 포스터 이미지가 그림자로 변하고, 그 위에 줄거리와 상세페이지 이동 버튼을 올리기로 하였다.

실제 롯데시네마나 CGV에서도 이런식으로 마우스 오버를 이용하여 예매하기 또는 상세보기 페이지로 이동하도록 구현을 해 놓은 것을 알 수 있었다.

따라서 해당 기능을 구현하기 위해서 이것저것 찾아봤는데, 크게는 세 가지 기능을 이용하여 만들 수 있다.

1. : hover

: :hover CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택한다.
보통은 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택 되도록 사용한다.

따라서, 포스터 img 위에 마우스 포인터가 올라 갔을 때, 해당 부분의 밝기를 조절하였다.

* 처음 코드를 작성하였을 때, 이미지 위에 마우스를 올렸을 때는 hover가 작동을 했는데, 줄거리와 버튼 부분으로 가니 hover가 다시 풀리는 문제점이 생겼다.
하지만, 팀원분꼐서 코드를 보고 알려주셨는데, 내가 img와 innerImg(줄거리 + 버튼) 부분을 다시 cardsTop이라는 div로 감싸놓아서, img에만 효과를 적용하였더니 풀려버리는 문제가 생겼다.
이는 img와 cardsTop 모두에 hover 효과를 주니 제대로 작동하는 것을 알 수 있었다.

MDN :hover 문서 확인

2. filter : brigthness; / 명도 조절

: 특정 그림이나 사진 등의 명도를 조절 할 수 있다.
1은 기본 컬러를 의미하고, 1보다 크면 밝기가 점점 밝아지며, 0에 가까울수록 어두워지고, 0이 되었을 때는 검정색으로 변하게 된다.

따라서 내 html 코드에서는 img 자체에는 filter: brigthness(1) 로 지정하고,
img 와 cardsTop 둘 다에 hover를 적용하고, filter: brigthness(0.3) 정도로 지정하니 포스터 이미지 위에 마우스를 올렸을 때, 해당 포스터 이미지가 그림자 지는 것을 확인 할 수 있었다.

MDN brigthness() 문서 확인

.cardsTop:hover .imgClass {
  filter: brightness(0.3);
}

.imgClass {
  filter: brightness(1)
}

.imgClass:hover {
  filter: brightness(0.3);
}

3. opacity (불투명도)

: 불투명도(요소 뒤의 콘텐츠가 숨겨지는 정도)를 나타내는 CSS 기능이다.
opacity: 0; : 불투명도 100% / 아예 보이지 않음.
opacity: 1; : 불투명도 0

따라서 cardsTop 부분에 hover로 마우스 커서를 올렸을 때, 보이지 않던, innerImg(줄거리 + 버튼) 요소가 나타나는 것을 알 수 있다.

MDN opacity 문서 확인

.cardsTop .innerImg {
  opacity: 0;
}

.cardsTop:hover .innerImg {
  opacity: 1;
}

카드 상단 부분 html과 css 전체 코드를 보면 다음과 같다.

/*카드 상단 : 포스터 이미지 + 이미지 내부 줄거리 및 상세페이지 버튼*/

<div class="cardsTop">
        <div>
          <img
            src="https://image.tmdb.org/t/p/w500${movie.poster_path}"
            alt=""
            class="imgClass"
          />
        </div>
        <div class="innerImg">
          <div class="movieOverview">
            <h4>영화 소개</h4>
            <p>${movie.overview}</p>
          </div>
          <div class="movePageBtn">
            <a href="/index2.html?id=${movie.id}">
              <button
                id="pageBtn"
                type="button"
                class="btn btn-danger me-2"
              >
                상세 페이지
              </button>
            </a>
          </div>
        </div>
      </div>

.cardsTop:hover .imgClass {
  filter: brightness(0.3);
}

.imgClass {
  width: 100%;
  height: 425px;
  border-radius: 30px;
  padding: 10px;

  filter: brightness(1);
  height: 425px;
}

.imgClass:hover {
  filter: brightness(0.3);
}

.cardsTop .innerImg {
  position: absolute;
  top: 10%;
  opacity: 0;
}

.cardsTop:hover .innerImg {
  opacity: 1;
}

하루를 마치며...🤔

오늘 또 이렇게 하루종일 MDN 문서와 구글링을 하며 여러가지 기능들을 구현해보며 새로운 것들을 많이 배웠다.
특히, 팀 프로젝트를 하면서 다함께 코드를 공유하고, 코드를 리뷰하며 코드를 작성하는 것을 통해서, 나만이 알아볼 수 있는 코드가 아닌 남들이 보아도 쉽게 이해할 수 있는 클린한 코드를 작성하는 것이 정말 중요하다고 느꼈다.
당장의 내 CSS 작업해 놓은 코드만 봐도 엉망진창이라 이 코드를 보고 이상한 부분을 찾아서 해결해주신 팀원분이 정말 대단하다고 생각했다..
아무튼 간에 주석처리도 꼼꼼하게하면서 코드를 짜는 습관을 더욱 길러봐야겠다.