지속가능한 개발 노트:)

안녕하세요! 틸드(~)연산자!! 바로 알아봅시다!!! 💫Tilde (틸드) 틸드는 비트 단위 연산자로 비트를 반전시키는 기능을 합니다. 피연산자를 32비트 정수로 변환합니다. 이해가 안되서 예제를 찾아봤습니다. const a = 5; // 00000000000000000000000000000101 const b = -3; // 11111111111111111111111111111101 console.log(~a); // 11111111111111111111111111111010 // Expected output: -6 console.log(~b); // 00000000000000000000000000000010 // Expected output: 2 후... 역시나 어렵습니다만, 간단하게 말하자면! 00..

안녕하세요!! 저번에 텍스트 흐름 효과를 css로 구현하는 방법을 알려드렸는데요!! 이번엔 같은 흐름효과이긴 하지만, 약간의 디테일이 추가된! 끊김없이 무한 롤링되도록 jQuery를 이용해 구현해보았습니다. HTML 삽입 미리보기할 수 없는 소스 codepen에 작성해두었으니까 확인해보세요~ 글 읽어주셔서 감사합니다! 관련글 - [css] 텍스트 흐름 효과 marquee? animation?(반전 주의)

여러 개의 input 체크박스 체크 여부를 확인하여 요리 조리 이리 저리 작동하도록 하고 싶었습니다! 그럼 먼저 체크 여부 부터 확인을 해야 다음 스텝이 가능하겠죠?!ㅎㅎ $(document).ready(function(){ // 체크박스 체크 여부 확인 함수 function isChk(){ var chked = false; if(!chked){ return false; }else{ }); } } // 체크박스 체크시 함수 실행 $('input[type="checkbox"]').each(function(i){ $(this).click(function(){ isChk() }) }) });

javascript와 jQuery를 이용해서 HTML 요소의 텍스트를 변경하는 여러가지 방법이 있습니다. text(), html(), innerText 등이 있죠! 저는 그 중에서도 textContent를 사용해보았습니다. 그리고 단순히 텍스트를 변경하는 것이 아니라 하나의 요소 안에 모든 텍스트가 아닌 특정 단어만 지우고 싶은 경우를 구현해보았습니다. HTML 삽입 미리보기할 수 없는 소스 element.textContent = '내용' 간단하게 사용할 수 있지만, 특정 단어만 지우고 싶기 때문에 contents()를 이용해 요소 안에 텍스트 들을 배열로 만들고, [0]와 같이 배열의 순서를 지정해서 내용을 바꿔주었습니다. 알아두셨다가 다양하게 응용해보세요~ 수정할 내용이나 알려주실 내용 있으시면 댓글..

애니메이션을 쉽게 구현할 수 있게 해주는 라이브러리인 gsap!! gsap의 scrollTrigger를 이용하여 각각의 영역에 스크롤이 위치하게 되면 해당 탭메뉴가 On, 벗어나게 되면 Off 되도록 구현해 보았습니다!! 나름 알록달록 꾸며보았습니다ㅎㅎㅎ Home About Work Contact panel-Home panel-About panel-Work panel-Contact .nav-list{position:fixed;top:0;left:0;width:150px;height:auto;background:#fff;} .nav-list .item{display:block;text-decoration:none;color:#000;padding:10px;text-align:center;border:1px..

하나만 선택할 수 있는 셀렉트박스(select)와 라디오 버튼(radio button)와 달리 체크 박스는 여러 개를 선택할 수 있죠! 이런 점은 간혹 귀찮음을 주기도 합니다. 예를 들면 여러 개를 선택했는데, 모두 취소하고 다시 선택해야할 때!!ㅎㅎㅎㅎ 그럴 때 사용할 수 있는 기능인 버튼 클릭 한번으로 모든 체크박스 해제하는 방법입니다! AAA BBB CCC DDD Clear All 스타일은 생략할랍니다 ㅎㅎ $('.btn-clear').click(function(){ var searchChk = $('.input-box').find('input') for(var i=0;i HTML 삽입 미리보기할 수 없는 소스 글 읽어주셔서 감사합니다!!

노출된 모달창 혹은 레이어 팝업을 닫을 때 닫기 버튼 혹은 토글 버튼이 아닌 해당 영역외 영역을 눌러서 닫는 기능을 구현하고 싶을 때가 잇지요!! 오늘은 그걸 한번 해보려고 합니다!! 구별하기 편하게 알록달록 색을 넣어보았습니다ㅎㅎ 이런 모양의 모달창이고 HTML과 CSS 코드는 아래와 같습니다! Hello:) .modal-wrap{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);display:none;} .modal-wrap.show{display:block;} .modal{width:500px;height:300px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;..

유튜브 등 영상 스트리밍 페이지에서 볼 수 있는 PIP기능!! PIP는 Picture In Picture으로 브라우저에서 독립된 GUI 화면 위에 또 다른 화면을 제공하는 기능입니다!! 저는... 뭔가 거창하게 JS로 엄청 뚝딱뚝딱 해야할거 같아서 살짝 겁먹었는데요! 생각보다 매애애애애애애우 간단하더라구요! 재생되고 있는 플레이를 스크롤에 따라 position 값을 달리해주기만 하면 구현 완료! .player-wrap{position:relatvie;aspect-ratio:16/9;overflow:hidden;} .player-box{position:relative;width:100%;} .player-box.pip{position:fixed;aspect-ratio:16/9;width:400px;bott..

요소를 클릭했을 때 요소의 텍스트를 input의 value값으로 넣어보겠습니다! HTML 삽입 미리보기할 수 없는 소스 예시로 보여드렸듯이, 배송시 요청사항에 응용해서 사용할 수 있겠네요! 지금 코드보다 좀 더 깔끔하게 정리 할 수 있을거 같긴 합니다! 일단 오늘은 잘 작동하니까 여기까지!! 글 읽어 주셔서 감사합니다.

슬라이드를 구현할 때 공수를 줄여주는 매우 고마운 swiper!! 사진 갤러리(?) 와 같이 2개의 슬라이더가 같이 동작하도록 구현해야 할 때가 있는데요, 그런 경우를 위해 아래 방법으로 swiper 2개 혹은 n개를 연동하여 A슬라이더와 B슬라이더가 서로를 제어하도록 구현하시면 되겠습니다!! HTML 야무지게 작성하고, A-1 A-2 A-3 A-4 A-5 A-6 B-1 B-2 B-3 B-4 B-5 B-6 css 필요한 거 쏙쏙 넣고 (swiper.css 필수!) .swiper-container { width: 600px; text-align: center; } .swiper-container .swiper-wrapper { display:flex; } .swiper-container .swiper-sl..