반응형 CSS drawer 만들기

반응형 css로 웹페이지를 바꾸고 있는데, 휴대전화 크기에서는 header 대신 햄버거 버튼이 더 효율적이라고 생각되어 바꾸고 있는데, 햄거버 버튼을 클릭하면 메뉴가 나오고 뒷 배경이 투명하게 만들고 싶었는데.... 생각보다 까다로웠다:( 여러가지 시도 끝에 찾은 방법을 소개한다.


문제점

1. 구글링 했을 때 대부분이 react-navtive drawer에 관한 내용이라 react에 적용시키므로 할 수 없었다.

2. 전체를 꽉 채우는 배경 1개, 실제 카테고리가 나오는 배경 1개를 만들어서 두개를 겹쳐서, 전체 배경에 opacity를 주는 방법을 생각했다. 하지만 z-index 를 사용했음에도 opacity 가 부모 자식을 초월해서 적용되어서 실패했다.
   

찾은 방법:
opacity 로 투명감을 주는 방식은 버리고

 background-color: rgba(0, 0, 0, 0.5);

bacground 에 직접 이런 방식으로 투명감을 주니까 부모, 자식 영향없이 원하는대로 구현하였다!