반응형 UX 개발 썸네일형 리스트형 [CSS] 한 줄 형태로 CSS 파일 포맷 변경하기 CSS를 한 줄로 작성하는 포맷(Single Line Format)은 가독성 문제로 인해 권장되는 형식은 아니지만, 한국 환경에서는 아직도 대부분의 CSS 개발 작업자들이 한 줄 작성을 선호하는 경향이 있습니다. 그런 이유로 협업이나 산출물 제출 등의 이유로 한 줄 형식에 맞춰 CSS 파일을 제공해야 할 때가 있습니다. 직접 코딩을 한 줄로 하는 방법은 비생산적이므로, PostCSS를 활용해 산출물의 포맷팅을 변경하는 방법을 알아 보고자 합니다. 기본적으로 노드 개발 환경이 구성되어 있어야 하며, PostCSS와 CSSNano, fs 모듈이 설치되어 있어야 합니다. npm init -y npm i postcss fs cssnano --save-dev 이후 설치된 모듈들을 활용해 파일 형식을 변경해 줄 자.. [MacOS] 맥북 외장모니터 메인 디스플레이로 활용하기 (메인화면 설정) 맥북이나 맥을 활용해서 외장 디스플레이를 활용하는 경우 외장 디스플레이를 메인 디스플레이로 지정하고 싶은 상황이 있을 수 있습니다. 특히 크기가 큰 디스플레이를 활용하는 경우가 많으며, 주로 시야 중앙에 위치시키기 때문에 더욱 그렇습니다. 메인디스플레이를 변경하는 이유 주시야각에 위치한 디스플레이를 메인화면으로 설정하면, 일단 MacOS에서 제공하는 위젯(widget) 등의 송출 위치를 지정할 수 있습니다. 더불어 독이나 노티피케이션 센터의 출력 위치가 기본으로 메인화면을 시작점으로 두기 때문에, 운영체제 내에서 활용되는 여러 유동적 패널들의 관리가 필요한 경우에도 메인화면 변경은 효과적일 수 있습니다. 외장모니터를 메인화면으로 설정하는 방법 매우 간단하지만, 텍스트로 명시되어 있지 않고 컨텍스트 메뉴에.. 산만한 사람에게 필요한 맥용 무료 시간관리 앱 '플로우(Flow)' 추천 포모도로 타이머는 전세계 많은 사람들이 시간의 효율적 활용을 위해 이용하고 있는 방법입니다. 포모도로는 간략하게 이야기하면 25분 동안 집중해서 업무를 수행하고, 5분의 휴식을 지니는 사이클을 반복하여 업무 생산성을 높이는 방식입니다. 전용 타이머를 책상 위에 배치해서 사용하거나, 별도로 시간을 측정하는 등 포모도로를 실행할 수 있는 방법은 다양합니다. 오늘 소개하고자 하는 어플리케이션은 포모도로, 그리고 꼭 포모도로가 아니더라도 시간관리를 쉽게 할 수 있도록 도와주는 서비스입니다. '플로우(Flow)'라는 이름으로 맥용 어플리케이션이며, 맥용 앱스토어에서 다운로드 받을 수 있습니다. 특장점1. 아름답고 간결한 디자인 플로우 앱은 무척이나 직관적이고 간결한 사용성을 바탕으로, 시간관리 본연의 기능을 가장.. [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 요소 자체에는 말 줄임표를 넣을.. 이전 1 ··· 9 10 11 12 13 14 15 ··· 18 다음
UX개발실
