본문 바로가기

FE/HTML & CSS

 (2)
순차적 말줄임 1. 업무 중 독특한 말줄임을 요청받은 경험이 있어서, 어떻게 구현하였는지에 대한 경험담을 적어보고자 합니다. 1. 요청받은 말줄임 디자이너님으로부터 위 캡처 기준으로 아래와 같이 요청받았습니다. 디폴트: 파란색, 빨간색, 초록색 영역이 순서대로 노출되며, 파란색 영역은 말줄임 없이 노출입니다. case1(빨간색 영역이 길어질 경우): 빨간색 영역 말줄임 추가, 초록색 영역은 말줄임 없이 전체 노출 case 2(초록색 영역이 길어질 경우): 빨간색 영역 미노출, 초록색 영역 말줄임 추가 2. 말줄임 구현하기 가. 스펙 & 사용 가능 속성 확인하기 스펙: IE10+/ Android 5.0+ 스펙이 비교적 높았기 때문에 float: left와 display: flex 조합을 사용하기로 했습니다. 나. 파란색 영역..
translate3d(0,0,0)이란 뭘까? 이번에는 transform: translate3d(0, 0, 0) 속성에 대해 알아보고, 언제 사용하면 좋을지 살펴보고자 합니다. 1. transform: translate3d(0, 0, 0) 접하게 된 배경 CSS를 활용한 애니메이션 작업을 진행하던 도중, 아이폰 환경에서 스와이프로 인한 화면 전환이 이루어졌을 경우 툴팁 애니메이션에 일명 flickering 현상이 발생했습니다. Flickering 현상의 원인을 찾고 해결방안을 찾던 도중 다수의 stackoverflow 답변들이 transform: translate3d(0, 0, 0) 사용 권장을 했고, 적용하기 전 해당 속성에 대해 알아보기로 했습니다. 2. transform: translate3d(0, 0, 0) 이란? - transform: tr..

티스토리툴바