들어가기 전에

제목, 내용과 예 / 아니오 버튼으로 이루어진 레이어 팝업과, 그 뒤로 컨텐츠들을 덮을 딤드 배경을 만들어 보도록 하겠습니다. position과 z-index에 대한 이해가 중요한 실습이니 다시 한번 상기시키고 실습을 진행하시기 바랍니다.

 제작 가이드

주요 기능 

• 텍스트가 길어지면 팝업 창이 세로로 길어지도록 처리
• 버튼은 하단 고정
  

스타일 정보

• 팝업창 너비 : 300px
• 팝업창 높이 : 200px (가변)
• 텍스트 여백 : 50px 30px 30px
• 버튼 높이 : 50px, 하단 고정
• 딤드 배경 : #000, 투명도 30%

주요 태그 및 속성 

• HTML
  • div, strong, p, button
    
• CSS
  
  • float (float 해제), width, min-height, padding, border
    
  • text-align, font-weight, font-size
    

참고 링크