부스트코스에서 팝업 레이아웃을 공부 했는데, 자바스크립트 강의가 아니기 때문에 html,css를 이용해서 팝업 레이아웃을 짜는 방법만 배웠다.
- 부모 요소로부터 내부 요소의 위치를
top,left,right등의 기준으로 정하고 꼭 그 위치를 만족해야할때
우선 나는 부모 div 태그 안에 자식 div요소를 만들고 position: absolute 속성을 주어서 해결을 했었다. 부모요소의 height과 width는 정해 져 있기 때문에 absolute 속성을 이용해서 절대적인 위치를 정했다.
강의에서는 역시나 더 쉽게 했다.
padding을 이용해서 내부 요소의 여백을 주었다.
.text 클래스를 보면 내부 패딩값을 이용해서 텍스트 영역의 여백을 주고 있다. 꼭 div를 이리저리 움직이지 않아도 된다.
- 팝업 컴포넌트는 다른 페이지에서 독립적으로 사용 될 수 있기 때문에, 메인 컨텐츠와는 별개로 존재한다.
html 마크업을 보면 wrap 요소와 별개로 나누어져 있고 dimmed 클래스와 팝업이 popup이라는 요소로 묶어 져 있다.
배경색 팝업창을 사용하면서 dimmed 처리를 할 경우 묶어서 하나의 컴포넌트로 처리하는것이 좋다.
- 고정사이즈의 팝업을 화면 중앙에 정렬 하는 법
position: absolute와 margin: auto를 이용해서 중앙 정렬을 한다.
popup 부모 요소안에 dimmed요소와 실제 팝업 레이아웃을 담당하는 popup_layer 요소가 있다. 이때 popup_layer 요소에 position: absolute를 준다.
그리고 이때 top,bottom,height이 정해지면 margin을 이용해서 세로 정렬을 할 수 있고, left,right,width가 정해지면 가로로 정렬을 할 수 있는데, 현재 디자인 가이드에서는 세로와 가로의 길이가 모두 정해져있으므로 중앙 정렬을 할 수 있다.
4-1 가변 사이즈 팝업일 경우 중앙정렬
강의에서 원리를 설명을 해줬는데 그 원리는 정확히 이해하지 못해 방법만이라도 기억하고자 정리를 한다.
대충 이해하기를 임의의 세로 정렬된 요소를 기준으로 팝업을 세로로 정렬한다..였다.
이상하게 코드펜에서 에러가 나서 vscode 소스를 첨부한다...
부모요소 popup의 가상요소에 다음과 같은 요소를 추가한다.
.popup::after{
width: 0px;
vertical-align: middle;
display: inline-block;
height: 100%;
content: "";
}vertical-align요소는 inline, inline-block요소에만 적용이 된다.
.modal {
width: 300px;
min-height: 150px;
background-color: #fff;
position: relative;
display: inline-block;
vertical-align: middle;
border: 1px solid #000;
z-index: 10;
padding-bottom: 50px;
}팝업 요소에
position: relative;
display: inline-block;
vertical-align: middle;를 추가한다.
4-2 display: table 속성을 이용해서 가운데 정렬
popup을 담당하는 요소위로 2겹의 div를 추가한뒤 display: table 그리고 display: table-cell 속성을 추가하고 popup_layer 요소는 inline-block으로 디스플레이 속성을 바꾼다. 그럼 text-align, vertical-align 속성을 통해 중앙 정렬을 할 수 있다.
