Simple Is Best

오늘은 JavaScript를 두고 jQuery 를 사용하는 이유에 대해서 알아보겠습니다. 1. 동일한 역할, 짧은 코드 HTML 을 조작하는 코드가 매우 짧아짐을 확인 할 수 있습니다. 내부의 HTML 을 조작하는 코드 // JS document.getElementById('test').innerHTML=? // jQuery $('.test').html(?) 이벤트 리스너 (on) // JavaScript document.getElementById('btn').addEventListener('click',function(){ document.getElementsByClassName('hello').style.display='none'; }) // Jquery $('#btn').on('click',func..

jQuery : JS 코드를 짧게 축약이 가능하고 HTML 조작을 쉽게 할 수 있도록 개발된 라이브러리 설치법 1. 해당 사이트에 접속 https://code.jquery.com/ jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr code.jquery.com 2. 여러가지 버전 중에..

JavaScript : HTML 조작/변경 을 위해서 사용 HTML 내에서 JavaScript를 작성하기 위해서는 ... HTML내에 자바스크립트를 작성하시려면 태그 안에 작성 JS 조작은 아래에서! : HTML 코드를 먼저 읽어야 JS로 조작이 가능 셀렉터는 찾으려는 HTML 요소보다 밑에다가 script 태그 열고 작성해야 정상적으로 요소를 찾을 수 있다. 1. Javascript Selector : Javascript는 HTML의 조작과 변경을 위해서 사용 document . 셀렉터( ' myhome ' ) . innerHTML = '적용할 값' ; document : 웹 문서 (HTML 문서) . : ~의 셀렉터 ( ' myhome ' ) : id가 myhome이건 class가 myhome이건 요..

안녕하세요. 이번 포스팅에서는 카드 뒤집는 애니메이션에 대해서 구현해보도록 하겠습니다. 어떻게 동작하는지 먼저 알아볼까요? #1. hover 이전 #2. hover 할 때 애니메이션 진행 (뒤집히는 중) 3. hover 할 때, 애니메이션 진행 (뒤집힘) 4. hover를 멈추면 다시 1번으로 돌아감 오늘 위에 해당하는 애니메이션을 구현해보도록 하겠습니다. 1. transform : rotateY( ); 카드를 뒤집었을때의 "반갑습니다." 문구를 정확하게 보이게 하려면 어떻게 해야할까요? 우선 카드 앞면에서 쓰여질 글을 Y축을 기준으로 180도 돌려야 합니다. 뒷면의 결과에 '반갑습니다'가 나오게 하기 위해서는 transform : rotateY(180deg)를 사용하고 카드를 hover하면 다시 tra..

안녕하세요. 이번 포스팅에서는 position : sticky에 대해서 공부하겠습니다. 비슷한 속성으로는 position : fixed 가 존재합니다. 우선 position:fixed와 position: sticky의 차이점에 대해서 알아보도록 하겠습니다. fixed vs sticky [position : fixed] : 사이트 내 전체에 스크롤 되어도 viewpoint 에 고정되어서 처음부터 끝까지 고정 된다. ▷ fixed는 body 태그에 붙어서 처음부터 끝까지 fix됩니다. [position : sticky] : 상위 영역에 의존하여 상위 태그가 스크롤 되어서 사라질 때 까지만 고정된다. ▷ sticky는 상위 태그에 붙어서 상위태그가 스크롤 영역에서 사라질 때 까지만 fix 됩니다. 그럼 sti..

안녕하세요~! 이번 포스팅에서는 이전 포스팅에서 다루었던 CSS Animation에 대해서 심화학습을 진행해보도록 하겠습니다. 이번 포스팅을 보시면서 [CSS Animation-1,2] 를 참고해주시면 도움이 될거에요! https://daterminal.tistory.com/32 17. [CSS] CSS Animation - 1 이번 포스팅에서는 CSS를 활용한 동적인 애니메이션 효과를 주는 방법을 알아보도록 하겠습니다. 구글링을 해보니 CSS를 활용하여 애니메이션 효과를 주려면 @keyframe from ~ to ~를 활용한 애니메이 daterminal.tistory.com https://daterminal.tistory.com/33 18. [CSS] CSS Animation - 2 이번 포스팅은 이해..

안녕하세요. 이번 포스팅에서는 배경에 [video] 를 넣는 방법에 대해서 학습하겠습니다. 유행이 지났지만 이런것도 있구나.. 하면서 넘어가시면 될 것 같습니다. video 삽입 기본 골격 HTML 같은 태그로 삽입하는 방법도 있지만 태그를 이용하는 것이 스타일링에 있어서 더 깔끔하게 다룰 수 있습니다. 태그로 감싸고 그 내부에 태그를 포함합니다. 태그는 비디오의 파일 경로를 지정해줍니다. 태그 속성 ▶ poster : 비디오 안뜰 때 대체 이미지 ▶ autoplay : 자동 재생 ▶ muted : 음소거 ▶ loop : 반복 재생 태그 속성 ▶ src : 비디오 경로 ▶ type : 비디오 파일의 확장자 비디오 중앙정렬 하는 방법 1. position : absolute; (상위요소에서 붕 띄우겠다) ..

윈도우를 전체 싸~악 갈아 엎었습니다..... 갑자기 와이파이가 노트북에서 인식조차 못하더군요.... 그래서 급하게 윈도우를 싹 다 갈아 엎었습니다. 그동안 사용했던 에디터들을 다시 다운 받는 도중에 여러 에러가 발생했습니다. 2503 & 2502 에러.... 설치를 하는 도중 맨 끝에 가서 막히더군요 구글링해도 TEMP 폴더에 가서 보안을 모두 허용 이런 방법 다 해봐도 안먹혔어요. 해결방안은 이렇습니다. 이거 다운로드하시구 다운받을 파일을 관리자 권한으로 실행하여 다운로드 진행하시면 됩니다. 3시간동안 맨 땅에 삽질했네요 ㅋㅋㅋㅋ 참고 링크입니다. https://answers.microsoft.com/ko-kr/windows/forum/windows_8-performance/error-code-250..