css) 팝업이 떠있을때 뒷배경의 스크롤 멈추게하는 코드

 

 

body.scroll-off {     // 팝업이 떠있을때는 뒷배경(body)의

  overflow-y: hidden;   //스크롤이 움직이지 않도록 함

  -ms-touch-action: none;  //.menu-option-popup 옵션선택영역

  touch-action: none;

}

 

 

 

---

메뉴추가

가상 클라스 ::before  ::after 로 만드는 메뉴추가 +버튼

 

.ico-add 로 먼저  '메뉴추가'  영역을 만든다   ::before로 가로  ::after로 세로를 만드는데

위치는 .ico-add를 부모로 잡고  display: flex 위치 삼총사로 잡았다 

      position: relative;

      display: flex;

      justify-content: center;

      align-items: center;

 

 

 [ css 코드 ] 

    .ico-add {

      position: relative;

      display: flex;

      justify-content: center;

      align-items: center;

      margin-right: 6px;

      width: 13px;

      height: 13px;

      &::before {

        content: '';

        display: inline-block;

        width: 13px;

        height: 1px;

        background-color: $green;

      }

      &::after {

        content: '';

        position: absolute;

        display: inline-block;

        width: 1px;

        height: 13px;

        background-color: $green;

      }

    }

 

[  html 코드 ] 

<i>로 클래스 이름만 주고 <a>로 감쌌다.

<a href="#" class="btn-menu-add"><i class="ico-add"></i>메뉴추가</a>