728x90
반응형
SMALL
안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
yeonee 블로그 : 네이버 블로그
예쁘고 맛있게 먹고 건강하게,강인하지만 온화하게 행하라. ※맛스타운스타일상 인스타 www.instagram.com/s2._.y25n ※맛집감성일상 유튜브https://youtube.com/channel/@S2_yeonee 티스토리https://yeoneeluv.tistory.co
blog.naver.com
이전에 게시했던 인스타그램 알람 기능 구현 - 모달창 크기 조절, 내용 제한은 너무 베이직한 부분이 있어,
요즘 스타일의 코드와 충돌이 있어 수정하는 과정을 겪어보았습니다.
<HTML - 헤더 스크립트 부분>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<HTML - 클릭되는 아이콘 부분>
<div class="alert-tool">
<span class="material-symbols-outlined" data-bs-toggle="modal" data-bs-target="#exampleModal">
notifications
</span>
<p></p>
</div>data-bs-toggle="modal", data-bs-target="#exampleModal"
이 부분을 필요한 태그에 속성값으로 붙여줍니다.
<HTML - 클릭시 펼쳐질 모달 부분>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content" >
<div class="modal-body modal-backgound" style="height: 30%;">
<div class="modal-box">
</div>
</div>
</div>
</div>
</div>위 코드가 기본 모달 코드가 됩니다. (style 속성은 제가 인라인으로 넣은 것이니 코드 활용시에는 무시하시면 됩니다.)
다른 모달을 한 html에서 같은 명칭(같은 코드 폼)으로 사용시 충돌이 일어나므로 id("exampleModal") 값을 변경하여 사용해주시면 충돌이 일어나지 않습니다.
+ 위 코드는 상단 헤더바 부분과 모달 부분만 작성하였습니다.
<모달 클릭 전>
<모달 클릭 후>
+ 해당 게시물의 코드로 사진을 참고하실 때는 헤더바와 모달창만 해당하여 확인하시면 됩니다.
<HTML - 본문>
<body>
<div class="wrap" >
<div class="header">
<div class="logo">
<a>
<img src="resources/img/DotLogo.png.png" />
</a>
</div>
<div class="header-tools">
<div class="search-tool">
<input type="checkbox" id="search" />
<label for="search">
<form>
<input type="text" class="search-input" placeholder="검색할 항목을 입력하세요" />
</form>
</label>
<span class="material-symbols-outlined">
search
</span>
</div>
<div class="alert-tool">
<span class="material-symbols-outlined" data-bs-toggle="modal" data-bs-target="#exampleModal">
notifications
</span>
<p></p>
</div>
<div class="dm-tool">
<span class="material-symbols-outlined">
mail
</span>
<p></p>
</div>
<div class="profile">
<div class="profile-img">
<img src="resources/img/KakaoTalk_Photo_2020-12-19-23-39-15.jpg" />
</div>
<div class="profile-name">
<p>dasdfsdffsdfsasda</p>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content" >
<div class="modal-body modal-backgound" style="height: 30%;">
<div class="modal-box">
<div class="alarm-all-btn">
<a>
모두보기
</a>
</div>
<div class="modal-profile-icon">
<label>
<a>
<img src="resources/img/profile1.jpg"/>
</a>
</label>
<div class="modal-alarm-contents">
<div class="modal-alarm-user">
im_Zzang_gu_da
</div>
<div class="modal-alarm-content">
im_Zzang_gu_da님이 회원님을 팔로우하기 시작했습니다.
</div>
</div>
</div>
<div class="modal-profile-icon">
<label>
<a>
<img src="resources/img/profile2.jpg"/>
</a>
</label>
<div class="modal-alarm-contents">
<div class="modal-alarm-user">
i_want_to_be_a_Gamani
</div>
<div class="modal-alarm-content">
i_want_to_be_a_Gamani님이 댓글을 남겼습니다 : "나는야 진정한 가마니가 될꺼야>_0!!"
</div>
</div>
</div>
<div class="modal-profile-icon">
<label>
<a>
<img src="resources/img/profile3.jpg"/>
</a>
</label>
<div class="modal-alarm-contents">
<div class="modal-alarm-user">
im_Danbi
</div>
<div class="modal-alarm-content">
im_Danbi님이 회원님의 사진을 좋아요💗 눌렀습니다.
</div>
</div>
</div>
<div class="modal-profile-icon">
<label>
<a>
<img src="resources/img/profile4.jpg"/>
</a>
</label>
<div class="modal-alarm-contents">
<div class="modal-alarm-user">
im_so_Sad
</div>
<div class="modal-alarm-content">
im_so_Sad님이 댓글을 남겼습니다 : "희미한 과거만 바라보다 선명한 현재를 놓치지 말자"
</div>
</div>
</div>
<div class="modal-profile-icon">
<label>
<a>
<img src="resources/img/profile5.jpg"/>
</a>
</label>
<div class="modal-alarm-contents">
<div class="modal-alarm-user">
im_so_famous_spongeBob
</div>
<div class="modal-alarm-content">
im_so_famous_spongeBob님이 댓글을 남겼습니다 : "사실 집게리아 패티는 중국산이야 ㅠ.ㅠ"
</div>
</div>
</div>
<div class="modal-profile-icon">
<label>
<a>
<img src="resources/img/profile6.jpg"/>
</a>
</label>
<div class="modal-alarm-contents">
<div class="modal-alarm-user">
im_so_4rory_ya
</div>
<div class="modal-alarm-content">
im_so_4rory_ya님이 회원님을 팔로우하기 시작했습니다.
</div>
</div>
</div>
<div class="modal-profile-icon">
<label>
<a>
<img src="resources/img/profile7.jpg"/>
</a>
</label>
<div class="modal-alarm-contents">
<div class="modal-alarm-user">
Cute_cat
</div>
<div class="modal-alarm-content">
Cute_cat님이 회원님의 사진을 좋아요💗 눌렀습니다.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 모달 끝 -->
</body>
< css 1>
더보기
.search-content-wrap{
width: 50vw;
height: 100%;
/* border-left: 1px solid rgba(255,255,255,0.3);
border-right: 1px solid rgba(255,255,255,0.3); */
}
.search-inputs-wrap{
display: flex;
/* border-bottom: solid 1px gray; */
}
.search-inputs{
display: flex;
margin: 10px 20px 10px 40px;
}
.search-inputs label{
padding-top: 20px;
}
.searchTag-box-wrap{
padding: 0px 10px 25px 10px;
}
.searchTag-box{
color: white;
font-size: large;
text-align: center;
}
.search-content-wrap .search-input-text{
overflow-y: scroll;
color: black;
background-color: rgb(220, 220, 220);
width: 740px;
height: 30px;
border-radius: 15px;
font-size: 14px;
cursor: pointer;
margin-left: 20px;
}
.back-icon {
filter: invert(100%);
width: 30px;
height: 30px;
cursor: pointer;
}
.feed-content{
overflow-y: scroll;
padding: auto;
margin: auto;
}
.feed-content-wrap{
display: grid;
grid-template-columns: 310px 310px 310px;
grid-template-rows: 310px 310px 310px;
gap: 5px;
}
.feed-content-wrap1 img{
border: solid 1px white;
width: 318px;
height: 318px;
}
.feed-content-wrap2 img{
border: solid 1px white;
width: 318px;
height: 318px;
}
.feed-content-wrap3 img{
border: solid 1px white;
width: 318px;
height: 318px;
}
.feed-content-wrap{
display: flex;
justify-content: flex-start;
}
/* alert-tool Modal */
.modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
border-radius: 15px;
border-color: white;
border: 1px solid rgba(0,0,0,.2);
border-radius: 15px;
}
.modal-backgound {
background-color: rgb(0, 0, 0);
}
.modal.show {
display: block;
}
.alarm-all-btn a{
position: relative;
margin-top: 0px;
margin-left: -7%;
color: gray;
font-size: 13px;
cursor: pointer;
}
.alarm-all-btn a:hover{
color: rgb(73, 73, 73);
}
.modal-bodys {
position: absolute;
margin-top: 3.8%;
right: 60.5px;
width: 280px;
height: 440px;
padding: 10px 15.5px 15.5px 15.5px;
}
.modal-alarm-content{
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
width: 220px;
}
.modal-profile-icon{
display: flex;
color: gray;
cursor: pointer;
}
.modal-profile-icon img{
width: 50px;
height: 50px;
border-radius: 100%;
cursor: pointer;
}
.modal-alarm-user{
padding-left: 14px;
color: gray;
font-size: 13px;
font-weight: bold;
}
.modal-alarm-content{
padding: 14px 10px 10px 12px;
text-align: left;
font-size: 12px;
}
< css 2>
더보기
.alarm-content-wrap{
width: 50vw;
height: 100%;
margin-left: 53%;
/* border-left: 1px solid rgba(255,255,255,0.3);
border-right: 1px solid rgba(255,255,255,0.3); */
}
.alarm-top{
display: flex;
/* border-bottom: solid 1px gray; */
font-weight: bold;
}
.alarm-top span{
margin: 20px 20px 20px 350px;
color: white;
font-size: x-large;
}
.back-icon{
filter: invert(100%);
margin: 20px 20px 20px 40px;
width: 30px;
height: 30px;
cursor: pointer;
}
.profile-icon {
display: flex;
width: 950px;
border-bottom: solid 1px gray;
padding: 20px 10px 20px 20px;
color: whitesmoke;
}
.profile-icon img{
width: 80px;
height: 80px;
border-radius: 100%;
cursor: pointer;
}
.alarm-user a{
text-decoration: none;
cursor: pointer;
}
.profile-icon .alarm-user{
padding-left: 20px;
color: white;
font-size: 20px;
font-weight: bold;
}
.alarm-content{
display: flex;
padding: 10px 10px 10px 20px;
font-size: 15px;
}
.alarm-follow-button{
margin: 0px 0px 0px 550px;
padding: 4px 16px 4px 16px;
height: 25px;
text-align: center;
border-radius: 14px;
background-color: #0095f6;
color: white;
font-size: 15px;
cursor: pointer;
}
.alarm-follow-button:hover{
background-color: transparent;
border: 1px solid whitesmoke;
}
/* alert-tool Modal */
.modal {
position: absolute;
top: 0;
left: 0;
display: none;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.modal.show {
display: block;
}
.alarm-all-btn a{
padding: 5px 10px 10px 200px !important;
padding-bottom: 10px;
color: gray !important;
font-size: 13px;
cursor: pointer;
}
.alarm-all-btn a:hover{
color: rgb(73, 73, 73) !important;;
}
.modal-profile-icon{
display: flex;
color: whitesmoke !important;
cursor: pointer;
}
.modal-profile-icon img{
width: 50px;
height: 50px;
border-radius: 100%;
cursor: pointer;
}
.modal-alarm-user{
color: white !important;
}
.modal-content {
margin-left: 98%;
margin-top: 5%;
border-radius: 10px !important;
background-color:transparent;
width: 26% !important;
}
<css 3>
더보기
body {
margin : 0;
box-sizing: border-box;
height: 100%;
}
.wrap {
height: 100vh;
overflow: hidden;
background-color: black;
}
/* ============================================================= */
/* 헤더바 */
/* ============================================================= */
.header {
/* width: 95%; */
height: 80px;
margin: 0 10px 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
color: white;
background-color: black;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
.logo {
z-index: 10;
margin-left: 60px;
}
.logo img {
margin-left: 90px;
width: 150px;
cursor: pointer;
}
.logo img:hover {
display: inline-block;
animation: tada;
animation-duration: .5s;
}
.header .header-tools {
display: flex;
margin-right: 50px;
font-weight: 480;
cursor: pointer;
}
.header-tools span {
font-size: 35px;
font-weight: 500;
line-height: 50px;
margin-left: 20px;
}
.header .search-tool {
display: flex;
align-items: center;
position: relative;
}
.search-input {
width: 0px;
height: 0px;
opacity: 0;
border-radius: 15px;
transition: all .5s;
font-size: 14px;
}
#search {
width: 40px;
height: 40px;
position: absolute;
z-index: 10;
right: 0;
opacity: 0;
cursor: pointer;
}
#search:checked + label input {
margin-right: 20px;
display: block;
width: 250px;
height: 40px;
transition: all .5s;
color: white;
background-color: transparent;
border: 1.4px solid white;
padding-left: 20px;
opacity: 1;
}
.alert-tool {
position: relative;
}
.alert-tool label {
position: relative;
}
.alert-tool p {
position: absolute;
width: 8px;
height: 8px;
color: white;
border: 0px solid white;
border-radius: 10px;
background-color: red;
top: 35px;
right: 0;
}
#alert-box {
width: 30px;
height: 30px;
position: absolute;
right: 0;
opacity: 0;
cursor: pointer;
}
.alert-list {
width: 0px;
height: 0px;
top: 30px;
right: -100px;
border: 1px solid white;
border-radius: 25px;
background-color: black;
position: absolute;
overflow: hidden;
overflow-y: auto;
transition: all .5s;
opacity: 0;
}
#alert-box:checked + label>.alert-list {
height: 300px;
width: 250px;
transition: all .5s;
opacity: 1;
}
.alert-list dl {
margin: 0;
width: 90%;
margin: auto;
}
.alert-list dt {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
/* margin: 0; */
}
.alert-list span {
font-size: 2px;
/* white-space: nowrap; */
word-break: break-all;
}
.alert-list img {
width: 20px;
height: 20px;
border-radius: 10px;
}
.alert-list dt:hover {
background-color: rgba(115,115,115, 0.2);
width: 100%;
border-radius: 15px;
}
.dm-tool {
position: relative;
}
.dm-tool p {
position: absolute;
width: 8px;
height: 8px;
color: white;
border: 0px solid white;
border-radius: 10px;
background-color: red;
top: 35px;
right: 0;
}
.alert-tool>span:hover,
.dm-tool>span:hover,
#search:hover ~ span {
font-weight: 800;
animation: swing;
animation-duration: .5s;
}
.header .profile {
width: 250px;
margin-left: 40px;
display: flex;
font-size: 15px;
align-items: center;
position: relative;
}
.header .profile p:hover {
cursor: pointer;
text-decoration: underline;
}
.profile-img>img {
width: 30px;
height: 30px;
border-radius: 15px;
}
.profile-name {
height: 100%;
margin-left: 20px;
}
.profile-name p {
height: 100%;
display: flex;
align-items: center;
}
/* ============================================================= */
/* 상세 사이드바 */
/* ============================================================= */
.wrap dt a,
.wrap div a,
.wrap a > span {
text-decoration: none;
color: white;
}
/* width */
::-webkit-scrollbar {
width: 0px;
}
.sidebar-wrap {
position: absolute;
}
.br-bottom {
width: 100%;
border-bottom: 2px solid rgba(155,155,155, 0.4);
}
.sidebar {
width: 300px;
position: fixed;
height: 100%;
top: 0 ;
left: -300px;
opacity: 0;
z-index: 1;
transition: all .35s;
color: white;
}
.sidebar-logo img{
position: absolute;
width: 150px;
top: 25px;
left: 100px;
}
.side-content {
margin: auto;
display: flex;
flex-direction: column;
margin-top: 90px;
width: 90%;
overflow-y: auto;
max-height: 100%;
background-color: black;
}
.tools.br-bottom:nth-child(3) {
margin-top: 15px;
}
.tools.br-bottom:nth-child(4) {
margin-top: 20px;
}
.tools dt {
display: flex;
}
.tools a {
padding-left: 15px;
font-size: 35px;
font-weight: 480;
line-height: 50px;
cursor: pointer;
width: 90%;
}
.tools dt:hover {
background-color: rgba(115,115,115, 0.2);
width: 100%;
border-radius: 15px;
}
.tools span {
font-size: 16px;
font-weight: 400;
vertical-align:bottom;
}
.friends {
margin: 0 auto;
margin-top: 30px;
width: 100%;
padding-bottom: 20px;
}
.friends>span {
padding-left: 15px;
font-size: 20px;
font-weight: 400;
}
.friends-list {
margin-top: 20px;
}
.friend-profile {
height: 55px;
display: flex;
align-items: center;
padding-left: 15px;
position: relative;
cursor: pointer;
}
.friend-profile:hover {
background-color: rgba(115,115,115, 0.2);
border-radius: 15px;
}
.profile-img>img {
width: 30px;
height: 30px;
border-radius: 15px;
}
.profile-name>span {
height: 100%;
margin-left: 40px;
display: flex;
align-items: center;
}
.friend-profile>label {
width: 10px;
height: 10px;
border-radius: 5px;
position: absolute;
right: 20px;
background-color: lightgreen;
}
.more-friends {
display: flex;
font-weight: 400;
justify-content: space-between;
}
.more-friends>span:nth-child(2) {
position: absolute;
right: 15px;
}
.footer {
margin: auto;
width: 90%;
margin-top: 20px;
padding-bottom: 120px;
font-size: 14px;
}
.footer span {
color: rgba(195,195,195, 0.7);
line-height: 23px;
cursor: pointer;
margin-bottom: 2000px;
}
.footer div {
margin-top: 40px;
}
.footer p {
color: rgba(185,185,185, 0.5);
}
/* ============================================================= */
/* 숏컷 사이드바 */
/* ============================================================= */
.sidebar-shortcuts {
width: 80px;
height: 100%;
/* background-color: #222; */
position: fixed;
top: 0 ;
left: 0;
opacity: 1;
transition: all .15s
}
.shortcuts-wrap {
position: absolute;
top: 80px;
width: 100%;
height: 90%;
/* min-height: 800px; */
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.shortcuts-wrap * {
color:white;
text-decoration: none;
margin: 0;
}
.sidebar-shortcuts a {
font-size: 35px;
line-height: 50px;
width: 100%;
cursor: pointer;
text-align: center;
}
.sidebar-shortcuts h5 {
text-align: center;
padding-bottom: 10px;
margin-bottom: 20px;
font-weight: 300;
font-size: 14px;
}
.sidebar-shortcuts dl:last-child {
margin-bottom: 10px;
}
.sidebar-shortcuts dt:hover{
background-color: rgba(115,115,115, 0.2);
width: 100%;
border-radius: 15px;
}
/* ============================================================= */
/* 사이드바 효과*/
/* ============================================================= */
input[id="menuicon"] {
display: none;
position: absolute;
}
input[id="menuicon"] + label {
display: block;
width: 40px;
height: 20px;
/* position: relative; */
position: fixed;
cursor: pointer;
z-index: 2;
top: 30px;
left: 20px;
}
input[id="menuicon"] + label span {
display: block;
position: absolute;
width:100%;
height: 2px;
border-radius: 30px;
background-color: rgb(255,255,255);
transition: all .35s;
}
input[id="menuicon"] + label span:nth-child(1) {
top: 0px;
}
input[id="menuicon"] + label span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
input[id="menuicon"] + label span:nth-child(3) {
bottom: 0;
}
input[id="menuicon"]:checked + label {
z-index: 2;
}
input[id="menuicon"]:checked + label span:nth-child(1) {
top:50%;
transform: translateY(-50%) rotate(45deg);
}
input[id="menuicon"]:checked + label span:nth-child(2) {
opacity: 0;
}
input[id="menuicon"]:checked + label span:nth-child(3) {
top:50%;
transform: translateY(-50%) rotate(-45deg);
}
input[id="menuicon"]:checked + label + .sidebar {
left: 0;
opacity: 1;
}
input[id="menuicon"]:checked + label ~ .sidebar-shortcuts {
opacity: 0;
}
/* ============================================================= */
/* 컨텐츠 영역 */
/* ============================================================= */
.contents {
display: flex;
justify-content: end;
min-width: 1600px;
width: 100%;
height: calc(100vh - 80px);
/* border: 1px solid white; */
}
/* ============================================================= */
/* 메인 컨텐츠 */
/* ============================================================= */
.main-content {
display: flex; /* sy - search.html , Alarm.html에 추가사용*/
width: 40%;
min-width: 800px;
height: 100%;
/* border-left: 1px solid rgba(255,255,255,0.3); */
/* border-right: 1px solid rgba(255,255,255,0.3); */
}
.feed-list {
height: 91vh;
overflow: auto;
}
.feed-wrap{
width: 60%;
margin: 45px auto;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 20px;
}
.feed-header {
height: 70px;
width: 100%;
color : white;
position: relative;
}
.user-profile .more-options {
display: none;
position: absolute;
right: -40px;
top: 60px;
width: 160px;
z-index: 50;
overflow: hidden;
}
.more-options>div {
border: 1px solid rgba(255,255,255,0.3);
border-radius: 15px;
background-color: black;
line-height: 30px;
}
.more-options dl {
margin: 15px 15px;
font-size: 13px;
line-height: 35px;
}
.more-options dt {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
padding: 3px 0 0 6px;
transition: all .25s;
}
.more-options dt:hover {
transition: all .25s;
background-color: rgba(115,115,115, 0.4);
border-radius: 10px;
}
.more-options span {
font-size: 20px;
}
.more-options a {
margin-left: 10px;
}
.user-profile {
width: 95%;
height: 100%;
margin: auto;
display: flex;
flex-direction: row;
align-items: center;
}
.user-profile img {
width: 40px;
height: 40px;
border-radius: 20px;
margin-left: 10px;
background-color: white;
}
.user-profile span:nth-child(2) {
margin-left: 20px;
cursor: pointer;
}
.user-profile span:nth-child(2):hover {
text-decoration: underline;
}
.user-profile span:nth-child(3) {
font-size: 35px;
font-weight: 900;
margin-left: 59%;
cursor: pointer;
}
.feed-body {
width: 100%;
}
.feed-img{
height: 430px;
}
.feed-body img{
display: none;
width: 100%;
margin: 0 auto;
height: 430px;
object-fit:contain;
}
.feed-tools {
width: 100%;
margin: auto;
padding: 15px;
color:white;
display: flex;
align-items: end;
z-index: 100;
}
.feed-tools svg {
margin-left: 10px;
}
.feed-body .feed-tools .clickable-svg:nth-child(1) {
z-index: 10;
cursor: pointer;
}
.feed-body .feed-tools .clickable-svg:nth-child(2) {
z-index: 10;
margin-left: 20px;
cursor: pointer;
}
.bi-heart-fill {
transition: fill .5s;
color: red;
}
.feed-body .feed-tools .clickable-svg:nth-child(3) {
z-index: 10;
font-size: 25px;
margin-left: 73%;
cursor: pointer;
}
.feed-text {
width: 91%;
margin: auto;
color: rgb(179, 179, 179);
font-size: 12px;
line-height: 24px;
word-wrap: break-word;
margin-left: 20px;
}
.feed-text span:nth-child(3) {
width: 100%;
font-size: 13px;
color: white;
}
.feed-footer {
/* height: 170px; */
padding-bottom: 20px;
width: 100%;
}
.reply-wrap{
color: white;
}
.reply-top button {
font-size: 13px;
margin: 15px 0 0;
width: 100px;
background-color: transparent;
border: 0;
color: rgb(183, 183, 183);
cursor: pointer;
transition: all .15s;
}
.reply-top button:hover {
font-weight: 700;
color: white;
transition: all .15s;
}
.reply-middle {
width: 100%;
/* height: 60px; */
margin: 10px auto;
}
.reply-middle dl {
margin: 0;
}
.reply-middle dt {
margin: auto;
width: 90%;
display: flex;
height: 50px;
padding: 2px 10px;
align-items: center;
transition: all .25s;
}
.reply-middle dt:hover {
background-color: rgba(115,115,115, 0.2);
transition: all .25s;
border-radius: 15px;
}
.reply-middle img{
width: 30px;
height: 30px;
border-radius: 15px;
}
.reply-list {
display: flex;
margin-left: 15px ;
flex-direction: column;
justify-content: center;
height: 100%;
font-size: 14px;
color: lightgray;
}
.reply-list span:last-child {
color: gray;
font-size: 13px;
}
.reply-bottom {
width: 93%;
padding-top: 6px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(255,255,255,0.3);
}
.reply-bottom input {
margin-top: 10px;
width: 85%;
height: 33px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.3);
padding-left: 10px;
background-color: transparent;
color: gray;
font-size: 13px;
font-weight: 600;
}
.reply-bottom input:focus{
outline: 0;
}
.reply-bottom button {
margin-top: 10px;
height: 33px;
background-color: transparent;
color: lightgray;
border: 0;
}
/* ============================================================= */
/* 피드 모달 */
/* ============================================================= */
.modal-content {
border : 1px solid rgba(255,255,255,0.3)!important;
}
.modal-backgound {
background-color: rgb(0, 0, 0);
}
.modal-header {
border-bottom: 1px solid rgba(255,255,255,0.3) !important;
position: relative;
}
.modal-user-profile {
width: 700px;
height: 100%;
margin: auto;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 10px;
}
.modal-user-profile img {
width: 40px;
height: 40px;
border-radius: 20px;
margin-left: 10px;
background-color: white;
}
.modal-user-profile>span:nth-child(2) {
margin-left: 20px;
cursor: pointer;
}
.modal-user-profile>span:nth-child(2):hover {
text-decoration: underline;
}
.modal-user-profile>span:nth-child(3) {
font-size: 35px;
font-weight: 900;
margin-left: 73%;
cursor: pointer;
}
.modal-close {
width: 50px;
height: 50px;
background-color: transparent;
border: 0px;
color: white;
font-weight: 500;
font-size: 26px;
}
.modal-user-profile .modal-more-options {
display: none;
position: absolute;
right: -40px;
top: 60px;
width: 160px;
z-index: 50;
overflow: hidden;
}
.modal-more-options>div {
border: 1px solid rgba(255,255,255,0.3);
border-radius: 15px;
background-color: black;
line-height: 30px;
}
.modal-more-options dl {
margin: 15px 15px;
font-size: 13px;
line-height: 35px;
}
.modal-more-options dt {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
padding: 3px 0 0 6px;
transition: all .25s;
}
.modal-more-options dt:hover {
transition: all .25s;
background-color: rgba(115,115,115, 0.4);
border-radius: 10px;
}
.modal-more-options span {
font-size: 20px;
}
.modal-more-options a {
margin-left: 10px;
}
.modal-body {
display: flex;
height: 650px;
border-top: 1px solid rgba(255,255,255,0.3);;
}
.modal-feed-body {
width: 65%;
border-right: 1px solid rgba(255,255,255,0.3);
}
.modal-feed-body img{
width: 100%;
margin: 0 auto;
height: 430px;
object-fit:contain;
}
.modal-feed-body .feed-tools {
margin: 5px auto 0;
padding: 15px;
color:white;
display: flex;
align-items: center;
}
.modal-feed-body .feed-tools svg {
margin-left: 10px;
}
.modal-feed-body .feed-tools .clickable-svg:nth-child(1) {
cursor: pointer;
z-index: 10;
}
.modal-feed-body .feed-tools .clickable-svg:nth-child(2) {
margin-left: 20px;
cursor: pointer;
z-index: 10;
}
.modal-feed-body .feed-tools .clickable-svg:nth-child(3) {
font-size: 25px;
z-index: 10;
margin-left: 80%;
cursor: pointer;
}
.modal-feed-body .feed-text {
width: 91%;
margin: auto;
color: rgb(179, 179, 179);
font-size: 13px;
line-height: 24px;
word-wrap: break-word;
margin-left: 20px;
}
.modal-feed-body .feed-text span:nth-child(3) {
width: 100%;
font-size: 15px;
color: white;
}
.modal-feed-footer {
width: 35%;
padding-bottom: 20px;
}
.modal-feed-footer .reply-wrap{
height: 100%;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.modal-feed-footer .reply-middle {
width: 100%;
height: 100%;
margin: 10px auto;
overflow-y: auto;
height: 80vh;
}
.modal-feed-footer .reply-middle dl {
margin: 0;
}
.modal-feed-footer .reply-middle dt {
margin: auto;
width: 90%;
display: flex;
height: 50px;
padding: 2px 10px;
align-items: center;
transition: all .25s;
}
.modal-feed-footer .reply-middle dt:hover {
background-color: rgba(115,115,115, 0.2);
transition: all .25s;
border-radius: 15px;
}
.modal-feed-footer .reply-middle img{
width: 30px;
height: 30px;
border-radius: 15px;
}
.modal-feed-footer .reply-list {
display: flex;
margin-left: 15px ;
flex-direction: column;
justify-content: center;
height: 100%;
font-size: 14px;
color: lightgray;
}
.modal-feed-footer .reply-list span:last-child {
color: gray;
font-size: 13px;
}
.modal-feed-footer .reply-bottom {
width: 93%;
padding-top: 6px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(255,255,255,0.3);
}
.modal-feed-footer .reply-bottom input {
margin-top: 10px;
width: 85%;
height: 33px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.3);
padding-left: 10px;
background-color: transparent;
color: white;
}
.modal-feed-footer .reply-bottom input:focus{
outline: 0;
}
.modal-feed-footer .reply-bottom button {
margin-top: 10px;
height: 33px;
background-color: transparent;
color: lightgray;
border: 0;
}
/* ============================================================= */
/* 서브 컨텐츠 */
/* ============================================================= */
.sub-content {
width: 25vw;
height: 100%;
/* border: 1px solid white; */
}
.sub-wrap {
width: 390px;
height: 100%;
margin-top: 70px;
/* border: 1px solid rgba(255,255,255,0.3); */
/* background-color: white; */
border-radius: 20px;
}
/* .sub-wrap *{
border: 1px solid grey;
} */
.sub-container{
margin-left: 15%; /* sy - search.html에서 추가한 부분*/
width: 100%;
height: 100%;
}
.sub-recommand{
width: 100%;
height: 532px;
background-color: rgb(33,33,33);
display: flex;
flex-direction: column;
border-radius: 20px;
}
.sub-title{
color: gray;
width:390px;
height: 40px;
position: fixed;
display: flex;
align-items: end;
}
.sub-title>span{
margin-left: 30px;
}
.sub-recommand .user-nickname{
width: 190px;
color: rgb(165, 165, 165);
}
.sub-recommand button{
background-color: transparent;
border: transparent;
color: #0095f6;
cursor: pointer;
width: 70%;
}
.sub-recommand button:hover{
background-color: transparent;
color:white;
}
.sub-content .result-content-area{
margin: 60px 0 0 30px;
overflow-y: scroll;
height: 500px;
}
.sub-content .follow-img{
width : 50px;
margin : auto 17px auto 0;
}
.sub-content .follow-list{
width: 100%;
display: flex;
justify-content: center;
margin : 5px auto;
/* justify-content: center; */
}
.sub-content .follow-img>img{
width: 50px;
height: 50px;
border-radius: 40px;
cursor: pointer;
}
.sub-content .follow-btn{
width : 170px;
padding : 7px 0;
}
.sub-content .follow-id{
cursor: pointer;
}
728x90
반응형
LIST
'｡*:･ﾟ☆･ﾟschedule･ﾟ*:･ﾟ★･:*:･☆ *:･ﾟ★ > 활용해본 코드 적용 예시 (◍•ᴗ•◍)❤' 카테고리의 다른 글
| [SpringBoot] 게시글 상세조회 ajax 비동기식 조회하기 (0) | 2023.09.15 |
|---|---|
| [SpringBoot] SpringBoot에서 Websocket 사용하기 (0) | 2023.09.03 |
| [Spring boot] 스프링부트 웹소켓 SockJs 구성하기 (0) | 2023.09.01 |
| Spring 스프링 CSS 적용 안되는 에러 해결 (+이미지 파일 불러오기 에러 해결) (1) | 2023.08.24 |
| 인스타그램 알람 기능 구현 - 모달창 크기 조절, 내용 제한 (0) | 2023.08.22 |
