CS/HTML+CSS4 drawer in m.youtube ytm-engagement-panel ytm-engagement-panel-section-list-renderer.engagement-panel-comments-section .engagement-panel-section-list-background.draggable .engagement-panel-container .engagement-panel-section-list-header-wrapper .engagement-panel-content-wrapper ytm-section-list-renderer ytm-single-column-watch-next-results-renderer aria-hidden .player-size { position: relative; width: 100%; padding-.. 2021. 11. 21. [UI/UX] px에서 rem으로 최근에 "Why designers should move from px to rem — and how to do that in Figma" 라는 제목의 글을 읽었다. 평소에 관심 있었지만 항상 헷갈렸던 주제였는데 개념에 대한 설명과 실제 업무에서 쓰는 예시와 활용 방법 까지 알려주어서 너무 큰 도움이 되었다. 다음에 회사 디자이너 분들과 꼭 같이 읽고 싶다. 간단하게 정리를 해봤다. px 값의 문제점 절대값, 고정된 물리 값. 브라우저에는 기본값인 루트 폰트 사이즈가 있는데 보통 16px이다. 유저는 설정에서 이를 직접 변경할 수 있고, 시력 장애가 있는 유저의 경우 이 기능이 웹을 이용하는 데 중요할 수 있다. 그런데 px 값을 쓸 경우, 유저가 직접 자신에게 적절한 폰트 사이즈를 선택해도 이를 무시해버.. 2021. 11. 14. [211004] glowing effect, guidelines glowing effect box-shadow와 text-shadow로 구현한 것 같은데, 현실의 어떤 물리적인 사물을 이렇게 웹에서 구현할 때 너무 짜릿함... awesome guidelines 가이드라인 같은 단어만 보면 게걸스럽게 북마크에 담는 사람(주니어) 작은 글씨에 안티앨리어스 효과 transform: rotate(0.03deg) 놀랍도다 2021. 10. 4. 웹 페이지 로드 이후 HTML 엘리먼트의 위치가 바뀔 때 개츠비로 포트폴리오를 만들다가 메인이 좀 심심해보여서 이미지를 추가했다. 그런데 웹 페이지가 로딩 되는 동안 (1) 우선 이미지가 보이고, 웹 페이지가 전부 로드된 이후에야 (2) 그 이미지가 제 자리를 찾아가는 현상이 발생했다. div_1 position: relative; div_2 img position: absoulte; 알고보니 img가 두 단계로 중첩돼서 그런 거였다. 내 코드를 보면 중첩된 대로 div_1 → div_2 → img 가 차례대로 렌더링이 되고 나서 img의 position: absolute가 적용된다. (div_2는 div의 default position인 static이 적용되기 때문. 이 경우 엘리먼트는 순서대로 렌더링 된다.) 그러면 img는 div_2를 뛰어넘고 posit.. 2021. 5. 2. 이전 1 다음