프로그래밍/CSS32 Modal 만들기 사진과 같이 아이콘을 클릭했을 때 모달이 뜨는 걸 직접 만들어봤다. 이전까지는 Bootstrap이나 UI KIT을 사용하곤 했는데 직접 만드는 것도 생각보다 어렵진 않았다. 준비물: CSS 1. 화면 전체를 덮을 컨테이너가 필요하다. 내 경우는 styled-components(https://styled-components.com/)를 사용해서 코드가 이렇게 나왔지만 css에서도 동일하게 적용된다. 전체를 덮기 위해 width와 height를 100%로 주었고, position을 fixed로 넣었다. 뒤에 약간 투명하게 페이지가 보여야 하기 때문에 z-index와 background-color를 약간 검은색으로 넣어 주었다. 여기서 주의할 점은, background-color를 그냥 주고 opacity를 .. 2020. 2. 6. css로 사이드 overlay 네비게이션 만들기 구현하려는 기능 기능 설명 메뉴 아이콘을 클릭하면 사이드에 네비게이션이 오버레이로 열린다. 준비물 html, css, javascript(함수 2개) 구현 설명 /* The side navigation menu */ .sidenav { height: 100%; /* 100% Full-height */ width: 0; /* 0 width - change this with JavaScript */ position: fixed; /* Stay in place */ z-index: 1; /* Stay on top */ top: 0; /* Stay at the top */ left: 0; background-color: #111; /* Black*/ overflow-x: hidden; /* Disable hor.. 2020. 1. 20. 이전 1 다음 반응형
