반응형 참고/web design 연습6 이미지 슬라이드 - fadeIn/fadeOut 사용 *HTML 2020. 6. 17. 모달 레이어 팝업 창 (Modal Layer Pop_up) * HTML This is Popup!! [X] 팝업과 뒤쪽 전체 배경을 위한 클래스 지정 class명 popup은 팝업을 위한것, class명 popup_bg 는 전체 배경이 어두워지는 창을 위한것. class명 close는 닫기 버튼을 위한것 *CSS .popup_bg { display: none; position: absolute; top: 0; left: 0; z-index: 500; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } .popup { display: none; position: absolute; left: 50%; top: 50%; z-index: 1000; transform: translate(-50%, -50%); wi.. 2020. 6. 10. jquery - mouseover/mouseleave, image slide(좌우), tab menu *메뉴에 마우스 올렸을때 메뉴들 드롭다운 // nav 메뉴 $("nav > ul > li").mouseover(function () { $(this).find(".submenu").stop().slideDown(); }); $("nav > ul > li").mouseleave(function () { $(this).find(".submenu").stop().slideUp(); }); // // nav 메뉴 끝 설명 (nav > ul > li)에서 태그를 선택하고 마우스를 올렸을때 $(this).find(".submenu") 여기서 this는 (nav > ul > li) 이다. this를 find(class명 submenu) 찾아서 slideDown()/ slideUp()을 해준다. 근데 stop() 없이.. 2020. 6. 9. clear: both 웹표준 사용하기 웹디자인 기능사 시험에 clear:both;를 사용하면 감점요소이다. 따라서 아래와 같이 css 작성해서 필요시 html에 있는 class에 적용하면 된다. 요소들에 float을 걸면 아래쪽에 오는 요소들이 계속 float이 걸린다. 이를 방지하기 위해 clearfix를 사용한다. clear:both는 float이 걸린 요소 그 다음에 오는 요소에게 쓰지만, clearfix는 float을 걸어논 요소를 감싸고 있는 부모 요소에 쓴다. .clearfix::before, .clearfix::after { display: block; clear: both; content: ''; } before과 after 앞에 :: 콜론 2개 넣기 * 적용예시 // 클래스 명이 없을 시 클리어 내용 =============.. 2020. 6. 2. 이전 1 2 다음 반응형
