블로그ui2 CSS 타임라인 (position 활용, 구조 설계, 접근성) 타임라인 UI를 만들 때 가장 어렵다고 생각하는 게 뭔지 물어보면, 대부분 "애니메이션"이나 "디자인"을 꼽습니다. 그런데 제가 직접 써봤는데, 진짜 발목을 잡는 건 따로 있었습니다. 수직선 하나 제대로 그리는 것, 그리고 그 선과 카드를 맞물리게 하는 position 속성의 이해였습니다. 블로그에 "개발자가 된 과정"을 연대기로 정리하면서 처음 타임라인을 도입했는데, 줄글로 쓸 때는 독자가 연도별 흐름을 거의 파악 못 한다는 걸 그때 처음 실감했습니다.수직선 하나에 이렇게 많은 게 걸려 있을 줄 몰랐습니다CSS 타임라인 구현에서 핵심이 되는 건 position 속성입니다. 여기서 position이란 HTML 요소가 문서 흐름 안에서 어디에 자리를 잡을지, 그리고 그 기준점을 무엇으로 삼을지를 제어하는 .. 2026. 7. 1. CSS 이미지 오버레이 - 구현 방식, 접근성 JavaScript 없이 이미지 위에 설명을 띄울 수 있다는 말, 처음엔 반신반의했습니다. 포트폴리오 페이지를 만들면서 mouseenter 이벤트 리스너를 카드마다 붙이던 저도 결국 CSS :hover 한 줄로 갈아탔고, 코드가 절반 이하로 줄었습니다. 그런데 직접 써보고 나서 느낀 건, 구현 방법을 배우는 것보다 그 전에 생각해야 할 것들이 더 많다는 점이었습니다. 효과가 화려할수록 그 뒤에 숨어 있는 문제가 더 많았습니다.opacity, translateY, clip-path: 세 방식의 실질적인 차이가장 흔하게 쓰이는 방법은 position:absolute와 opacity를 조합하는 방식입니다. 컨테이너에 position:relative를 주고, 오버레이를 absolute로 얹은 뒤 :hover 시.. 2026. 4. 21. 이전 1 다음
