layer popup

CSS 응용(2) - layer popup 만들기

이번 포스팅에서 만들어 볼 것은 바로 layer popup 이다. 아래 그림과 같이 "버튼"을 클릭했을 때 pop up되는 느낌으로 새로운 영역이 등장하는 효과를 layer popup 이라고 한다. 시작하기에 앞서 아래와 같이 css style 기본 세팅을 적용한 후에 시작하도록 하자. /* CSS style sheet */ * { margin:0; padding:0; } ul, li { list-style:none; } a { text-decoration:none; } "버튼"을 클릭하기 전과 후의 화면을 다르게 구성하기 위해서 input:checked { } 속성을 사용해 효과를 적용하려고 한다. 우선, 엘리먼트와 엘리먼트를 사용하여 "버튼"이라는 글자와 함께 체크박스를 생성하고 체크박스에 displ..