flex UI : 모달

1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 가운데 정렬로 뜨는 모달을 만드는 방법입니다.

html 마크업은 아래와 같이 작성합니다.

<div class="modal">
  <div class="dialog">
    Lorem20
  </div>
</div>

이제 CSS 코드를 작성합니다. 배경에 깔릴 반투명 검은색 박스가 콘텐츠 위에 뜨도록 position 속성을 이용해서 고정합니다.

.modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

이제 모달창에 스타일을 적용하고 부모요소에게 플렉스를 적용해 가운데 정렬을 합니다.

.modal {
    display: flex;
    justify-content: center; // 가로 정렬
    align-items: center; // 세로 정렬
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}
.dialog {
    width: 50vw;
    padding: 2rem;
    border-radius: 1em;
    background: white;
}

그럼 아래와 같이 동작합니다.