코드에 대한 피드백을 받고, UI를 처음부터 다시 만들다 보니, 시간은 다소 걸렸지만 그래도 꽤 만족스러운 결과가 나온것 같다. 전보다 더 깔끔해진것 같기도 하고,,,?
팝업안에 새로운 div태그를 만들어서 overflow-y : auto
속성과 height: calc
속성 을 이용하여 바깥쪽이 아닌 안쪽 스크롤을 추가했다.
.reviewContainer{overflow-y: auto; height: calc(100% - 53px);
(반대쪽 팝업도 위와 똑같은 코드로 작성되었다.)
전에는 화면 축소 시 display: flex로 자리를 잡아둔 요소들이 깨졌는데, border 1px을 outline 1px로 바꾸니 해결되었다.
-> outline 속성은 보더와 다르게 레이아웃을 관여하지 않아서 흐트러지지 않음.
또한, 뒷 배경을 position값과 z-index를 활용해서 확대 또는 축소해도 뒷 배경이 사이즈와 자리를 유지하도록 하였다.
여기서 문제점이 있다면, 위에서 팝업 부모요소에 height: 100%;를 주는 바람에,,,
화면 축소를 하게되면 높이 값이 그대로 적용이 되버리는 상황이 발생하는데,,, 이건 도저히 해결 방법을 모르겠다. 좀 더 연구를 해봐야겠다.
<div class="boxArea">
<div class="box">
<div class="imgArea">
</div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea">
</div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea">
</div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea">
</div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea">
</div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea">
</div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea">
</div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea">
</div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea">
</div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea">
</div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
</div>
.boxArea{display: flex; flex-wrap: wrap; flex-direction: row; padding: 15px 10px; box-sizing: border-box;
.box{width: 122px; height: 117px; outline: 1px solid #cbcbcb; margin: 10px;
.imgArea{width: 122px; height: 79px; background-color: #f5f5f5;
.chk{position: relative; right: -110px; top: -10px; width: 23px; height: 23px; background: url(../images/chkbox.png) no-repeat;}
}
.titBox{padding: 7px 12px; box-sizing: border-box; font-size: 15px;}
&:hover{outline:2px solid #1caf82; box-shadow: 0 0 5px #9a9a9a;}}
}
<div id="bg">
<img src="../images/bg.png" style="width: 100%; height: 100%;">
</div>
#bg{position: absolute; z-index: -1; width: 100%; height: 100%;}
.wrap{overflow: hidden; position: relative; width: 100%; height: 100%; min-width: 320px;}
이전에는 float:left;
로 왼쪽에 달라붙도록 코드 작성을 하였지만, 이렇게 되면 브라우저 크기가 달라졌을 때 팝업창이 밑으로 사라진다는 피드백을 받고 포지션 값으로 바꿨다.
또한, 화면 확대/축소 시 위치가 밀리는 현상을 방지하기 위해transform: translateX
속성을 이용하여 X좌표값을 잡아주었다.
.loc2{
position: absolute;
transform: translateX(120.5%);
}
전에는 reviewTilte이라는 부분의 width값을 px (고정값)으로 줘서 오른쪽에 불필요한 margin이 생겨나게 되었다.
이러한 현상을 방지하기 위하여,,,
아예 width: 100%;를 주니 불필요한 margin이 사라지게 되었다.
정확한 원인은 모르겠으나,,, 없어졌으니 좋다 ㅎㅎ
(바깥쪽은 padding: 15px로 영역을 잡고있는 상태이다.)
<div class="reviewArea">
<div class="reviewTitle">
<span>2020년 08년 태풍경로</span>
<span>홍길동 2020-09-27</span>
</div>
<div class="reviewCont">
<span>Text</span>
</div>
</div>
.reviewArea{padding: 10px; box-sizing: border-box;
.reviewTitle{width: 100%; height: 50px; border: 1px solid #dddddd; border-radius: 5px 5px 0px 0px;
padding: 15px; box-sizing: border-box; background: #f1fcf5;
span:nth-child(1){font-weight: bold; font-size: 16px; line-height: 15px;}
span:nth-child(2){color: #787878; font-size: 13px; float: right; line-height: 20px;}
}
.reviewCont{width: 100%; height: 110px; border: 1px solid #dddddd; border-radius: 0px 0px 5px 5px;
border-top: none; padding: 10px; box-sizing: border-box;}
}
전에는 width값을 단위를 퍼센트로 하여 코드를 작성하였으나, 이 방법을 사용하게 되면,,,
화면을 축소했을 때 GNB가 점점 사라지는 현상을 볼 수 있다.
그래서 나름 해결책으로, px (픽셀) 단위를 써보자! 해서 썼는데, 이게 맞는 방법인지는 모르겠으나 화면을 축소했을 때 그대로 유지되서 일단 이대로 냅두는 중이다.
오른쪽에 있는 툴바는 toolbar라는 div로 전체로 한번 묶고, 그 안에 scale (확대 축소 버튼) div와 rightGnb (버튼 여러가지) 를 넣었다.
버튼들은 padding을 이용하여 안쪽을 늘려주고 각 이미지들의 자리를 잡아주었다.
이부분은 겉보기엔 input 같지만, 사실 textarea 특유 디자인을 뺀것이다.
<textarea placeholder="댓글을 입력해 주세요. 최대 500자까지 입력 가능합니다." class="comment" style="resize: none; overflow: hidden;"></textarea>
코드는 다음과 같다. 여기서의 핵심은 resize: none;
과 overflow:hidden
이다. 이 두가지 속성을 사용하여 textarea 특유의 디자인을 제거할 수 있다.
이게 원래 textarea 디자인이지만, overflow:hidden
을 사용하여 스크롤을 제거하고, resize: none;
을 사용하여 사이즈 조정할 수 있는 영역을 제거할 수 있다.


이 부분은 placeholder를 줄바꿈하기 위해서 넣은 것이다.
지도 제작을 누르면 콘텐츠가 바뀌는 형식의 탭 토글 이벤트를 추가 했다.
내지도 공유지도 탭 같은 경우는 누르면 팝업창이 노출되기 때문에 단순한 엑티브 토글만 구현하였다.
탭을 누르면 콘텐츠가 바뀌는걸 볼 수 있다. 물론, 아직 지도제작 탭에 내용은 채워넣지 않은 상태이다.
<div class="tabCont" style="display: block;">
<div class="mapContainer">
<div class="tab02">
<ul>
<li class="active">내지도</li>
<li>공유지도</li>
</ul>
</div>
<div class="searchArea">
<input type="text" class="mapSearch">
</div>
<div class="title">
<span>전체 <em>32</em> 건이 검색되었습니다.</span>
</div>
<div class="boxArea">
<div class="box">
<div class="imgArea"></div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea"></div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea"></div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea"></div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea"></div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea"></div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea"></div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea"></div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea"></div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
<div class="box">
<div class="imgArea"></div>
<div class="titBox">
<span>2020년 청주시...</span>
</div>
</div>
</div>
<div class="more">
<span>더보기 (<em>1</em> / 14)</span>
</div>
</div>
</div>
<div class="tabCont" style="display: none;">
2
</div>
.tabCont{overflow-y: auto; height: calc(100% - 0px);
.mapContainer{overflow-y: auto; height: calc(100% - 53px);
.tab02{border: 1px solid #cbcbcb; width: 294px; height: 39px; margin: 20px auto;
text-align: center; border-radius: 5px; cursor: pointer;
ul{display: flex; flex-direction: row;
li{width: 50%; font-size: 17px; color: #787878; line-height: 40px;}
}
.active{background-color: #1caf82; color: #fff;}}
.searchArea{position: relative; margin-left: 9px;
.mapSearch{width: 290px; height: 35px;border: 1px solid #cbcbcb;
border-radius: 5px; outline: none; text-indent: 6px;
}
&:after{position: absolute; top:4px; transform: translateX(-40px); content: '';
width: 30px; height: 30px; border-radius: 25px; border: 1px solid #063e7a;
background:#063e7a url(../images/white-search.png) no-repeat right 40% center;}
}
.title{text-align: center; padding-top: 50px; font-size: 14px;
em{font-style: normal; color: rgb(255, 4, 4); font-weight: bold;}
}
.boxArea{display: flex; flex-wrap: wrap; flex-direction: row; padding: 15px 10px; box-sizing: border-box;
.box{width: 122px; height: 117px; outline: 1px solid #cbcbcb; margin: 10px;
.imgArea{width: 122px; height: 79px; background-color: #f5f5f5;
.chk{position: relative; right: -110px; top: -10px; width: 23px; height: 23px; background: url(../images/chkbox.png) no-repeat;}
}
.titBox{padding: 7px 12px; box-sizing: border-box; font-size: 15px;}
&:hover{outline:2px solid #1caf82; box-shadow: 0 0 5px #9a9a9a;}}
}
.more{width: 266px; height: 33px; margin-left: 20px; border-radius: 5px;
text-align: center; padding: 7px; box-sizing: border-box; background-color: #eff0f4;
em{font-style: normal; color: rgb(255, 0, 0);}}
}
}
/* 레이어팝업 닫기버튼 */
$(document).ready(function(){
$('.btnClose').on({
'click': function () {
$(this).closest('.popup').hide();
}
});
$('.popup .tab li').on({
'click': function () {
var idx = $(this).index();
$(this).addClass('active').siblings().removeClass('active')
$(this).closest('.popup').find('.tabCont').eq(idx).show().siblings('.tabCont').hide();
}
});
$('.popup .tab02 li').on({
'click': function () {
var idx = $(this).index();
$(this).addClass('active').siblings().removeClass('active')
}
});
})