2021.02.08

P1ush·2021년 2월 8일
0

HTML/SCSS

목록 보기
2/5

완성본

코드에 대한 피드백을 받고, UI를 처음부터 다시 만들다 보니, 시간은 다소 걸렸지만 그래도 꽤 만족스러운 결과가 나온것 같다. 전보다 더 깔끔해진것 같기도 하고,,,?



레이어 팝업 추가 버전



수정 전



이전과 다른점이 있다면?

1. 팝업 스크롤

팝업안에 새로운 div태그를 만들어서 overflow-y : auto 속성과 height: calc 속성 을 이용하여 바깥쪽이 아닌 안쪽 스크롤을 추가했다.


CODE

.reviewContainer{overflow-y: auto; height: calc(100% - 53px);

(반대쪽 팝업도 위와 똑같은 코드로 작성되었다.)


2. 브라우저 사이즈가 변경되어도 레이아웃 유지

전에는 화면 축소 시 display: flex로 자리를 잡아둔 요소들이 깨졌는데, border 1px을 outline 1px로 바꾸니 해결되었다.

-> outline 속성은 보더와 다르게 레이아웃을 관여하지 않아서 흐트러지지 않음.

또한, 뒷 배경을 position값과 z-index를 활용해서 확대 또는 축소해도 뒷 배경이 사이즈와 자리를 유지하도록 하였다.

여기서 문제점이 있다면, 위에서 팝업 부모요소에 height: 100%;를 주는 바람에,,,

화면 축소를 하게되면 높이 값이 그대로 적용이 되버리는 상황이 발생하는데,,, 이건 도저히 해결 방법을 모르겠다. 좀 더 연구를 해봐야겠다.


CODE

<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;}

3. 팝업창 위치

이전에는 float:left;로 왼쪽에 달라붙도록 코드 작성을 하였지만, 이렇게 되면 브라우저 크기가 달라졌을 때 팝업창이 밑으로 사라진다는 피드백을 받고 포지션 값으로 바꿨다.

또한, 화면 확대/축소 시 위치가 밀리는 현상을 방지하기 위해transform: translateX 속성을 이용하여 X좌표값을 잡아주었다.


CODE

.loc2{
  position: absolute;
  transform: translateX(120.5%);
}

4. 불필요한 margin 제거

전에는 reviewTilte이라는 부분의 width값을 px (고정값)으로 줘서 오른쪽에 불필요한 margin이 생겨나게 되었다.

이러한 현상을 방지하기 위하여,,,

아예 width: 100%;를 주니 불필요한 margin이 사라지게 되었다.
정확한 원인은 모르겠으나,,, 없어졌으니 좋다 ㅎㅎ

(바깥쪽은 padding: 15px로 영역을 잡고있는 상태이다.)


CODE

 <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;}
        }

5. GNB Width 수정

전에는 width값을 단위를 퍼센트로 하여 코드를 작성하였으나, 이 방법을 사용하게 되면,,,

화면을 축소했을 때 GNB가 점점 사라지는 현상을 볼 수 있다.

그래서 나름 해결책으로, px (픽셀) 단위를 써보자! 해서 썼는데, 이게 맞는 방법인지는 모르겠으나 화면을 축소했을 때 그대로 유지되서 일단 이대로 냅두는 중이다.



그 외에것들

6. 오른쪽 툴바

오른쪽에 있는 툴바는 toolbar라는 div로 전체로 한번 묶고, 그 안에 scale (확대 축소 버튼) div와 rightGnb (버튼 여러가지) 를 넣었다.

버튼들은 padding을 이용하여 안쪽을 늘려주고 각 이미지들의 자리를 잡아주었다.


7. textarea 디자인

이부분은 겉보기엔 input 같지만, 사실 textarea 특유 디자인을 뺀것이다.

<textarea placeholder="댓글을 입력해 주세요.&#13;&#10; 최대 500자까지 입력 가능합니다." class="comment" style="resize: none; overflow: hidden;"></textarea>

코드는 다음과 같다. 여기서의 핵심은 resize: none;overflow:hidden 이다. 이 두가지 속성을 사용하여 textarea 특유의 디자인을 제거할 수 있다.

이게 원래 textarea 디자인이지만, overflow:hidden을 사용하여 스크롤을 제거하고, resize: none; 을 사용하여 사이즈 조정할 수 있는 영역을 제거할 수 있다.

&#13;&#10 이 부분은 placeholder를 줄바꿈하기 위해서 넣은 것이다.


8. 탭 토글

지도 제작을 누르면 콘텐츠가 바뀌는 형식의 탭 토글 이벤트를 추가 했다.
내지도 공유지도 탭 같은 경우는 누르면 팝업창이 노출되기 때문에 단순한 엑티브 토글만 구현하였다.

탭을 누르면 콘텐츠가 바뀌는걸 볼 수 있다. 물론, 아직 지도제작 탭에 내용은 채워넣지 않은 상태이다.


CODE

HTML

 <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>

SCSS

 .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);}}
      }
    }

Jquery

/* 레이어팝업 닫기버튼 */
$(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')
        }
    });
})

0개의 댓글