지속가능한 개발 노트:)

하나만 선택할 수 있는 셀렉트박스(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;..

ChatGPT... 이 녀석 요즘 정말 핫이슈!! (좀 옛날 말 같지만... 제일 잘 표현되는 단어같아서.. 허허) 이렇게나 핫한데 저는 아직 시도도 못해봤습니다! 왜냐?!!? 뭔가 어떻게 사용해야하지도 모르겠고... 엄두가 나지 않았달까요... 그래서!! 작정하고 chatGPT 사용법을 알아볼까 합니다!!ㅎㅎ 1. 기본 사용법 - https://chat.openai.com/chat 접속해서 가입하기 - 한글 명령 대신 영어로 써야 충분한 답변을 얻을 수 있다고 합니다. 왜 영어를 써야 하느냐? ChatGPT는 언어별로 대화를 기억하는 길이가 다르고, 글자를 기억할 수 있는 단위인 토큰이 한글로 표현할 때는 영어 대비 4배 더 많이 사용한다고 합니다. 2. 대화 세션 관리하기 - 한 세션은 4,000개 ..

유튜브 등 영상 스트리밍 페이지에서 볼 수 있는 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..

어제 갑자기 친구가 본디 하냐고 물어보더라구요 정말 들어본 적 없어서 그게 뭐냐고 물어보니까, 메타버스 어플? 메타버스 메신저? 이제 좀 저물어가는 메타버스 인가 했더니 본디를 등에 업고 다시 떠오르나 싶어서, 자세히 알아보려 합니다!! '본디(Bondee)'는 메타버스 기반 소셜 어플리케이션으로 출시 4개월이 지난 요즘 인기를 얻고 있다고 하네요.. 왜... 저는 이제야 알았을까요?ㅎㅎㅎㅎ IT 스타트업 메타드림이 만든 아바타 메신저 앱으로 피규어 스타일의 아바타를 통해 친구 등 타인과 메세지를 주고 받을 수 있는 새로운 형태의 메신저 본디. 카톡이나 인스타 디엠이 이미 우리의 생활에 굳건히 자리 잡고 있는데, 이렇게 까지 주목 받는 이유가 뭘까요? 1. 리얼한 감정 공유 본디에서는 현재 기분이나 상태..