Frontend
-
CSS 다크 테마 구현Frontend 2019. 9. 14. 20:01
iOS13에 다크모드가 추가 되면서, 개별 웹 사이트의 다크 테마 구현에 관심이 쏠리고 있습니다. iSO13외에도, Android 10, MacOS 10.14부터 다크모드가 추가 되었으며, Windows10도 지난 5월 업데이트로 다크모드 사용이 가능해졌습니다. 최근 9to5mac 에 다크 테마가 적용 되었는데, OS에서 다크모드가 활성화 된 상태로 사이트에 접속하면 다크테마로, 그렇지 않은 경우 밝은 색상의 사이트로 출력됩니다. 현재 OS가 어떤 색상모드를 사용중인지 웹사이트에서 감지하려면, 애플의 제안으로 CSS사양에 추가된 prefers-color-scheme 미디어 쿼리를 사용하면 됩니다. 예제와 함께 사용법을 알아 보겠습니다. 데모용으로 사용할 HTML페이지 입니다. Lorem ipsum is ..
-
jQuery를 VanillaJS로 대체하기Frontend 2019. 9. 7. 16:07
최근 대부분의 브라우저는 ES6를 지원합니다. jQuery는 엘리먼트 선택이나 이벤트 등록, 데이터 요청 등의 작업에서 브라우저 호환성에 신경쓰지 않고 사용할 수 있는 편리한 메소드를 제공해 주었습니다. 그러나 이제는 더 이상 라이브러리에 의존하지 않아도 되도록 브라우저 환경이 발전해 왔습니다. 이 글에서 VanillaJS는 아무 라이브러리도 사용하지 않는 순수 자바스크립트(ES6)를 의미합니다. 다음 작업들에 대해서 jQuery구현과 VanillaJS구현을 알아보겠습니다. 엘리먼트 선택 이벤트 스타일 적용 Document 로딩 완료 이벤트 class 등록과 삭제 ajax 요청 엘리먼트 생성 DOM 제어 엘리먼트 선택 jQuery의 jQuery의 셀렉터인 $()는 querySelector로 대체될 수 있..