본문 바로가기

UX 개발

[MacOS] 맥OS 스테이지 매니저(Stage Manager) 애니메이션 없애기 스테이지 매니저 기능은 유용하게 맥의 어플리케이션을 관리하고, 멀티태스킹을 진행할 수 있게 해 줍니다. 다만 애플리케이션 전환 시 애니메이션이 다소 시각적으로 혼잡하게 느껴질 때가 있습니다. 그런 경우 애니메이션을 제거함으로써, 불편을 최소화할 수 있습니다. 설정 방법은 ‘시스템 환경설정 > 접근성 > 디스플레이 > 애니메이션 축소’ 옵션을 설정하면 됩니다. 다만 이 경우 스테이지 매니저 뿐 아니라 맥OS 전체 및 ‘애니메이션 최소화’ 접근성 환경을 지원하는 어플리케이션 전부에 적용되므로 유의가 필요합니다. 스테이지 매니저의 애니메이션만 제거하는 방법은 2023년 11월 기준으로 없습니다.
플렉스박스에 말 줄임표(text-overflow: ellipsis) 삽입하기 플렉스박스로 구성된 텍스트 콘테이너는 기본적으로 'text-overflow: ellipisis'로 구현되는 '말 줄임표'를 넣을 수가 없습니다. 하지만 플렉스박스의 하위 자식 요소를 텍스트를 담는 컨테이너로 활용하는 경우 '말 줄임표'를 삽입할 수 있습니다. 플렉스박스가 갖는 기능적 특성으로 보이며, 말 줄임표의 활용이 필요한 경우에는 자식 요소를 텍스트 컨테이너로 활용하는 방식으로 코드를 구성하시기 바랍니다. See the Pen Text ellipsis with Flexbox by siimplelab (@siimplelab) on CodePen.
특정 비율 유지하는 div 만들기 (padding 활용, IE11 호환) CSS 모던 스펙 중 하나인 'aspect ratio'는 특정 엘리먼트의 비율을 특정 값으로 유지할 수 있게 해 줍니다. 다만 IE11 등 하위 버전의 브라우저에서는 사용할 수 없는 단점이 있습니다. 'padding'을 활용해 이와 비슷한 비율을 유지하는 기능을 구현할 수 있습니다. 이는 IE11 등의 하위 브라우저에서도 구현이 가능합니다. CSS 랜더링 방식을 일종의 해킹하여 구현한 이 방식은 하위 브라우저를 호환하기 위한 작업 외에도 필요한 경우 특정 비율을 유지하도록 하는 스타일을 구현하는 용도로 활용이 가능합니다. 비율 유지가 주로 많이 쓰이는 용도는 썸네일의 비율을 유지시키는 데에 사용됩니다. 이 때에는 또 하나의 모던 스펙 중 하나인 'object-fit'을 하위 브라우저 대응하여 구현하는 데..
forEach() IE 11 호환 오류 문제 대응하기 ‘forEach()’는 IE 11에 ‘fully supported’ 되는 메소드로 기재가 되어 있습니다. 다만 ‘querySelectorAll’로 여러 요소를 선택하는 경우 정상적으로 작동을 하지 않습니다. 그 이유는 ‘querySelectorAll’은 ‘NodeList’를 반환하며, ES5에서 ‘forEach()’는 ‘Array’에만 작동하도록 되어 있기 때문입니다. ‘NodeList’는 ES6부터 적용 대상으로 포함이 됩니다. 이 이슈는 ‘babel’로 ‘IE 11’을 타겟으로 잡고 트랜스파일링을 진행해도 수정이 되지 않습니다. ‘NodeList’ 등 배열이 아닌 요소를 대상으로 ‘forEach()’를 적용하기 위해서는 해당 요소들을 배열화하여 활용해 줘야 합니다. var alltable = docu..
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..
HTML 페이지(정적 웹사이트) 비밀번호로 접근권한 제어하기 문서정보 (최종 업데이트: 2022-10-13) v1.0 2022-10-13: 최초 작성 일반정보 클라이언트 단에서 사이트에 비밀번호 제어를 위해서는 별도 자바스크립트 구현체를 통한 기능 구현 가능. 하지만 별도 고도화를 병행하지 않는다면 페이지의 접근만을 제어할 뿐 콘텐츠 암호화가 불가능하며, 접근 경로(URL)만 알면 접근이 가능하다는 점 등 제약사항이 많음 보통 서버 단에서 처리하는 것이 일반적임 서버리스 환경이라면 Cloudflare 등의 서버 제어 기능을 활용하거나, Netlify와 같은 정적웹사이트 호스팅 서비스 자체 제공 보안 기능 활용 정적 웹사이트 비밀번호 제어 방법 모음 Gitlab Pages Access Control 프로젝트 권한에 따른 접근권한 제어 가능 (깃랩 계정 기반) 관련 ..
❤️ 외주/과외 문의
🖥️ 클라우드 메뉴판 : 디지털팝

티스토리툴바