css 썸네일형 리스트형 css style tag(rule) 복사하기 키워드: clone css, cloneNode, insertRule, cssText, emotion, CSSOM 상황 @emotion 라이브러리가 만들어주는 style tag를 복사하는 작업을 하고자한다. 해결 과정 emotion이 만든 style tag는 'data-emotion' attribute를 갖고 있음을 확인했다. 따라서 style tag 중, data-emotion 속성을 가진 tag를 복사하면 될 것이다. const emotionStyleTags = Array.prototype.filter.call(document.getElementsByTagName('style'), (style) => style.hasAttribute('data-emotion'), ) const emotionStyleT.. 더보기 backdrop-filter, box-shadow 크로스 브라우징하기 키워드: backdrop-filter, box-shadow, pseudo-element, nested-element, cross browsing 상황 아무런 효과가 없던 기존의 Header 배경을 backdrop-filter와 box-shadow를 이용하여 꾸미고자 한다. 윗 줄의 흰색 배경(Header)과 아랫줄의 회색 배경(Sub Menus)에 각각 backdrop-filter와 box-shadow를 적용해야했는데, 그 과정에서 Chrome/Safari css 오류가 생겼다. 오류 발생 과정과 해결법을 설명하고자 한다. 해결 과정 먼저 Header와 SubMenu에 각각 새로운 background-color, backdrop-filter, box-shadow를 적용해본다. // header.modul.. 더보기 모바일 기기에서 scroll 관련 버그 대응하기 프로젝트: 채식 지도 키워드: viewport height, window.innerHeight, scrollbar, pull-to-refresh, overscroll-behavior 상황 스크롤이 가능한 웹페이지를 moblie 기기에서 보면 예상치 못한 상황이 많이 일어난다. 그 중에서 1) vh가 viewport 보다 크게 잡히는 버그 2) scrollbar를 숨기고 싶은 상황 3) 안드로이드 기기의 pull-to-refresh 기능을 막고 싶은 상황을 대응하고자 한다. 해결 방법 height: 100vh에서 'vh' 단위는 'viewport height'를 의미하기 때문에 100vh는 브라우저 viewport의 높이와 일치해야한다. 하지만 모바일 기기의 경우는 주소창(top bar)과 navigati.. 더보기 Button에 pointer-events, -webkit-tap-highlight-color 설정하기 프로젝트: 채식 지도(가명) 키워드: pointer-events, -webkit-tap-highlight-color 상황 페이지 상단에 Header가 있고 Header는 3개의 버튼으로 이루어져있다. Header는 flex container이다. 지도영역이 Header에 가려져 터치/마우스 이벤트가 일어나지 않았다. 그래서 header의 마우스 이벤트를 막았다. header.flexContainer { pointer-events: none; } 자식 컴포넌트인 왼쪽(loplat logo)과 오른쪽 아이콘 버튼들도 눌리지 않게 되었다. 해결방법 css pointer-events: none에 대한 MDN 문서를 확인했다. 요소가 포인터 이벤트의 대상이 되지 않습니다. 그러나 해당 요소의 자손이 다른 poin.. 더보기 absolute와 fixed로 다양한 스마트폰 너비 대응하기 프로젝터: SNU FESTIVAL 키워드: absolute, responsive web 상황 보통 화면 레이아웃은 flex, grid 등의 css 속성을 이용하지만 축제 메인화면이라는 특수한 상황에 맞도록 디자이너와 함께 레이아웃을 고민했다. 결과적으로 아래와 같은 디자인이 확정되었다. 통계상 80%의 유저가 모바일로 접속하기 때문에, 모든 기기에서 레이아웃이 깨지지 않도록 신경을 써야한다. 배경 이미지(island)를 화면에 꽉 차도록하고, 하위 요소(굿즈, 공연, 행사, 미니게임, 방명록 등)의 위치를 상대적으로 잡아야한다. 해결방법 먼저 모든 기기에 대해 화면에 딱 맞게 배경이 그려져야한다. 보통은 '100%' 를 이용하여 표현하지만 이 경우엔 배경 이미지의 비율이 바뀌지 않고 항상 일정(늘어짐없이.. 더보기 svg mask fill 속성은 white로 지정하기 프로젝트: loplat UI 키워드: svg, mask, fill 상황 팀원분께서 IconButton이라는 컴포넌트를 개발하셨는데, 이상한 점이 있다고 하셨다. "svg에 border와 동일한 색상을 설정했는데 svg의 색상이 border색상보다 좀더 밝게 나타납니다." 실제로 확인해보니 border color와 svg fill 에 동일한 색상을 전달하지만, storybook 상에는 색상이 다르게 보이는 것을 확인했다. border-color: ${({ border }) => border.default}; svg path { fill: ${({ text }) => text.default}; } 해결 과정 개발자도구로 확인한 결과, svg path에는 정상적으로 fill 속성이 채워져있었다. fill의 색.. 더보기 safari inset, intersection observer 크로스 브라우징하기 프로젝트: loplat X mobile 키워드: 크로스 브라우징, inset, intersection observer 상황 1 Modal을 구현할 때, 회색 배경을 position: fixed; inset: 0; 으로 구현했다. 아이폰 8(12.0.1)과 맥북 사파리 13으로 접속해보니 Modal이 전혀 보이지 않는 현상이 발생했다. 해결과정 Modal 컴포넌트는 createPortal을 이용하여 'portal' div를 부모로 삼아 렌더링한다. return ReactDOM.createPortal( {children}, document.getElementById('portal') as HTMLElement ); 사파리 개발자도구를 통해 확인해보니, portal DOM 의 children 내용은 잘 채워져.. 더보기 css animation steps로 Spinner 구현하기 프로젝트: loplat ui 키워드: css animation steps, sprite image, 용량 최적화 상황 로딩 상태일 때 화면에 표시할 Loading UI Component가 필요하다. loplat ui library에서 재사용 가능한 컴포넌트를 직접 구현하고자한다. 로딩 애니메이션을 위해 gif를 사용할 경우 용량과 성능 문제가 발생한다. sprite image와 css animation의 steps 속성을 이용하여 애니메이션 효과를 구현할 수 있다. 해결과정 먼저 디자이너로부터 30장 이상으로 이루어진 sprite image를 받고 img 태그의 src에 넣었다. React Component의 prop으로 duration(애니메이션 재생 시간), scale(컴포넌트 크기 조절), zInd.. 더보기 이전 1 다음
