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;
}
그럼 아래와 같이 동작합니다.