부스트코스 팝업 레이아웃 정리
부스트코스에서 팝업 레이아웃을 공부 했는데, 자바스크립트 강의가 아니기 때문에 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
속성을 통해 중앙 정렬을 할 수 있다.
Author And Source
이 문제에 관하여(부스트코스 팝업 레이아웃 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wlgns2223/부스트코스-팝업-레이아웃-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)