웹디자인 기능사 시험예제/5-3) 팝업 창 패턴

웹디자인 기능사 시험예제/5-3) 팝업 창 패턴

3_팝업 창 패턴 2) 모달 레이어 팝업 창

모달 레이어 팝업창 패턴입니다. 모달 레이어란, 팝업창 영역을 제외하고 다른 기능이 작동하지 않도록 막은 팝업 창 구조라는 뜻입니다. HTML - - - - 의 구조를 갖습니다. 즉, .mlp라는 한 개의 가 한 단계 더 추가된 구조입니다. css .mlp는 화면 전체에 포지션 속성을 지닌 투명한 검은색 배경을 뒤집어 씌워야 합니다. 그래서 반드시 position:fixed나 absolute를 사용하고, width:100%; height:100%; top:0; left:0; 으로 사이즈와 위치를 설정한 다음에 background:rgba(0,0,0,0.8) 로 투명도를 조절해서 사용해야 합니다. 이하 내용은 . popup과 동일합니다. 그래도 참조하기 쉽도록 아래에 작성해 두겠습니다. .popup은 가운..

웹디자인 기능사 시험예제/5-3) 팝업 창 패턴

3_팝업 창 패턴 1)일반 팝업 창.

일반 팝업 창 패턴입니다. HTML - - - 의 구조를 갖습니다. css .popup은 가운데 정렬 코드를 작성해야 합니다.화면 가운데 내에 정렬하려면 position:absolute;나, fixed를 사용하시면 됩니다. 그러나 개인적으로는 화면 자체에서 고정되 변화하지 않는 fixed 쪽이 더 안정된 결과가 나오지 않나 생각합니다. 포지션 absolute/fixed 속성값이 있는 상태에서 top:50%; left:50%; transform:translate(-50%,-50%)을 작성하면 가운데 정렬을 해 줄 수 있습니다. 트랜스폼 속성은 margin-top:-height값/2 , margin-left:-width값/2 으로 대체할 수 있습니다. (만약 width:600px; height;400px;이..

frogOlis
'웹디자인 기능사 시험예제/5-3) 팝업 창 패턴' 카테고리의 글 목록