WEB UIUX/jQuery
[jQuery]제이쿼리 항상 최신버전으로 사용하기
**** 위 코드를 head에 붙여주기 jQuery는 항상 모든 스크립트 링크의 맨 첫번째에 걸어야 적용 된다! ****
WEB UIUX
WEB UIUX/HTML
[HTML]a태그 클릭시 새창으로 열기, 새탭으로 열기 여러가지 방법
* target으로 적용하면 '새탭' * onclick으로 적용하면 '새창' * 지정한 사이즈로 '새창'열리게 하는 속성 - 표시된부분에서 원하는 사이즈로 설정하기! **** pdf를 열고싶다면 a태그의 href속성에 pdf 경로를 작성해줍니다! ****
WEB UIUX/HTML
[HTML]URL링크 공유시 미리보기 썸네일 변경하기
**** 태그 안에 작성할것! meta태그 안에 content=" " 큰따옴표 안에 변경할 내용 작성 **** /* 이미지변경 */ /* 제목변경 */ /* 사이트 설명글 변경 */ /* 대표URL */
WEB UIUX/Sass \ SCSS
[Sass]혼자 유튜브 영상보고 Sass익혀보기 #6(믹스인)
1탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #1(Sass가 무엇인지..) 2탄 - 2022.10.06 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #2(전처리기 설치하고 컴파일테스트) 3탄 - 2022.10.27 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #3(명령행 인터페이스 설치와 컴파일 테스트) 4탄 - 2022.10.28 - [WEB UIUX/Sass \ SCSS] - [Sass]혼자 유튜브 영상보고 Sass익혀보기 #4(주석사용과 중첩규칙(nesting), 단축속성 중첩, 상위선택자 참조) 5탄 - 2022.1..
WEB UIUX/jQuery
[jQuery]제이쿼리 animate() 메서드
# 기본값: $("요소선택").animate({스타일속성}, 적용시간, 가속도, 콜백함수); /* 기능추가기재하기!! */ See the Pen [jQuery]animate1 by kaia (@kaiaakim) on CodePen. 버튼1 "500px"이동 버튼2 "50px"씩 이동 $(function(){ $(".btn1").on("click", function(){ $(".txt1").animate({marginLeft : "500px", fontSize : "30px"}, 2000, "linear", function(){ alert("모션완료"); }); }); // [버튼1]을 클릭하면 class값이 "txt1"인 요소가 2초동안 오른쪽 방향으로 500px만큼 이동하고 글자의 크기는 30px 커지..
WEB UIUX/jQuery
[jQuery]제이쿼리 콜백함수(slideUp(), fadeIn(), toggleSlide(), fadeTo())
# CallBack 함수란 이름 그대로 나중에 호출되는 함수를 말한다. # 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 지점에 도달 했을때 호출 되는 함수를 말한다. * slideUp(), slideDown() - 선택된 요소를 슬리이드 효과로 보여졌다 사라졌다 적용 * fadeIn(), fadeOut() - fadeIn : 선택된 요소를 투명도의 조절로 보여준다.(opacity:1) - fadeOut : 선택된 요소를 투명도의 조절로 사라진 후, display:none으로 변경(opacity:0와 display:none) - 보통 콜백함수로 사용된다. // $("선택자").fadeIn(적용시간, 가속도, 콜백함수) * fadeTo() - 선택된 요소를 투명도의 조절로 보여주거나 사라지도록 한다..
WEB UIUX/jQuery
[jQuery]제이쿼리 마우스좌표값과 스크롤값 .on 이벤트로 구하기(mousemove(), scroll(), scrollTop(), scrollLeft())
See the Pen [jQuery]마우스좌표값,스크롤값 by kaia (@kaiaakim) on CodePen. mousemove X : 0 Y : 0 scroll scrollTop : 0 scrollLeft : 0 body{ height: 10000px; width: 5000px; } #wrap{ position: fixed; left: 10px; top: 150px; } $(function(){ $(document).on("mousemove", function(e){ //마우스 좌표값을 e라는 매개변수가 받을것이다 $(".posX").text(e.pageX); //.text(); ->텍스트가 작성된다는 뜻 //.posX에게 pageX값을 적용 $(".posY").text(e.pageY); //.po..
WEB UIUX/uiux mycodepen
[uiux codepen]2depthGnb(마우스호버시 하위메뉴 열리기)
See the Pen Untitled by kaia (@kaiaakim) on CodePen. LOGO A A-1 A-2 A-3 A-4 B B-1 B-2 B-3 B-4 C C-1 C-2 C-3 C-4 D D-1 D-2 D-3 D-4 *{ padding: 0; margin: 0; } body{ font-size: 16px; color: #333; background: #ccc; } a{ text-decoration: none; color: inherit; } li{ list-style: none; } .wrap{ width: 100%; /* overflow: hidden; */ position: relative; } header{ width: 100%; z-index: 200; background: #00..
