반응형 참고72 모달 레이어 팝업 창 (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 - DOM) HTML 과 TEXT *HTML this is paragraph this is paragraph set text set html p태그 내용에 볼드를 걸어서 글씨를 두껍게 만듬 버튼을 2개 만든다. *JQUERY $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text(function(i, origText){ return "old text: " +origText+ "new text:hello world"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i, origText){ return "old text: " +origText+ "new text:hello world"; }); }.. 2020. 6. 9. text-overflow: ellipsis HTML에 있는 내용이 길때 width에 제한이 있을경우 내용이 도중에 잘려보일수 있는데 text-overflow: ellipsis를 사용하면 내용뒤에 잘리는 부분이 ... 으로 바뀜 2020. 6. 9. 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. 이전 1 2 3 4 5 ··· 18 다음 반응형
