📝 ~ 22년 11월 4주차

인터랙션 가이드가 줄줄이

• 영상으로 인터랙션 적용하기! 저장소에 바로 mp4 파일을 넣어보았으나 import 되지 않는다 ㅠㅠㅎㅎ loader 가 따로 설치되어있어야하나~ 요청드릴까하다가 일정이 얼마 안남았기때문에..후다닥 작업하고 싶어서 임시로 사내 ftp에 올려서 링크로 넣어서 확인해봤다 😤
  • <video> 태그를 사용해봤다. 오 신기 ㅎㅎ 브라우저별로 바로 재생이 안되는 이슈가 있어서 이것저것 찾아봤다.
  • 저전력에서도 바로 재생이 안된다! 재생버튼이 안이뿌다고 하신다.
  • 띠용..? 갑자기 비디오 근처에 회색선이 생긴다... 일부 브라우저에서만 모든 예상되는 css 를 제거해보았지만 해결되지 않는다...clip-path 속성을 이용해서 그냥 1px 씩 자르기로 함!
• 버튼에 테두리 따라 하이라이팅 되는 디자인이 들어왔다. 선이 반짝반짝 거리는 느낌이 있어서 css 만으로는 디자이너님이 원하는대로 될 것 같지는 않다. 로띠를 쓸까하는데... 디자인이 해상도에 따라 유동적이라서 이것도 가능한건가? 🤔
  그래도 css 로 반영할 수 있는 방법이 없을까 검색해보던 중에 재밌는 아티클 발견! 나중에 다시 읽어보자.
  • https://dev.to/chokcoco/fantastic-css-border-animation-5166
• svg 체크 애니메이션 가이드가 또 들어왔네?! 흠 예전에 슬그머니 한적이 있었던것 같은데...하면서 찾아봄. 그때의 나 will-change 썼었잖어..? 그때 열심히 찾아서 했던것 같은데 기억이 안나 ㅠㅠ 다시 돌이켜보기~

텍스트 개행은~?

• 갑자기 생각난 word-break: break-word 등등 예전에 엄청 찾았던 기억이 있는데...다시 한번 내용 정리해보기 word-wrap => overflow-wrap 로 된것만 기억난다 가물가물

이상한 이슈들...

• (?) svg 아이콘이 있는데 ios 에서 매번 1px 씩 잘리는 이슈가 들어온다. 내부에 여백을 1px 수정하거나 여백을 띄어쓰기로 반영하면 이슈가 해결되곤 했는데... 대체 이유가 뭔지 이제는 뜯어볼때가 된게 아닐까?
  요즘 살짝 의심가는것은 svg 아이콘 생성시에 살짝 픽셀이 0.5 위치에 있던건 아닐까 함!
• 돔 스크롤 액션이 있을경우에 ios a 링크 버튼이 한번에 클릭이 안된다고 하시는데...이유가 뭘까? 정말 뭘까~~ 나도 얼른 해결하구 싶다~~