혜르미온느

이전에 스크롤을 부드럽게 하는 방법에 대해 포스팅을 했었는데, css로도 풀 수 있어서 기록용으로 남겨둔다. ✔️ 스크롤을 부드럽게 움직이는 JS 방법 https://hyermione.tistory.com/115 js scroll을 부드럽게 만드는 방법 (+ 사파리 적용) scroll을 smoth하게 올라가는 기능이 사파리에서 지원된다고 한다. 관련해서 정리해보려고 한다. ✔️ 스크롤을 부드럽게 움직이기 https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo Window.scrollTo() - hyermione.tistory.com ✔️ 스크롤을 부드럽게 움직이는 css 방법 css로 풀어내는것은 매우 간단한데, html에 다음과 같은 코드를 ..

화면에서 안 보이게 하는 스타일 속성에는 여러가지가 있다. 퍼블리셔님이 width: 1px, height: 1px인 div를 overflow: hidden 처리를 하여 잡아준 스타일이 있다. 1px인 정사각형을 화면에 노출시켜주고, 넘치는 부분을 잘라줬는데, 이상하게 화면에서는 렌더링 되었다고 인지하지 못한다. 그래서 알아본 화면에서 안 보이게 하는 방법 포스팅인데, 이제 overflow를 곁들인 이야기이다. overflow overflow는 사실 화면 노출에 관한 스타일은 아니고, 콘텐츠 요소가 블록의 크기를 초과할 때 처리에 관한 속성이다. 다만 퍼블리셔님이 작성해준 것 처럼 1px 크기의 정사각형에 overflow hidden을 통해 넘치는 콘텐츠 요소를 잘라주면 마치 화면에서 사라진 듯한 효과를 ..

google I/O라는 것이 있다. 말 그래도 구글에서 개최하는 것으로 매년 개최되는 개발자 컨퍼런스와 같은 것이다. 나는 직접 듣지는 않고, 이제 실시간으로 들으신 고수분들께서 정리해 놓으신 것을 확인하며 냠냠 먹는 편인데, 이번에 CSS가 좋은 기능을 많이 탑재하는 것 같다 개인적으로 FE는 CSS를 아예 배제하고 살아가는 분야는 아니라고 생각하여 CSS의 동향같은 부분은 파악하려고 하는 편이다. 그런데 이제 다 정리하려고 하니 너무 많은 부분들이 있어서 흥미롭게 본 주요 기능들의 요약과 관련 정보 URL을 첨부해두려고 한다. 체크해 둔 부분을 더 자세하게 알고 싶으면 하단 URL에서 확인하면 된다 color-mix() : 색상 혼합하기 기능. 괄호 안의 컬러들을 서로 조합시켜주며, % 조절도 가능하..

옛날에 함께 일했던 사수는 신기술에 대한 관심이 엄청났는데, 어느정도냐면 사수를 통해 들은 기술 관련 이야기를 구글 등에 검색해보면 한국 블로그는 찾아 볼 수도 없을 뿐더러 외국에서도 이제 막 관심이 커지면서 커뮤니티가 생성되고 있을 정도로 빠른 정보력을 가지고 있었다. 덕분에 N년 전 Tailwind CSS에 대해서 들었었는데, 현재도 여전하지만 당시에도 부트스트랩만 있으면 스타일은 아무것도 두렵지 않아! 하던 시절이라 흘려 듣고 말았다. (물론 사수와 함께 진행한 프로젝트는 부트스트랩 말고, 더 최신에 나온 스타일을 사용했다.) 시간이 흐른 지금 강의를 듣다가 Tailwind CSS가 언급되는 걸 보고 처음 들었을 때 진작 알아보고 공부해볼걸 이라는 아쉬움이 들어 더 늦지 않게 간단하게 정리해보려고 ..