<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% request.setCharacterEncoding("UTF-8"); %> 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="<http://java.sun.com/jsp/jstl/fmt>" %>    
<%@ taglib prefix="c" uri="<http://java.sun.com/jsp/jstl/core>" %>
<%
  request.setCharacterEncoding("UTF-8");
%> 
<c:set var="contextPath"  value="${pageContext.request.contextPath}"  />
<!DOCTYPE html>

<html>
<head>
 <style>
 
#profile {
    margin-top: 88px;
    min-width: 60%;
    min-height: 400px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    display: grid;
    place-items: center; /* 세로 가로 가운데 정렬 */
}

.imageCircle img {
    margin-top: 50px;
    width: 150px;
    height: 150px;
    border-radius: 50%; /* 동그라미 만들기 */
    object-fit: cover; /* 이미지 비율 유지하기 */
}

.profileText {
    margin-top: 15px;
    text-align: center;
    font-size: 20px;
}

.follow {
    display: flex;
    justify-content: center; /* 가로 가운데 정렬 */
    margin-top: 0px; /* 위쪽 여백 */
    font-weight: bold; 
}

#solid {
border-right: 2px solid rgba(0, 0, 0, 0.2);
}

.settingButton {
    background-color: white;
    color: gray;
    padding: 2px 2.5px 2px 2.5px;
    border: none;
    text-align: center;
    margin: 15px;
    cursor: pointer; /* 커서 모양 */
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.settingButton:hover {
    background-color: #f0f0f0;
}

#Category2 td{
text-align:center;
opacity : 0.5;
font-weight:bold;
}

#Category3 td{
text-align:center;
font-weight:bold;
opacity : 0.8;
}

#Category td{
padding-right:7px;
}
 </style>
  <meta charset="UTF-8">
  <title>사이드 메뉴</title>
</head>
<body>
<div id="profile">
 <div class="imageCircle">
     <img src="${contextPath}/resources/image/mypage.png"/> <!-- 프로필 사진 넣기 -->
 </div>
 <div class="profileText">
     <h3>닉네임</h3>
 </div>
 <table class="follow">
 <tr>
         <td>
         <a href="#">팔로워</a>
         </td>
         <td id="solid"></td>
         <td>
         <a href="#">팔로잉</a>
         </td>
</tr>
     </table>
     <a id="setting" href="#"><button class="settingButton">설정</button></a>
     
     
     <table id="Category" style=" border-spacing: 5px;">
     <tr>
     <td style="text-align:center;">
      <a href="#">
            <img src="${contextPath}/resources/image/bookMark.png"  width="30px" style="opacity : 0.5;"/>
        </a>
     </td>
     <td style="text-align:center;">
     <a href="#">
            <img src="${contextPath}/resources/image/wishList.png"  width="30px" style="opacity : 0.5;"/>
        </a>
     </td>
     <td style="text-align:center;">
     <a href="#">
            <img src="${contextPath}/resources/image/coupon.png"  width="35px" style="opacity : 0.5;"/>
        </a>
     </td>
     </tr>
     
     <tr id="Category2">
     <td><a href="#">북마크</a></td>
     <td><a href="#">좋아요</a></td>
     <td><a href="#">쿠폰</a></td>
     </tr>
     
     <!-- 개수 표시 -->
     <tr id="Category3">
     <td><a href="#">0</a></td>
     <td><a href="#">0</a></td>
     <td><a href="#">0</a></td>
     </tr>
     </table>
</div>
</body>
</html>

image.png