어서와, 개발은 처음이지?

이번 글에서는 modal을 만들어보도록 하겠습니다. 1. 모달(modal)을 만들자 알고 계시겠지만 모달은 일종의 팝업창으로 웹 서비스에서 뭔가 삭제 버튼을 눌렀을 때, 주변이 흐려지면서 정말 삭제하시겠습니까? 같은 ui를 말합니다. 구현 계획은 아래와 같습니다. 1. modal이 활성화 되었을 때, overflow: hidden 속성을 사용하여 스크롤이 되지 않도록 합니다.(position을 fixed 하라는 글이 종종 보이는데 이렇게 하면 화면 상단으로 스크롤이 이동하는 현상이 일어납니다.) 2. overlay 효과를 담당하는 div의 position을 fixed로 하여 viewport를 꽉 채웁니다. 3. modal의 가운데 정렬을 담당할 wrapModal을 만듭니다. 4. modal을 작성합니다...

이번 글에서는 div 태그의 가로, 세로 가운데 정렬 방법에 대해 작성하겠습니다.해당 카테고리 관련 코드는 여기에 모아두겠습니다. 1. 가운데 정렬 div를 가운데 정렬(특히 세로 가운데 정렬) 하는 방법으로, div를 flex box로 만들어서 justify-content align-items로 가운데 정렬하는 비교적 최신 방법과 table cell로 만들어서 vertical-align 속성을 사용하는 방법이 있습니다. 하지만 위 방법을 사용하면 브라우저와의 호환(IE10 11만 flex 지원), table cell로 바꿨을때 인접 혹은 자식 레이아웃이 붕괴되는 경우가 발생하곤 하는데.. 2. position absolute을 사용하여 정렬해보자 그래서 다른 방법보다 호환성좋고 직관적으로 이해할 수 있..