부스트코스 웹UI개발 3. HTML&CSS 활용 -레이어팝업-

릿·2021년 9월 4일
0

부스트코스

목록 보기
2/2

IE낮은버전에도 대응하기 위한 팝업 가운데정렬 방법!

1-1. 팝업사이즈 고정의 경우

position: absolute;
top: 50%; left: 50%;
margin-top: -(레이어팝업 세로절반);
margin-left: -(레이어팝업 가로절반);

단점 : margin값에 대한 추가적인 연산 필요

1-2. 팝업사이즈 고정의 경우
margin: auto;

margin의 top, left, right, bottom 모두 auto로 적용할 경우, margin: auto; 로 축약하여 사용할 수 있다. 하지만 경우에 따라 auto는 0으로 처리된다.

**0으로 처리되는 경우
1) 상하 margin
inline, float 요소, 혹은 absolute, fixed로 위치가 고정된 요소의 모든 margin
2) auto로 처리되는 경우
width가 있는 요소의 좌우 margin
absolute의 top + bottom + height 혹은 left + right + width 값이 함께 있는 요소의 모든 margin

2-1. 팝업사이즈 가변의 경우
display: inline-block;
vertical-align: middle;
vertical-align을 쓰려면 높이값이 있는 빈요소가 필요하기 때문에
html에 div로 빈요소를 만들어주고(또는 ::after로 만들어준다.)
width: 0; height: 100%를 하고 vertical-align을 사용하면 세로중앙정렬이 된다.
(빈요소에 줄바꿈을 하게 되면 완벽한 중앙이 아닌 왼쪽 또는 오른쪽에 4px정도 차이가 나게 된다. 그럴땐 줄바꿈을 하지 않거나 margin으로 땡겨준다.)
text-align: center;
text-align은 popuplayer부모요소에 줘야한다.
단점 : 빈태그 혹은 가상요소가 하나 더 필요

2-2. 팝업사이즈 가변의 경우
._wrap {
display: table;
table-layout: fixed;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
단점 : 많은 코드중첩이 필요함

profile
항상 재밌는 뭔가를 찾고 있는 프론트엔드 개발자

0개의 댓글