본문 바로가기

CSS3

wv-2503~2505-02 (스크롤바 작업 중 기록 / 스크롤바 CSS 속성) 스크롤바 작업중이었다.아.. 난관에 봉착했다.뭐가 문제인가?스크롤바 상단, 하단의 여백이 없어서border-radius가 들어간 영역에서는 스크롤바가 보기 좋지 않다.아래와 같이 말이다.. 라운드가 아닌 직각 박스안에서는 크게 문제 될 것은 없어보이나,모서리가 둥근 박스에서는 스크롤바가 .. UI작업 하면서 매번 고민과 고통을 주는 요소들이 있다.요즘에는 SWIPER 커스텀, 그리고 스크롤바가 그것이다.디자이너가 원하는 스크롤바는 구현하기 쉽지 않다.애초에 스크롤바를 CSS로 커스텀하기가 .. 고되다. (MDN에서도 말한다. '스크롤바 스타일을 지정하는 것은 피해야 합니다. 스크롤바의 모양을 기본 설정에서 변경하면 외부 일관성이 깨져 사용성에 부정적인 영향을 미치기 때문입니다. '라고..) 위에는 C.. 2025. 4. 30.
wv-2503~2505-01 (인터랙션 작업 중 기록) WV 인터랙션 작업 중 (카드 펼쳐짐) 크롬에서는 부드럽게 정상적으로 작동하는 반면, 사파리, edge 에서 버벅거림 현상 발견. 이유는 top, left 로 위치를 잡았기 때문. transform으로만 작업했더니 모든 브라우저에서 부드럽게 정상 작동! 반응형 사이트이기 때문에 mobile 분기에서는 아래처럼 vw 단위를 사용했다. 현재 인터랙션 작업하면서 가장 까다운것이 cubic-bezier 값 맞추기. 이게 지금 제일 어렵다. 2025. 4. 16.
프론트엔드 개발 취업 아카데미 [1일차] 오리엔테이션/HTML/CSS 1월 11일 드디어 학원 수업 개강. 1월 11일 ~ 4월 12일 오전 10시 ~ 오후 5시월 ~ 목 (월~수 까지 개발 수업, 목요일은 포폴 제작)이 학원의 과정을 선택하기 전에 고민을 많이 했던 이유는 UI 개발이 수업의 많은 비중을 차지하고 있었기 때문이다. 리액트와 뷰는 수업과정의 막바지 스케줄에 포함되어 있었고 그것도 기간이 매우 짧았다. 하지만 리액트, 뷰, 스벨트 등 프레임워크와 라이브러리는 일단 잊고 HTML, CSS, JS의 기본 개념과 본질을 다잡는 게 우선이라고 생각했다. 기본기가 제대로 갖춰져 있어야 어떤 프레임워크를 사용하든 형식에 맞게 바꾸면 되는거니까(쉽지 않겠지만😁) 수업 과정에서 가장 높은 비중을 차지하는 것은 플러그인을 사용하지 않고 UI 직접 개발하기. 이거 수료하고 .. 2022. 1. 12.