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 프로젝트 - 포토그램 만들기"