css - hover : 마우스를 이미지 위에 올릴 때 효과

 

 

1) 평소

: 이미지 그대로 보임

 

2) 마우스를 이미지 위에 가져가 대면

: 이런식으로 화면 색이 변하고, 하트와 좋아요 수(2)를 표시

 

<jsp 파일>

<section id="tab-content">

	<div class="profileContainer">
		
		<div id="tab-1-content" class="tab-content-item show">
		
			<div class="tab-1-content-inner">

				<!--이미지-->

	<c:forEach var="image" items="${dto.user.images}">
		<div class="img-box">
			<a href=""> <img src="/upload/${image.postImageUrl}" />
			</a>
			<div class="comment">
				<a href="#" class=""> <i class="fas fa-heart"></i><span>${image.likeCount}</span>
				</a>
			</div>
		</div>
	</c:forEach>

화면에 이미지를 나타내는 코드는

<c:forEach> </c:forEach> 부분이다.

 

일단 여기서, 

 

 

<i class="fas fa-heart"></i>

이 부분을 설명하겠다.

fas fa-heart 부분은

Font Awesome ( font와 icon toolkit) 라는 사이트에서 가져온 아이콘 , 즉 하트 아이콘을 의미한다.

웹에 표시할 다양한 아이콘 사용가능하다.

(구글 검색해서 Font Awesome 홈페이지에서 사용가능)

 

특히 이 아이콘을 사용하려면 

jsp 파일에 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />

이런식으로 링크 추가해줘야 사용 가능

 

 

 

 

<span>${image.likeCount}</span>

그리고 이 부분은 좋아요 수를 의미한다.

<span> 으로 감싸고 있는데, 웹 페이지 일부분에 스타일 적용을 위해 사용된다.

css, javascript 로 ${image.likeCount} 이 부분에 효과를 준다.

아래 css 파일에서 설명하겠다.

 

참고 자료 : https://coding-factory.tistory.com/189

 

 

 

(효과를 주기 위에 그 위에 section, div 등 여러 코드가 있다.)

 

 

 

 

 

위의 jsp파일에 효과를 주기위한 css 파일이다.

 

<css 파일>

// 1)
#tab-content #tab-1-content .tab-1-content-inner .img-box .comment {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
}

// 2)
#tab-content #tab-1-content .tab-1-content-inner .img-box:hover .comment {
  background: rgba(0, 0, 0, 0.6);
  opacity: 1;
}

// 3)
#tab-content #tab-1-content .tab-1-content-inner .img-box .comment a,#tab-content #tab-1-content .tab-1-content-inner .img-box .comment a span{
  color: #fff;
}

// 4)
#tab-content #tab-1-content .tab-1-content-inner .img-box .comment a i {
  margin-right: 10px;
}

일단, 위에서 1,2 번 코드를 보자.

 

#tab-content #tab-1-content .tab-1-content-inner .img-box .comment

이렇게 나와있는데, 

#은 id 를 의미하고, .은 class를 의미한다.

 

즉 위의 jsp파일에서 보면 

 

<section id="tab-content">

	<div class="profileContainer">
		
		<div id="tab-1-content" class="tab-content-item show">
		
			<div class="tab-1-content-inner">

				<!--이미지-->

	<c:forEach var="image" items="${dto.user.images}">
		<div class="img-box">
			<a href=""> <img src="/upload/${image.postImageUrl}" />
			</a>
			<div class="comment">

이런식으로 맨위에

1) section id = "tab-content"가 있다.

그리고 div class = "profileContainer" 아래에 보면 

2) div id ="tab-1-content" 가 있다.

.....

 

 

그래서 #tab-content #tab-1-content .tab-1-content-inner .img-box .comment

가 있는 것이다.

( div class = "profileContainer"  이 부분은 건너뛰고 있네.....)

 

아무튼 다시

css 파일을 보면

// 1)
#tab-content #tab-1-content .tab-1-content-inner .img-box .comment {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
}

// 2)
#tab-content #tab-1-content .tab-1-content-inner .img-box:hover .comment {
  background: rgba(0, 0, 0, 0.6);
  opacity: 1;
}

// 3)
#tab-content #tab-1-content .tab-1-content-inner .img-box .comment a,#tab-content #tab-1-content .tab-1-content-inner .img-box .comment a span{
  color: #fff;
}

// 4)
#tab-content #tab-1-content .tab-1-content-inner .img-box .comment a i {
  margin-right: 10px;
}

여기서 1)은 평상시 이미지 모습이다.

(맨 위에 올렸던 이미지) 

 

position : absolute 

left : 50% 

...

 

이런 특성을 갖고 있는 것이고, 

 

(특히 여기서 보면 

cursor: pointer

를 볼 수 있는데,

이는 이미지 위에 마우스를 올리면 손 모양으로 커서가 변하는 것을 의미)

정보 출처 : https://developer.mozilla.org/ko/docs/Web/CSS/cursor

 

 

2)번째 코드가 마우스 올렸을때,

 

즉 hover가 추가 되었음을 알 수 있다.

 

이 때 

background, opacity가 추가됨

opacity는 불투명도를 의미함

 

-끝-

---------------------

 

추가로 3), 4)번 코드 설명

위에 jsp 파일을 다시보자면, 

<section id="tab-content">

	<div class="profileContainer">
		
		<div id="tab-1-content" class="tab-content-item show">
		
			<div class="tab-1-content-inner">

				<!--이미지-->

	<c:forEach var="image" items="${dto.user.images}">
		<div class="img-box">
			<a href=""> <img src="/upload/${image.postImageUrl}" />
			</a>
			<div class="comment">
				<a href="#" class=""> <i class="fas fa-heart"></i><span>${image.likeCount}</span>
				</a>
			</div>
		</div>
	</c:forEach>

 

 

<a> 태그, <i> 태그랑, <span> 태그에

3), 4) 코드를 통해 효과를 주는 것이다. 

 

 

참고 자료 : 이지업 강의 사이트 "스프링부트 SNS 프로젝트 - 포토그램 만들기"