728x90 전체 글22 사회적거리두기 강화 요점정리 (2021년 12월16일 기준) 오늘은 돌파감염과 오미크론의 확산으로 인해 강화된 사회적 거리두기 방역수칙에 대해 정리해서 요점만 정리해서 숙지하시기 쉽도록 알려드리려 합니다 먼저 이번 강화된 시행일자는 21.12.8 ~ 22.1.2(16일) 입니다 사적모임인원수는 수도권 비수도권 포함 전국적으로 4인까지만 가능합니다 방역패스관련해서는 미접종자는 1인 단독 이용 또는 포장만 가능합니다. 운영시간은 식당, 카페, 유흥시설등은 21시까지 학원, 영화관, PC방등 22시까지 대규모행사,집회는 50미만, 접종완료자들로만 구성될 경우 299명까지 가능하다고 합니다. 참고로 2차접종후 6개월이 지난뒤에 부스터샷(3차접종)의 경우 14일이 지나지 않아도 접종즉시 백신효력이 발생에 방역패스에 적용 대상이 된다고 합니다 자주 바뀌는 사회적 거리두기 개.. 2021. 12. 16. 웹사이트에서 앱실행 및 딥링크 모바일 웹사이트에서 앱실행을 위한 버튼예제입니다. 우선 안드로이드, IOS의 기기분기로 나눈후에 1. 앱 설치시 인스타그램 앱실행 2. 앱 미설치시에는 앱마켓으로 이동 안드로이드는 하나의 주소형식으로 앱실행과 구글마켓이동이 가능한걸 볼 수 있지만 IOS는 앱실행과 앱스토어 이동이 나누어져 있는걸 확인 할 수 있습니다. 아이폰의 경우 앱의 설치여부를 접근할 수 있는 방법이 없기 때문에 setTimeout으로 시간이 지나도 앱실행이 되지 않으면 앱스토어 경로로 이동하는 함수가 하나 더 딸려있는겁니다ㅎ 참고로 안드로이드와 IOS 모두 실행하고자 하는 앱의 값(시그마)은 앱개발자를 통해서 전달받아야 합니다~ See the Pen 앱 딥링크 by 장명호 (@jangmang) on CodePen. 감사합니다 :) 2021. 12. 8. localStorage를 이용한 다크모드 예제 사용자가 직접선택하는 다크모드기능이기 때문에 쿠키를 이용하는 방법보다는 localStorage이 좀더 효율적일것으로 보입니다. 특징 - localStorage 객체는 만료 날짜가 없는 데이터를 저장합니다. - 데이터는 브라우저를 닫아도 삭제되지 않습니다. See the Pen localStorage를 이용한 다크모드 by 장명호 (@jangmang) on CodePen. 참고문헌 https://www.w3schools.com/jsref/prop_win_localstorage.asp Window localStorage Property W3Schools offers free online tutorials, references and exercises in all the major languages of th.. 2021. 12. 8. 메뉴 오버시 하단라인 따라다니기 간단하지만 심심해보이는 GNB메뉴에 활력을 넣어줄수 있는 모션을 소개하고자 합니다. 메뉴 위치와 가로크기에 유동적인 라인을 그리며 따라다니는 스크립트입니다 디자인에 따라 css를 활용하면 좀더 눈에 띄는 메뉴를 만들수 있을거 같다 See the Pen 메뉴 하단라인 따라다니기 by 장명호 (@jangmang) on CodePen. 감사합니다 :) 2021. 12. 8. 리스트에서 특정단어 찾아 노출하기 간단한 리스트 검색기능을 구현할때 예전(아주 오래전)처럼 복잡하게 문자열을 찾는 스크립트나 정규식을 이용한 필요없이 제이쿼리의 :contains 선택자를 활용하여 지정된 문자열의 포함여부를 조회하여 아래와 같이 검색된 문자열의 리스트업을 구현할 수 있다. See the Pen 특정단어 찾아 노출하기(keyup) by 장명호 (@jangmang) on CodePen. 참고문헌 https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_contains W3Schools online HTML editor The W3Schools online code editor allows you to edit code and view the result in you.. 2021. 12. 8. css로 가상클래스에 index 번호넣기 순서형식의 리스트 UI를 잡을때 기본 ol태그의 숫자는 스타일을 바꾸는게 제한적이라 js로만 index값을 찾아서 넣어줄 수 있는줄 알았는데 구지 자바스크립트를 쓰지않고 css로 번호를 순서대로 삽입할수있다는걸 처음 알게되었다 -ㅁ- 너무 간단해서 충격...이렇게하면 스타일로 마음대로 넣을수 있고... 왜 그동안 스크립트로만 써왔던것인가...무지했던 나의 과거를 반성하며 html 내가 첫번째 내가 두번째 내가 세번째 css ol {counter-reset: number 0;} ol li:before {counter-increment: number 1;content: counter(number);} 끝 2021. 12. 8. textarea 글자수 제한 어떻게 주나요? 흔하게 사용하고 간단하지만 막상하려면 귀찮아지는 소스ㅎ textarea에 200자를 초과하여 입력할 경우 얼럿창 안내와 함께 200자이내로 입력란이 제한되는 샘플입니다 See the Pen textarea 200자이내 카운트 by 장명호 (@jangmang) on CodePen. 감사합니다 :) 2021. 12. 8. 사이트를 나가시겠습니까? 페이지를 벗어날 경우 경고창을 띄우기 위한 소스 $(window).on("beforeunload", function () { return "사이트를 나가시겠습니까?"; }); 감사합니다 :) 2021. 12. 8. 어떤 인앱브라우저로 접속했는지 알 수있을까요? 인앱 브라우저로 접속했을 경우 아래와 같이 간단하게 분기처리가 가능합니다 카카오톡, 페이스북, 인스타그램, 틱톡에서 테스트확인했습니다 if (navigator.userAgent.indexOf('KAKAO') >= 0) alert("카카오톡 인앱에서는 정상적인 진행이 어려울 수 있습니다."); if (navigator.userAgent.indexOf('[FB') >= 0) alert("페이스북 인앱에서는 정상적인 진행이 어려울 수 있습니다."); if (navigator.userAgent.indexOf('Instagram') >= 0) alert("인스타그램 인앱에서는 정상적인 진행이 어려울 수 있습니다."); if (navigator.userAgent.indexOf('trill') >= 0) alert(.. 2021. 12. 8. Blur효과로 나타나는 텍스트 스크립트는 1도 없이 css animation 기능으로 순차적으로 나타났다 사라지는(페이드인 아웃) 모션입니다. 너무 간단하지만 잘 활용하면 페이지를 꽉차보이게 만들 수 있는 깨알모션이 될것 같습니다 미리보기 희미했던 내가 점점 선명하게 떠오른다 css .text {font-size:50px;} .text span:nth-child(1) {animation: txt_blur 1s infinite alternate ease-in;} .text span:nth-child(3) {animation: txt_blur 1.5s infinite alternate ease-in;} .text span:nth-child(2) {animation: txt_blur 2s infinite alternate ease-in;}.. 2021. 12. 8. 이전 1 2 다음 728x90