728x90 반응형 > 메모68 [CSS] display:none 대신 사용하는 visiblity CSS display=none; => 대상을 숨길 때 사용 => opacity: 0; 도 사용 가능 visibility : hidden 을 써야 애니메이션이 잘 먹는다. .black-bg { visibility : hidden; opacity : 0; } .show-modal { visibility : visible; opacity : 1; } opacity: 0; 의 반대는 opacity: 1; 을 사용 visilbility: hidden 반대로는 visible 을 사용해주면 된다. transition : all 1s; = 1초에 걸쳐서 천천히 변하게 해달라는 의미 2024. 3. 21. [JS] 제이쿼리로 CSS 에서 사용하는 display:none; 사용하는 방법 CSS= display:none; 제이쿼리 = hide(); 그 外 ) .fadeOut() = 서서히 사라지게 .slideUp() = 줄어들며 사라지게 2024. 3. 21. [JS] querySelector 하고 제이쿼리 사용 차이 querySelector- css - = CSS= display:none; document.querySelectorAll('.hello').innerHTML = '바보'; 제이쿼리 - css - () 제이쿼리 = hide(); $('.hello').html('바보'); 제이쿼리와 자바스크립트 혼용 가능. $("#close").on("click", function () { document.querySelector(".black-bg").classList.remove("show-modal"); //$(".black-bg").toggleClass("show-modal"); }); "쿼리" 라는 말이 들어가면 css 처럼 쓰인다고 보자. 2024. 3. 21. [CSS] inline-block 과 float inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block' " float 속성을 주면 자동으로 inline-block이 되는데 굳이 또 display: inline-block을 줄 필요가 없다" 라는 메세지로 생각하시면 됨. float 속성을 주면 자동으로 마진이 없는 inline-block 속성이 변한다. 2024. 2. 27. CSS 메모 보호되어 있는 글 입니다. 2024. 1. 12. 이전 1 ··· 5 6 7 8 다음 728x90 반응형
