본문 바로가기

전체보기

forEach() IE 11 호환 오류 문제 대응하기 ‘forEach()’는 IE 11에 ‘fully supported’ 되는 메소드로 기재가 되어 있습니다. 다만 ‘querySelectorAll’로 여러 요소를 선택하는 경우 정상적으로 작동을 하지 않습니다. 그 이유는 ‘querySelectorAll’은 ‘NodeList’를 반환하며, ES5에서 ‘forEach()’는 ‘Array’에만 작동하도록 되어 있기 때문입니다. ‘NodeList’는 ES6부터 적용 대상으로 포함이 됩니다. 이 이슈는 ‘babel’로 ‘IE 11’을 타겟으로 잡고 트랜스파일링을 진행해도 수정이 되지 않습니다. ‘NodeList’ 등 배열이 아닌 요소를 대상으로 ‘forEach()’를 적용하기 위해서는 해당 요소들을 배열화하여 활용해 줘야 합니다. var alltable = docu..
로지텍 K380 (Logitech K380) 기본정보 일반 사무용 보급형 키보드의 '최광자'로 자리를 잡은 것으로 알고 있는 아는 사람은 아는 명기 키보드 가격은 3만원 대이며 3개 기기와의 멀티 페어링을 지원하는 블루투스 무선 키보드 기능성 펜타그래프 방식으로 슬림한 폼팩터와 일반 노트북의 뭔가 촐싹 거리는 키감을 제공. 싸구려 느낌이 아니고, 적한 키감과 반발력을 지녀 경쾌한 느낌을 주는 키보드인 것으로 보임 블루토스 연결성 좋음 무게 또한 가벼워 휴대에 굉장히 유리 효용성 가성비 갑이며 이건 중고매물도 많아, 가끔식 중고마켓에서 매우 싼 가격에 취득 가능 심미성 원형 모양의 키로 인해 유니크한 스타일 연출 가능하나, 문자 표시 공간이 적어져 각인이 다소 혼잡 다양한 컬러를 선택 가능하게 하는 점은 개인 개성 반영이 가능하게 함 ..
로지텍 MX Keys (Logitech MX Keys) 기본정보 로지텍의 사무용 하이엔드 제품 라인업인 MX 시리즈의 키보드 출시 제품입니다. MX Master 마우스를 1부터 오랫동안 써 왔던 터라 세트 아이템을 맞추고 싶은 마음이 커, 출시되자마자 주문을 해서 사용했습니다. 펜타그래프 방식을 채용하고 있어, 노트북의 키보드 경험과 상당히 유사합니다. 가격은 10만원 이상의 일반 사무용 키보드 대비 높은 가격대를 보이나, 전문가용 키보드군과 비교할 때는 적정 가격대를 유지한다고 볼 수도 있습니다. 기능성 완성도 높은 노트북 느낌의 키보드 역할을 매우 잘 수행 블루토스 연결성 좋음 로지텍 제공 소프트웨어를 통해 디바이스간 연결성 확보 가능하나, 맥의 경우 사이드카나 유니버셜컨트롤이 더욱 안정적임 효용성 가격이 비싼 편이나 일반 기계식이 아닌 라인업 중에서는 ..
웹페이지에서 focus(포커스)가 어디에 있는지 확인하기 tabindex 를 활용하거나, 포커스의 이동 경로를 설정하는 등의 스크립트를 실행한 경우, 현재 포커스가 어디에 가 있는지 확인하기가 어려울 때가 있습니다. 이럴 때에 브라우저 콘솔창을 통해 간단하게 현재 포커스가 어디 있는지 확인할 수 있습니다. 크롬 또는 개발자 도구를 지원하는 브라우저를 실행한 후 개발자 도구에 들어가 콘솔창에 다음과 커맨드를 통해 현재 포커스의 위치 확인이 가능합니다. console.log(document.activeElement); 포커스의 위치 확인 용도 뿐 아니라 필요한 경우 DOM 또는 스타일을 제어하는 자바스크립트 코드 생성 시에도 활용이 될 수 있을 것으로 보입니다.
tabindex를 ‘0’과 ‘1’만 사용해야 하는 이유와 관련 이슈 탭인덱스는 포커서블하지 않은 요소에 포커스가 갈 수 있도록 해 주거나, 포커서블한 요소에 포커스가 가지 않도록 하는 역할을 합니다. 다만 해당 요소는 스크린리딩을 하는 시스템에 따라 잘못된 순서의 탭 포커싱을 유발할 수 있으므로, 가급적 사용을 지양하는 것이 좋습니다. 또한 사용을 하더라도 ‘0’, ‘1’만 사용되는 것이 권장됨을 MDN 문서를 통해 확인할 수 있습니다. tabIndex 순서 변경의 이슈의 경우, 첫번째 포커스를 받도록 하는 요소가 아닌 요소를 대상으로 첫번째 포커스를 tabIndex를 통해 할당할 경우 정상적으로 포커스가 할당되지 않는 이슈가 있습니다. 해당 상황은 하단 코드 예제를 통해 확인할 수 있습니다. 스펙상으로는 1 이상의 숫자를 순차적으로 할당하여 포커스가 이동하는 순서를 정..
CSS Flex 요소에 text ellipsis (말 줄임표) 적용하기 텍스트가 컨테이너 영역을 초과했을 때 스크롤이 생성되거나 영역을 뚫고 나가지 않고, 말 줄임표로 생략처리할 수 있는 CSS 속성은 text-overflow: ellipsis 입니다. overflow: hidden , white-space: nowrap 을 함께 쓰면 특정 텍스트 포함 요소가 콘테이너 박스 영역을 초과할 정도의 길이를 가진 경우에 자주 활용이 되며 특히 한국 웹사이트에서 자주 활용됩니다. 다만 flexbox 레이아웃모델을 통해 구현된 텍스트 요소의 경우 일반 block 이나 inline 레이아웃모델과 달리 말 줄임표 삽입이, 같은 방법으로 적용되지 않습니다. flex 요소에 말 줄임표를 넣기 위해서는, 약간의 추가적인 CSS 조정이 필요합니다. 부모 flex 요소 자체에는 말 줄임표를 넣을..
IE(인터넷익스플로러)의 Edge(엣지) 강제실행(강제전환) 막기(해지하기) * (업데이트) 2023년 11월 기준으로, 나무위키에 소개된 방법을 통해서 해결이 가능하다고 합니다. 댓글로 달아 주셨네요. * (업데이트) 2023년 10월 기준으로 2022-H2 업데이트 이후 이 방법은 유효하지 않다고 합니다. 다른 방법을 찾게 되면, 본 블로그 포스트를 업데이트 하도록 하겠습니다. 2021년 경에는 엣지 설정을 변경함으로써 IE의 Edge 자동 전환을 막을 수 있었는데, 2023년 4월 기준으로 윈도우 10 또는 11에서 설정을 통한 자동 전환은 지정할 수 없게 되었습니다. 현재 2023년 4월 기준 확인 가능한 자동전환 방지 방법은 레지스트리 편집을 통해서 가능이 한 것으로 확인이 되었습니다. 레지스트리 편집은 엣지 소프트웨어 업데이트 등의 시스템 버전 변경 과정에서 원래 값으..
(패러럴즈) 윈도우 아이콘 맥에서 안 뜨게 하기 문서정보 (최신 업데이트: 2022-10-28) v1: 최초작성 at 2022-10-28 패러럴즈(Pararells)를 이용해서 가상 윈도우(Windows) 운영체제(OS)를 구동 시에 일부 사용자에게 문제로 여겨질 수 있는 부분 하나가 윈도우의 프로그램이 맥(MacOS) 하단 Dock에 다른 맥 아이콘과 함께 표시되는 부분입니다. 아이콘 개수의 증가로 혼잡도를 증가시키는 것과 함께, 디자인 스타일이 다른 아이콘이 맥 아이콘과 함께 표시됨으로써 시각적인 부조화를 유발하기 떄문입니다. 이를 수정하는 방법은 패러럴즈의 가상머신 항목별 설정에서 관련 내용을 변경해 주는 것입니다. 패러럴즈의 ‘Control Center’ 실행 원하는 가상머신 항목의 설정 버튼 클릭 ‘Applications’의 ‘Show Doc..
❤️ 외주/과외 문의
🖥️ 클라우드 메뉴판 : 디지털팝

티스토리툴바