[웹 표준에 맞는 HTML5 프로그래밍] 10차시 - UI를 통해 화면 구현하기

CSS 레이어 팝업

1. HTML과 CSS만으로 구현

2. HTML에 모달 관련 클래스 이름을 명시

3. CSS의 요소 :hover특성을 이용하여 opacity 속성을 1로 할당함으로서 레이어 팝업을 구현

 

JQuery 모달 팝업

1. JQuery 파일을 연결

2. HTML에 모달 관련 클래스 이름을 명시

3. javascript 파일에서 요소 클릭 시, fadeln(); 및 fadeOut(); 메소드를 호출함으로서 레이어 팝업을 구현

 

Bootstrap 모달 팝업

1. http://getbootstrap.com/ 

Bootstrap

2. bootstrap 파일을 연결

3. 모달이 필요한 요소에 data-toggl="modal" 및 dara-target="모달 팝업 아이디명"을 명시

4. 모달 팝업이 되는 요소에 아이디를 입력

5. bootstrap을 통해 자동으로 구현됨

 

w3.css 이미지 팝업

1. https://www.w3schools.com/w3css 

W3.CSS Home

2. W3School에서 제공하는 적응형 CSS라이브러리

3. 최신 반응형(Responsive)웹에 유용

4. 모든 브라우저, 모든 장치에 적용할 수 있음